javascript - HTML 片段到 JS 字符串的预处理器

Question

在我的项目中，我在 Javascript 字符串中有许多 HTML 片段。这些需要被格式化为有效的 JS——例如没有换行符。在这种单行格式中，编辑 HTML 可能会很累(我的编辑器中也没有语法高亮显示)。

我的想法是将这些片段保存为外部文件，然后在运行时加载它们，但这会增加很多网络调用。理想的解决方案是某种预处理器，它可以获取大量 HTML 片段文件并输出一个 JS 文件，其中所有 HTML 都解析为有效的 JS 字符串，文件名可能作为变量名。

有这样的东西吗？例子: 输入:

snippet_a.html

<div>
    My HTML here including whitespace...
</div>

snippet_b.html

<div>
    More HTML here ...
</div>

输出为 strings.js 文件:

snippet_a = '<div>My HTML here, whitespace as \n ...</div>';  
snippet_b = '<div>More HTML here ...</div>';

如果它可以通过 token 将字符串放在某个文件中它应该在的位置，那就更酷了。我正在考虑 CSS 预处理器、JS 编译器、类似于“Persistant Include”的 Textmate 包、ANT 脚本等工作流解决方案......

模板化是通常的做法，但这会将 JS 绑定(bind)到转储模板的特定 HTML 文件。

IMO 诸如 Textmate 持久性包含功能之类的东西会很棒 - 这就像注释一样工作，您可以将注释粘贴在您的 HTML 文件中，以便在您点击“更新”快捷方式时拉入另一个文件的内容。不适用于 JS 或预处理内容。

Answer 1

简短回答:看看 John Resig 的这篇文章 Javascript Micro-Templating http://ejohn.org/blog/javascript-micro-templating/

长答案:

有几种方法可以克服“长行问题”，最简单的方法之一就是通过连接字符串来切断行。

var snippet = "<h1>A Long html snippet</h1> "+
              "<p>This is a long html snippet that I don't want to be forced "+
              "to edit in a single line of code.</p>";

解决“html语法高亮”的方法也有几种。我倾向于使用一个简单的技巧在 <script> 中设置 html 片段标签或隐藏 ( display:none ) <div>标签。

<div id="snippet" style="display:none">
  <h1>A Long html snippet</h1> 
  <p>This is a long html snippet that I don't want to be forced
  to edit in a single line of code.</p>
  <p>And I like some syntax highlighting, too</p>
</div>

然后在我的代码中使用它们

var snippet = document.getElementById("snippet").innerHTML;

最后，对于一个完整的控件，有几种预处理技术和工具来预处理html和js文件。我使用模板引擎，jade 可能是最了解的，尽管我更喜欢 EJS。

第二种和第三种技术的一个很好的纲要是我上面提到的 John Resig 文章。