Jquery - 你如何管理 HTML 代码？答案

【问题标题】：Jquery - How do you manage the HTML code?Jquery - 你如何管理 HTML 代码？
【发布时间】：2011-09-09 08:48:51
【问题描述】：

例如

- 易于阅读

<div class="display">

   <div align="right" bgcolor="fuchia" id="pretendmenu">
        <a href="" class="2">HOME</a> 
        <a href="" class="2">CONTACT</a>
        <a href="" class="2">ABOUT</a>
   </div>

   <div align="left" bgcolor="white" id="content">
      <h5>Content Articles</h5>
      <p>This paragraph would readable material.</p>
   </div>

</div>

- 难以阅读

$('body').append('<div class="display"> <div align="right" bgcolor="fuchia" id="pretendmenu"> <a href="" class="2">HOME</a> <a href="" class="2">CONTACT</a> <a href="" class="2">ABOUT</a> </div> <div align="left" bgcolor="white" id="content"> <h5>Content Articles</h5> <p>This paragraph would readable material.</p> </div> </div>');

如何管理 HTML 代码？

编辑：也许使用模板系统？

【问题讨论】：

标签： jquery html templates

【解决方案1】：

我之前使用过jQuery tmpl 模板并取得了一些成功。

【讨论】：

【解决方案2】：

建议将你的 HTML 代码放在一个 HTML 文件中，并用 AJAX 取回，这样内容就可以从你的 JavaScript 文件中分离出来（更易于维护）。

【讨论】：

【解决方案3】：

jQuery 确实有它自己的模板系统，但我没有详细研究它。

您可能会争辩说代码的可读性对开发人员有利，但删除空格对最终用户有利（通过减小文件大小）。考虑到这一点，您可以将 html 以缩进的方式放在 JS 中，以便您可以合理地阅读它，但将其输出在一行中以供最终用户提高网站的性能。

【讨论】：

【解决方案4】：

您可以求助于客户端模板。您基本上定义了一个模板并使用 jquery 将您的结果与它合并。可以通过 Ajax 从服务器获取数据。

【讨论】：

【解决方案5】：

MicroJS 链接到一些很棒的模板库。我真的很喜欢ICanHaz.js。如果您对使用 CoffeeScript 感兴趣，那么我建议您同时查看 CoffeeKup。

【讨论】：