复杂的 HTML 工具提示（存储）——架构建议

Question

我正在开发一个复杂的页面，其中包含一些小部件、一些“可拖动”元素和一个<canvas> 交互式时间线。

---

问题：

在mouseover - 在可以拖动的元素（实体）上 - 我必须显示一个工具提示，其中包含有关该特定元素的一些高级信息（实体页面的“预览”）。

可拖动的项目（我认为它们约为 100 个）以这种方式表示（其中一些是动态创建的）：

<!-- ... -->
<div id="entity-1" class="draggable">
    <div class="title">title</div>
    <img src="#URL" alt="..." />
    <div class="tooltip-wrapper"></div>
</div>
<div id="entity-2" class="draggable">
    <div class="title">title</div>
    <img src="#URL" alt="..." />
    <div class="tooltip-wrapper"></div>
</div>
<div id="entity-3" class="draggable">
    <div class="title">title</div>
    <img src="#URL" alt="..." />
    <div class="tooltip-wrapper"></div>
</div>
<!-- ... -->

其中.tooltip-wrapper 最初设置为display:none 和opacity:0

一般的工具提示是一种包含一些细节的复杂 HTML，即（很多简化）

<div class="tooltip-entity-wrapper">
    <div class="title">entity title</div>

    <div class="tab"><!-- tab content --></div>
    <div class="tab"><!-- tab content --></div>
    <div class="tab"><!-- tab content --></div>

    <form action="...">
        <!-- form content -->
    </form>
    <a href="#URL"><!-- full entity page link --></a>
</div>

我正在考虑 3 种可能的解决方案：

• 在mouseover，（在第一个）发出一个返回特定工具提示 HTML 的 ajax 请求，将其注入到工具提示包装器中，显示它并在 mouseout 隐藏它。
• 在mouseover 上，（在第一个上）发出一个返回json 的ajax 请求，通过js（小胡子）渲染它，将其注入到工具提示包装器中，显示它并在mouseout 上隐藏它。李>
• 直接在元素内渲染工具提示，并打开mouseover/mouseout

css/布局/定位不是什么大问题，也是因为我已经创建了一个工具提示 mootools 插件模型（如果您对一些很棒的可定制的 mootools 工具提示插件有任何建议，请告诉我:)）。

我只需要一个提示/建议，说明实施此高级“工具提示”系统的方法，或者您是否有更好的解决方案可以建议我。 :)

谢谢大家

---

附言我正在使用 rails3（以及 haml、scss、compass）和 mootools 作为 js 框架（+ mustache 作为模板系统）开发网络应用程序。

Answer 1

在不首先满足您的一些业务需求的情况下，您不能真正采用一种方法并选择另一种方法。

你需要问自己的问题是：

---

搜索引擎优化很重要

如果是：

• 重要的是不要将内容放在正文中，因为它不相关或不独特，这可能会影响您的关键字密度，并给谷歌留下关于页面真实内容的错误印象，然后是 AJAX
• 重要的是要在正文中让 Google 看到，然后在隐藏元素中呈现

我觉得你的应用不需要太多，但这是一个有效的观点。

---

DOM 和“性能很重要”

如果是（您已经使用画布...100+ 可拖动...）

• 您将拥有多少（太多？）具有工具提示的节点（额外的 dom 节点）？太多？使用 ajax / 事件委托
• 每页的工具提示很少：仍然可以预渲染以节省额外的请求
• 添加所有提示事件的足迹，委托！
• 在等待 XHR onComplete 时延迟不受欢迎？预渲染！

---

网络/请求

如果你走 ajax 路线，你需要想办法尽量减少可能的请求数量，特别是如果可以一次又一次地触发相同的工具提示。这意味着：

• 在页面本地缓存请求结果，并在从服务器请求之前先检查缓存
• 如果您的数据不是动态/实时的，甚至可以考虑在某个键/db id 下推送到 localStorage，这将在页面重新加载、转换和回访访问者中存活下来。

至于操作方法，我知道你完全有能力编写实际代码，祝你好运:)

根据我的经验，我将两者结合起来。经常更改但不经常更改的股票信息会在每次页面加载时被缓存。使用/大小信息、表单助手等不会更改我缓存在 localStorage 中。具有明显 SEO 价值的工具提示在正文中。