2

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

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

这样的事情存在吗？示例：输入：

片段_a.html

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

片段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>';

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

模板化是常用的方法，但这会将 JS 绑定到转储模板的特定 HTML 文件。

IMO 之类的 Textmate 持久包含功能会很棒 - 这就像一条评论，您可以在您的 HTML 文件中粘贴在您点击“更新”快捷方式时拉入另一个文件内容的地方。但不适用于 JS 或预处理内容。

4

2 回答 2

0

http://jsfiddle.net/MRJKb/1/

将html转换为json：

JSON.stringify(your_html_element.outerHTML)

转换回html：

JSON.parse(your_json_string);

完整的小提琴：

<p>Original string:</p>

<div id="template">
    <div>
        My HTML here including whitespace...
    </div>
</div>

<p>JSON representation:</p>
<textarea rows="2" cols="60"></textarea>

<p>Back to html:</p>

<div id="output"></div>

和javascript：

$('textarea').val(
    JSON.stringify($('#template').html())
)
$('#output').html(JSON.parse($('textarea').val()))
于 2013-07-04T16:32:42.290 回答
0

简短回答：看看 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>标签或隐藏 ( display:none)<div>标签中设置 html 片段。

<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。

于 2013-07-04T15:28:02.537 回答