复杂的HTML工具提示(存储)-架构建议

Complicated HTML tooltips (storage) - architecture suggestion

本文关键字：-架 构建 存储 HTML 工具提示 复杂      更新时间：2023-09-26

我正在开发一个复杂的页面，其中包含一些小部件，一些'可拖动'元素和<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>

我正在考虑三个可能的解决方案:

  • 在mouseover上，(在第一个)做一个ajax请求返回特定的工具提示HTML，注入到工具提示包装器中，显示它，并在mouseout上隐藏它。
  • 在mouseover上，(在第一个)做一个ajax请求，返回一个json，渲染它的js (mustache)，注入它的工具提示包装，显示它，并在mouseout隐藏它。
  • 直接在元素内部呈现工具提示，并在mouseover/mouseout上切换

css/布局/定位不是一个大问题，也因为我已经创建了一个工具提示mootools插件模型(如果你有任何关于一些伟大的可定制mootools工具提示插件的建议，请让我知道:))。

我只是需要一个提示/建议，关于如何遵循这个先进的"工具提示"系统，或者如果你有更好的解决方案来建议我。:)

谢谢大家

注。我正在使用rails3(和haml, scss, compass)和mootools作为js框架(+ mustache作为模板系统)开发web应用程序。

如果不首先满足您的一些业务需求，您就不能真正选择一种方法而不选择另一种方法。

你需要问自己的问题是:

SEO重要吗

如果是:

    重要的是不要在正文中有内容，因为它不相关或不独特，可能会影响你的关键字密度，并给错误的印象关于页面的真实内容谷歌，然后AJAX
  • 重要的是要在正文中为谷歌看到，然后渲染在一个隐藏元素

我有一种感觉，你的应用程序不需要太多，但这是一个有效的点。

DOM和"is performance important"

如果是(你已经使用画布…100 +可拖动的…)

  • 有多少(是太多?)节点，你要有工具提示(额外的dom节点)?太多?使用ajax/事件委托
  • 每个页面的几个工具提示:仍然可以预渲染它，以节省额外的请求
  • 添加所有提示事件的占用空间，委托!
    • 在等待XHR onComplete时延迟是不可取的吗?pre-render !

网络/请求

如果您选择ajax路线，则需要找到一种方法来最小化可能的请求数量，特别是在可以一次又一次触发相同的工具提示的情况下。这意味着:

  • 在本地页面上缓存请求结果，并在从服务器请求之前首先检查缓存
  • 如果你的数据不是动态的/实时的，考虑甚至在一些键/db id下推送到localStorage，这将存活页面重载，过渡和回访。

至于如何做，我知道你完全有能力做实际的代码，祝你好运:)

从我的经验来看，我两者都做。经常更改但不经常更改的股票信息在每次页面加载时缓存。usage/sizing info, form helpers等不需要更改的信息都保存在localStorage中。具有明显SEO价值的工具提示位于正文中。

相关文章：