Question

例如

- 易于阅读

<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代码？

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

Answer 1

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

Answer 2

建议将HTML代码放在HTML文件中，然后使用AJAX将其取回，以便可以将内容与JavaScript文件分开（更易于维护）。

Answer 3

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

您可能会争辩说代码的可读性对开发人员有利，但删除空白对最终用户有利（通过减小文件大小）。考虑到这一点，你可以用缩进的方式在JS中放置html，这样你就可以理解它，但是为最终用户输出一行来提高网站的性能。

Answer 4

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

请查看以下链接以获取更多相关信息：

http://www.west-wind.com/weblog/posts/2008/Oct/13/Client-Templating-with-jQuery

Answer 5

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

Jquery - 如何管理HTML代码？

5 个答案: