Оптимальный способ передачи системных значений в JavaScript

Question

Каков наиболее эффективный способ передачи идентификаторов объектов и категорий или других системных переменных, которые не должны быть представлены пользователю, с сервера в браузер?

Допустим, у меня есть список элементов, гдеЯ могу сделать что-то с каждым из них с помощью javascript, например, показать подсказку html или добавить в избранное с помощью ajax, или отобразить на карте.Где лучше всего сохранить этот всплывающую подсказку html, или идентификатор базы данных, или геопозицию?

Некоторые варианты, о которых я могу подумать:

• некоторый словарь в теге <script></script> для каждого элемента,
• микроформаты,
• встроенный xml,
• rel атрибуты,
• имена классов CSS с конкретной информацией, например, class="lat-12345 uid-45678",
• один <script></script> со словарем словарей отображения html ids со значениями системы в шаблоне,
• javascript, сгенерированный из базы данных и включенный через <script src="..."></script> со словарем словарей отображения html ids с значениями системыв шаблоне
• ajax запрашивает все случаи, когда мне нужно больше информации, чем просто id,
• обработчики событий с параметрами в тегах html, например onmouseover="tooltip(this, 123, 'Hello world!')".

PS Я предпочитаю ненавязчивые решения, а также важно время загрузки / выполнения.

Answer 1

Один метод, который вы можете использовать, это пользовательские атрибуты .Я думаю, что вы называете это микро-форматами , но я не совсем уверен, что это одно и то же, поэтому я написал описание ниже.

Задав этот вопрос раньше,Я в основном использую что-то вроде следующего:

<div data-pid="1234">
    <a href="#" class="add-to-favourites">
        <img src="addToFavourites.png" />
    </a>
</div>

$("a.add-to-favourites").click(function() {
    $.load("/Favourites/Add.php?prodID="+$(this).parent().attr("data-pid"));
});

Это должно делать именно то, что вы хотите сделать.Причина, по которой я поместил pid в div, а не тег a, заключается в том, что вы можете поместить всю остальную информацию о продукте в div с другими действиями, которые пользователь может предпринять, например, с отображениемвсплывающая подсказка при наведении курсора на data-description или отображение на карте с помощью data-geo-x и data-geo-y.Конечно, вы можете назвать их как угодно.

Поддержка / принятие

Это становится совершенно приемлемым способом сделать то, что вы хотите сделать.HTML 5 поддерживает это именно для того, чего вы пытаетесь достичь.

Так что он поддерживается HTML 5, но как насчет HTML 4?

Можетсделать HTML 4 недействительным, но мир движется к большему и лучшему.Старые браузеры (IE6 и более ранние версии, FF1 / 2, Opera 7/8/9) становятся все менее распространенными, поэтому это не должно быть проблемой.На самом деле он не будет ломаться старых браузеров - функциональность все равно будет работать.

Важное замечание о валидности

Убедитесь, что вы добавили data- наимя атрибута.Это сделает атрибут совершенно корректным в HTML 5.

Несколько дополнительных подсказок

В jQuery 1.5 я слышал ответ на мой вопрос , который вы можете просто указать attr("pid"), чтобы вернуть значение data-pid.Если дело обстоит именно так, тогда я буду осторожен при именовании второй части имени атрибута после имени фактического атрибута (например, вместо data-id используйте data-pid - особенно если указан атрибут idЯ не уверен, какой эффект это даст, если вы этого не сделаете, но лучше, во-первых, избежать проблемы, чем иметь проблемы с сайтом на более позднем этапе из-за этого.

Надеюсьэто то, что вы искали.

Answer 2

Я бы предпочел, чтобы один вызов AJAX с самого начала извлекал все нужные вам данные, чтобы в вашем скрипте был доступен простой объект JSON. Конечно, вы можете дополнить это дополнительными звонками, если вам понадобится дополнительная информация.

Если это нецелесообразно, то «жесткое кодирование» объекта JavaScript в теге <script>...</script> является следующим лучшим вариантом. Конечно, «жесткое кодирование» с точки зрения браузера. Фактическое содержание наверняка будет записано серверным скриптом из вашей базы данных.

Answer 3

Возможно, я что-то упускаю ... почему не просто JSON?

То, как вы «отправляете» его (либо при начальной загрузке страницы в виде «javascript», либо через AJAX или еще много чего), на самом деле является лишь тривиальной деталью, определяемой в основном тем, когда доступны данные. (JSON является подмножеством допустимого синтаксиса JavaScript.)

Тогда это просто вопрос правильного преобразования. Конечно, передав это в JSON / JS, вы можете сделать некоторые не-JS-клиенты не совместимыми, если это для вас важно. Если это действительно так, то почему бы просто не выполнить хорошо преобразование на стороне сервера, какое-нибудь количество методов, которые вы ставите на вершине?

Вы также можете использовать произвольные атрибуты в HTML (спецификация HTML5 может включать в себя «data- *», который формально легализован) - хотя технически «неправильно», все основные веб-браузеры будут принимать неизвестные атрибуты, к которым можно получить доступ через DOM API.

Answer 4

Я бы реализовал одноэлементный Javascript AppCacheManager, который инициализируется в событии document.ready. Немного JS упс, и у вас есть полноценное хранилище данных ООП.

Всякий раз, когда требуется информация, вы загружаете ее через Ajax / RESTful Webservice и кэшируете в AppCache Manager. Таким образом, у вас есть 2 кэша: 1. Кэш браузера, возможно из-за кэширования URL веб-сервиса RESTful, и 2: JS Cache Manager.

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

короче:

• написать JS CacheManager
• не извлекать все данные сразу, а небольшими частями, когда это необходимо, и кэшировать их
• определить удобный интерфейс для кеш-менеджера

Пример использования:

<a href="linkurl" onmouseover="CacheManagerFactory.getInstance().getTooltip('TooltipID');">linktext</a>

Ненавязчивость - очень сложная вещь в JS, и я бы тоже хотел кое-что узнать об этом.

надеюсь, что помогло.

Answer 5

ASP.NET предлагает очень удобный способ сделать это.Вы можете просто написать объект JavaScript.Я уверен, что другие движки предлагают аналогичные способы сделать это.

var person = {
    Name : <%= _person.Name %>,
    Age : <%= _person.Age %>
};