如何从HTML中分离Javascript/JQuery

How to separate Javascript/JQuery from HTML?

本文关键字：Javascript JQuery 分离 HTML      更新时间：2023-09-26

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

<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结构改变了(比如价格变化的类)，我可能需要在两个地方改变它。在静态HTML中，以及在Javascript中。

2)或者让服务器返回要附加到页面的实际HTML是更好的实践吗?但是这会不会很混乱，因为设计并没有与业务逻辑分离，而且实际的HTML结构可能会发生变化?

还是我错过了第三种选择?

您可以使用java-script侧模板-有很多库。我建议大家看看John Resig的方法。我相信基于jquery的模板引擎也在进行中。

你也可以在这里阅读Rick Strahl的经验，以及各种模板库的比较。

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

您可能想要考虑JavaScript模板。查看http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

您可以让JSON从AJAX调用返回，并让模板完成最困难的工作。这样你在HTML中只有一个地方可以修改类。

编码快乐!

您应该让javascript在接收到数据时创建div。通过让javascript获取整个HTML结构和价格，你加载的信息比你自己加载价格并让JS输出的信息要多。

快乐编程。

你在页面上看到的只是展示，浏览器只是一个显示设备。所有的表示逻辑都应该在一个地方，所以如果服务器生成显示(这是通常的情况)，那么在那里生成标记并将其插入客户端。

如果您想在客户端使用脚本访问页面中的数据，那么在保存数据的元素上使用合适的类或id，以便脚本可以找到它，而无需知道文档布局。

如果你只是在客户端上更新数据，使用相同的策略-将值传递给脚本，然后使用类或id(或其他)来确定要更新的元素。

如果你同时在服务器端和客户端做演示，如果有什么变化，你通常需要同时更新。

你可以在HTML中有一个空白的占位符，比如div，当细节不可用时div可以被隐藏。AJAX调用完成后，可以将包含标头和详细信息的结构动态添加到占位符中。如果结构改变了，你只需要修改一下JavaScript。

假设您控制了输出数据的服务器，您可以轻松地构建数据，如下所示:

<div id="product" data-price="$10.90" data-sales-price="$9.90">
    other markup here
</div>

任何以"data"为前缀的HTML属性都可以正常验证。

相关文章：