javascript - 如何从 HTML 中分离 Javascript/JQuery？

Question

假设我有一个使用 AJAX 检索价格和产品信息的 div，并将新产品附加到当前结果。

<div id="product">
<div class="label">Price: <div class="price">$10.90</div></div>
<div class="label">Sales Price: <div class="price">$9.90</div></div>
</div>

我能做到: 1) 仅获取价格和数据。然后遍历这些结果并让 Javascript 为每个产品动态创建 div。

问题:如果 div 的 HTML 结构发生变化(比如价格变化的类)，我可能需要在 2 个地方进行更改。在静态 HTML 以及 Javascript 中。

2) 还是让服务器返回实际的 HTML 附加到页面是更好的做法？但这不会很困惑吗，因为设计没有与业务逻辑分离，而且实际的 HTML 结构可能会改变？

或者我是否缺少第三种选择？

Answer 1

您可以使用 java 脚本端模板 - 有很多库。我会推荐看John Resig's approach .我相信还有工作正在进行jquery based template engine .

您还可以阅读 Rick Strahl 的经验 here还有the comparison各种模板库。

尽管基于 java 脚本的模板是解决您问题的完美方法，但如果您必须支持禁用 java 脚本的场景，那么您的选项 #2 是个不错的选择。通常，您使用服务器端模板为第一个请求和 ajax 请求生成 html(因此 html 结构仅在一个地方维护，即服务器端模板)。当然，在禁用 js 的场景下，你的 ajax 调用将变成常规的 POST 请求。