1

我想从没有 Javascript 的页面开始，然后添加 Javascript 的奇思妙想，最后添加一些 Ajax。

这一切似乎使东西保持清洁，我对我的第一次实验感到非常满意。然后我遇到了以下问题，我没有看到一个好的解决方案。对于这 2 个示例页面：

<!-- /products/ -->
<ul>
    <li>
        Product A thumbnail
        <a href="/details/1/">Details for A</a>
    </li>
    <li>
        Product B thumnail
        <a href="/details/2/">Details for B</a>
    </li>
</ul>

<!-- /details/<id>/ -->
<script type="text/javascript" src="/details.js/"></script>
show details about the product with the given id
details.js will unobtrusively enhance it

我想要的功能

使用 Ajax 动态加载/products/页面上产品的一些详细信息，例如当鼠标悬停在缩略图上时。/details/<id>/更准确地说，获取并显示页面上的简化版本/products/。

不显眼的实现

href悬停照片时，对相应锚点的属性发出 Ajax 请求。服务器可以响应整个/details/<id>/页面，而 JQuery 选择器可以只剪切有趣的部分。或者，服务器可以看到请求是特殊的并且只返回有趣的部分。到目前为止一切顺利，简单干净。

问题

该/details/<id>/页面不仅仅是 HTML。它也有自己的 Javascript 让它看起来很漂亮，因此我想在/products/页面中重用该 Javascript。因此，我/products/不仅要从中获取 HTML，/details/<id>/还要复制完整/details/<id>/页面上存在的 Javascript 行为。

我能想到的唯一（坏）解决方案

编写显式代码来复制浏览器在加载页面时所做的事情： fetch /details/<id>/，查找所有<script>标签，获取该 Javascript，触发加载处理程序。这是很多样板的东西，似乎很难做到正确。我显然不想写它，因为结果很简单。

我也觉得如果你真的坚持不显眼的 Ajax 并且必须有一个更优雅的解决方案，那么这是经常出现的问题。

4

1 回答 1

2

在架构上，更简洁的解决方案是使用 Ajax 调用，它只返回产品数据（可以使用 XML 或 JSON 表示），而不是获取 HTML 并尝试从中剔除产品数据。目标是将数据与演示文稿分开。我用于类似场景（鼠标悬停时出现细节）的一种技术是拥有一个包含在页面中但被隐藏的 HTML“模板”。在鼠标悬停时，进行 Ajax 调用以检索产品数据（我通常会缓存数据，以便相同项目的后续鼠标悬停不必重新检索数据），填充您的 HTML 模板，定位它，然后显示它。

如果您担心复制 JavaScript，也许应该将 JavaScript 移动到可以包含的单独文件中。如果 JavaScript 非常特定于页面，那么可能需要使其更通用/可重用。或者也许您应该使用 CSS 和/或服务器端技术而不是 JavaScript 来“让它变得花哨”。

于 2010-11-10T15:43:37.487 回答