6

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

目前我将这些模板存储string在脚本中，但我想知道是否有更好的方法来做到这一点。

4

1 回答 1

5

tl;博士回答- 是的，您可以将它们存储在<script type="text/html">标签中或通过 ajax 动态加载它们。示例here（来自 KnockoutJS）和here。将它们存储在具有适当扩展名的文件中，并使用 id X 的空标签，然后$("#X").load("/path/to/template", function() { renderX(); })

长篇大论，有见地的想法，请继续阅读...

请确保系统的模板/视图或相关 GUI 组件位于单独的文件中（继续阅读以了解原因）

作为一名前端工程师，我学会了将层尽可能分开；这有助于您的团队更好地理解您的代码并使其更易于维护。在模块中分离你的层，然后通过“组装”机制组装它们可能是软件工程中的最佳实践之一。这种做法的一些好处包括：

  • 可维护性：多个开发人员可以浏览和编辑代码的单个部分，以创建更强大的软件。
  • 可读性：随着语言的数量越来越多，你不能指望每个人都能理解这些 X 或 Y 语言的所有语法；在一个文件中混合语言只是让代码审查员感到困惑并使他花费比需要更多的时间的一个步骤。
  • 可访问性：例如，html、jade、haml、smarty、twig、erb 或其他模板文件。这些文件应始终以正确的扩展名命名，以帮助代码编辑器和 IDE 突出显示语法。开发人员只需要浏览一个文件夹就知道这些文件应该做什么。脚本或机器人可以从扩展中获取重要信息。

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

（现在我希望我说服你从你的代码中删除你的字符串并在那里创建一个新文件，否则我真的需要提高我的写作技巧）

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

关于 Javascript 和 Chrome 扩展的一句话

Javascript 没有默认的模板功能（哎呀，它甚至没有模块化功能，尽管一些聪明的人正在为 ECMAScript Ed. 6 开发它，耶！），这意味着我们需要使用模板图书馆。假设您正在使用 Mustache、Underscore 类似的模板，因此使用它的库来渲染它。

大多数模板引擎都使用臭名昭著eval的 . Chrome 扩展开发团队甚至强制执行该manifest.json文件的新版本以禁止eval，并让开发人员选择使用沙盒页面来执行此操作。对我们来说幸运的是，他们决定稍微放宽政策，我们可以继续在manifest.json.

这意味着我们需要解决两个问题而不仅仅是一个问题：“加载模板”和“以一种不会吓坏新传入 CSP 版本的方式渲染模板，以防 Chrome 扩展开发团队更改他们的头脑”。

加载模板

幸运的是，加载模板可以通过 AJAX 的 XML HTTP 请求来完成。只需将 url 指向文件名，您就可以将模板作为字符串接收，这可能是您最初的设置。这是我用 KnokcoutJS 做的一个例子：

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

#aiesecTemplate是<script type="text/html">浏览器不会呈现为 DOM 的一部分的标签。您可以将其与其他模板机制一起使用，以便实际组装您的 DOM。如果您已经对此有解决方案，那么这可能是答案的结束，您可以继续您的生活。如果您想知道我们如何从那里渲染代码，请继续阅读。

渲染模板

由于大多数模板引擎库不兼容 CSP（ AngularJS是一个例外），Chrome 开发团队建议我们将渲染过程沙箱化。这是 Sandbox 页面的代码摘录。

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

具有模板引擎的页面属性iframe的沙盒页面中的特定 DOM Iframe 元素在哪里？具有先前加载的字符串模板，因此在 iframe 内发布消息后 a for可以毫无问题地呈现它。可以在此处阅读有关沙盒评估的更多信息srcmessagewindow.addEventListenermessage

结论

如果你能到这里，太棒了！我的回答可能不会那么无聊。最后一点，您可能在想“AMD 或 RequireJS 怎么样？”；老实说我没有尝试过，但真正聪明的人认为 AMD 不是最好的方法。通过 XML HTTP 请求加载可能不会更好，但如果您认为它会影响您的性能（我在我的应用程序中使用过它，但它没有），您总是可以使用一些事件页面和Web Worker。

于 2013-01-10T05:29:38.640 回答