Javascript 在Chrome内容脚本中使用模板的建议方法是什么？

我在Chrome内容脚本中为添加到匹配页面的

元素使用了几个模板

目前我正在脚本中将这些模板存储为
string
，但我想知道是否有更好的方法来实现这一点；dr answer-是的，您可以将它们存储在
标记中，或者通过ajax动态加载它们。示例（来自KnockoutJS）和。将它们存储在具有适当扩展名的文件中，并使用id为X的空标记，然后
$（“#X”）.load（“/path/to/template”，function（）{renderX（）；}）

带着深刻的想法回答，继续阅读

请确保系统的模板/视图或相关GUI组件位于单独的文件中（请继续阅读以了解原因）
作为一名前端工程师，我学会了尽可能保持各层之间的分离；这有助于您的团队更好地理解代码并使其更易于维护。在模块中分离层，然后通过“组装”机制组装它们，这可能是软件工程中的最佳实践之一。这种做法的一些好处包括：


可维护性：多个开发人员可以浏览和编辑代码的单个部分，以创建更健壮的软件
可读性：语言种类繁多，你不能指望每个人都能理解这些X或Y语言的所有语法；在单个文件中混合语言只是混淆代码审阅者的一个步骤，这会让他花费更多的时间
可访问性：例如，html、jade、haml、smarty、twig、erb或其他模板文件。这些文件应始终使用适当的扩展名命名，以帮助代码编辑器和IDE突出显示语法。开发人员只需浏览一下文件夹，就可以知道这些文件应该做什么。脚本或bot可以从一个扩展中获得重要信息

通过将视图保存在单独的文件中，其他编码人员可以查看它们并了解系统的重要层，而无需了解整个应用程序；当开发人员只需要查看这些特定文件时，协作也会变得更容易。通过重击或脚本编写，即使是具有数千个“视图”的大型体系结构系统（如文件）也可以进行过滤，以便输出需要检查的内容

（到现在为止，我希望我说服您从代码中删除字符串并创建一个新文件，然后将其保存在那里，否则我真的需要提高我的写作技能）

因此，在我们将模板移动到外部文件后，接下来要做什么？

一个关于Javascript和Chrome扩展的词
Javascript没有默认的模板功能（见鬼，它甚至没有模块化的功能，尽管一些聪明人正在为ECMAScript Ed.6开发它，耶！），这意味着我们需要使用一个模板库。让我们假设您正在使用类似内容的Mustache、下划线模板，并因此使用其库来渲染它

大多数模板引擎都使用臭名昭著的
eval
，这可能会为您的代码提供一个漏洞，而Chrome扩展非常不喜欢这个漏洞。Chrome扩展开发团队甚至强制执行了一个新版本的
manifest.json
文件，以禁止
eval
，并让开发人员选择使用它。幸运的是，他们决定稍微放宽一些策略，我们可以在
manifest.json
中使用适当的定义

这意味着我们需要解决两个问题，而不仅仅是一个：“加载模板”和“在Chrome扩展开发团队改变主意的情况下，以一种不会使CSP的新版本崩溃的方式呈现模板”

加载模板
幸运的是，可以通过AJAX通过XML HTTP请求加载模板。只要将文件名指向url，您就可以以字符串形式接收模板，这可能是您最初的设置。下面是我使用KnokcoutJS的一个示例：

 $("#aiesecTemplate").load('js/libs/aiesec/aiesecTemplate.html', function() {
      ko.applyBindings(AIESECViewModel);
 });

#aiesecTemplate
是一个
标记，浏览器不会将其作为DOM的一部分呈现。您可以将其与其他模板机制一起使用，以便实际组装DOM。如果你已经有了一个解决方案，这可能就是答案的终点，你可以继续你的生活。如果您想知道如何从那里呈现代码，请继续阅读

呈现模板
Chrome开发团队建议我们对渲染过程进行沙箱处理，因为大多数模板引擎库都不符合CSP（这是一个例外）。下面是来自沙箱页面的代码摘录

iframe.contentWindow.postMessage(message, '*');

其中，
iframe
是来自沙盒页面的特定DOM iframe元素，具有具有模板引擎的页面的
src
属性
message
之前加载了字符串模板，因此在发布消息后，iframe内的
message
的addEventListener

可以毫无问题地呈现它。可以阅读有关沙箱评估的更多信息

结论

---

如果你到了这里，太棒了！我的答案可能没那么无聊。最后，您可能会想“AMD或RequireJS怎么样？”；老实说，我没有试过，但我认为AMD不是最好的方法。通过XML HTTP请求加载可能不会更好，但如果您认为它会影响您的性能（我在我的应用程序中使用了它，但它没有），您可以始终使用一些，并与之配合使用。

嗯，我认为这个答案不适用于Chrome扩展？