Сложные подсказки 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, (на первом) сделать ajax-запрос, который возвращает определенный HTML-код всплывающей подсказки, вставить его в обертку для всплывающей подсказки, показать его и на mouseout скрыть.
• На mouseover, (на первом) сделать запрос ajax, который возвращает json, визуализировать его с помощью js (ус), вставить его в обертку для всплывающей подсказки, показать и на mouseout скрыть.
• Отобразить подсказку прямо внутри элемента и включить ее mouseover / mouseout

css / layout / positioning не является большой проблемой, в том числе и потому, что я уже создал макет плагина mootools для всплывающей подсказки (если у вас есть предложения по поводу некоторых настраиваемых плагинов для всплывающей подсказки для mootools, пожалуйста, дайте мне знать :))

Мне просто нужен совет / предложение о том, каким образом следовать, чтобы реализовать эту продвинутую систему «подсказок», или если у вас есть лучшие решения, чтобы предложить мне. :)

Спасибо всем

---

p.s. Я разрабатываю веб-приложение, используя rails3 (и haml, scss, compass) и mootools в качестве js-фреймворка (+ усы как шаблонная система).

Answer 1

Вы не можете выбрать один метод и выбрать его поверх другого, не покрывая сначала некоторые ваши бизнес-требования.

вопросы, которые вам нужно задать себе:

---

важно для SEO

если да:

• важно НЕ иметь содержание в теле, так как оно не релевантно или уникально, может повлиять на плотность ключевых слов и создать неправильное представление о реальном содержании страницы для Google, а затем AJAX
• важно, чтобы в теле было Google, чтобы увидеть, а затем сделать в скрытом элементе

У меня такое чувство, что вашему приложению не потребуется много этого, но это верный аргумент.

---

DOM и "важна производительность"

если да (вы уже используете canvas ... 100+ draggables ...)

• сколько (слишком много?) Узлов у вас будет с всплывающими подсказками (дополнительные узлы dom)? Очень много? пойти с делегацией ajax / event
• несколько всплывающих подсказок на странице: все еще можно предварительно отобразить ее, чтобы сохранить дополнительные запросы
• след добавления всех событий подсказки, делегат !
• задержка при ожидании XHR onComplete нежелательно? предварительно вынести!

---

Сеть / запросы

если вы идете по маршруту ajax, вам нужно найти способ минимизировать количество возможных запросов, особенно если одни и те же всплывающие подсказки могут вызываться снова и снова. это значит:

• кеширует результаты запроса локально на странице и сначала проверяет кеш, прежде чем запрашивать его с сервера
• если ваши данные не являются динамическими / в реальном времени, рассмотрите возможность даже отправки в localStorage с некоторым идентификатором key / db, это переживет перезагрузку страницы, переход и возврат посетителей.

Что касается практических рекомендаций, я знаю, что вы вполне способны сделать настоящий код, так что удачи:)

из моего опыта я делаю смесь обоих. информация о запасах, которая часто меняется, но не так часто, кэшируется для каждой загрузки страницы. информация об использовании / размере, помощники по формам и т. д., которые не меняются, вместо этого я кеширую в localStorage. всплывающие подсказки, которые имеют очевидную ценность для SEO, находятся в теле.