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

Question

我在Chrome内容脚本中使用了多个模板来添加要添加到匹配页面的elements。

当前，我在脚本中将这些模板存储为string，但是我想知道是否有更好的方法来执行此操作。

Answer 1

tl;博士回答-是的，您可以将它们存储在<script type="text/html">标记中，也可以通过ajax动态加载它们。示例here(来自KnockoutJS)和here。将它们存储在具有适当扩展名的文件中，并使用ID为X，然后为$("#X").load("/path/to/template", function() { renderX(); })的空标签
长见识深的答案，请继续阅读...
请确保系统的模板/ View 或相关的GUI组件位于单独的文件中(请继续阅读以了解原因)
作为前端工程师，我学会了使各层尽可能分开。这有助于您的团队更好地理解您的代码并使其更易于维护。在模块中分离各层，然后通过“组装”机制进行组装可能是软件工程中的最佳实践之一。这种做法的一些好处包括:

可维护性:多个开发人员可以浏览和编辑代码的单个部分，以创建功能更强大的软件。

可读性:由于语言种类繁多，您不能指望每个人都能理解这些X或Y语言的所有语法。在单个文件中混合语言只是使您的代码审阅者感到困惑，并使他花费比所需更多时间的一个步骤。

辅助功能:例如html，jade，haml，smarty，twig，erb或其他模板文件。这些文件应始终以适当的扩展名命名，以帮助代码编辑器和IDE突出显示语法。开发人员只需要浏览一个文件夹就可以知道这些文件应该做什么。脚本或漫游器可以仅从扩展中获取重要信息。

通过将 View 保存在单独的文件中，其他编码人员可以查看它们并了解系统的重要层，而无需了解整个应用程序。当开发人员只需要查看那些特定文件时，甚至协作也变得更加容易。通过重击或脚本编写，甚至可以过滤具有数千个“ View ”(例如文件)的大型体系结构系统，以便仅输出需要检查的内容。
(现在，我希望我说服您从代码中删除字符串，并在其中创建一个新文件，否则我确实需要提高自己的写作技巧)
因此，在将模板移至外部文件之后，下一步该怎么做？
谈谈Javascript和Chrome扩展
Javascript没有默认的模板功能(哎呀，它甚至没有模块化的功能，尽管有些聪明的人正在为ECMAScript Ed。6进行开发，是的!)，这意味着我们需要使用模板功能库。假设您正在使用类似的Mustache，Underscore模板，并因此使用其库进行渲染。
这些模板引擎大多数都使用臭名昭著的eval，它可以为您的代码提供漏洞，而Chrome扩展程序则对此非常讨厌。 Chrome扩展开发小组甚至实现了新版本的manifest.json文件以禁止eval，并为开发人员提供了使用Sandboxing Pages的选择。对我们来说幸运的是，他们决定放宽政策，我们可以继续在manifest.json中使用正确的CSP定义来使用它。
这意味着我们需要解决两个问题，而不仅仅是一个:“加载模板”和“以某种方式呈现模板”不会使新的CSP版本吓坏，以防Chrome扩展开发团队更改其版本。头脑”。
加载模板
幸运的是，可以通过AJAX通过XML HTTP Request来加载模板。只需将URL指向文件名，您就可以将模板作为字符串接收，这可能是您最初设置的。这是我使用KnokcoutJS的一个示例:

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

#aiesecTemplate是<script type="text/html">标记，浏览器不会将其呈现为DOM的一部分。您可以将其与其他模板机制一起使用，以实际组装DOM。如果您已经有解决方案，那么这可能是答案的终点，您可以继续生活。如果您想知道我们如何从那里渲染代码，请继续阅读。
渲染模板
Chrome开发团队建议我们将渲染过程沙盒化，因为大多数模板引擎库都不符合CSP标准(AngularJS是一个异常(exception))。这是“沙盒”页面中的代码摘录。

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

其中iframe是沙盒页面中的特定DOM Iframe元素，具有模板引擎页面的src属性； message先前已加载了字符串模板，因此在发布消息后，iframe中window.addEventListener的message可以毫无问题地对其进行呈现。有关沙盒评估的更多信息，请阅读here
结论
如果您来到这里，真棒!我的回答可能不会那么无聊。最后一点，您可能会想“AMD或RequireJS呢？”；老实说，我还没有尝试过，但是really smart people认为AMD并不是最好的方法。通过XML HTTP Request加载可能不会更好，但是如果您认为它影响了性能(我在我的应用程序中使用过，但没有使用)，则可以始终使用Event Pages 和Web Workers。