Javascript: правильный способ отделить метаданные от HTML?

Question

Как правильно отделить мои метаданные от HTML? Поскольку мои проекты становятся все больше и больше, связывание метаданных с HTML становится все более и более грязным. Есть хорошие альтернативы?

Метаданные : Все, что JS должен знать об элементе HTML, который не кодируется напрямую в элементах HTML и их атрибутах. Например. геолокация, включено, отключено действие.

Пример: скажем, у меня есть список мест, которые я хочу отображать на карте всякий раз, когда я нажимаю на одно из них. Как мне идентифицировать то же самое место в JS, чтобы я мог сказать карте «эй, двигайтесь в это место»? Самый простой способ, который в конце концов становится беспорядочным, - это связать его с HTML, скажем, это будет геолокация. Это легко, но это запах кода. Как мне сделать это правильно? .data () в jQuery также становится ужасно поддерживать вскоре после этого.

Заключение : все, я собираюсь найти / написать хороший MVC для JS.

Answer 1

Если вы хотите присоединить метаданные к элементам DOM, используйте HTML5 data- атрибуты или и используйте метод jQuery .data () , чтобы сделать это программно.

Вот пример из реального мира, который я только использовал, который действительно помог. Я отправил запрос на сервер для загрузки файла и получил ответ JSON с именем файла, типом содержимого, размером и GUID. В ответ я хочу добавить элемент списка, чтобы показать файл, но я хочу сохранить данные JSON. Вот как я это сделал в обратном вызове :

function(response) {
  $('<li>').text(response.fileName).data('metadata', response).appendTo('ul');
}

Что хорошего в этом, так это то, что элемент списка имеет все мои метаданные, прикрепленные к нему.

Так что я мог бы сделать что-то вроде этого и знать все об этом:

var metadata = $('ul li:eq(1)').data('metadata');

alert(metadata.contentType);
alert(metadata.size);

//etc..

Реализации действительно безграничны.

ТАКЖЕ, начиная с jQuery 1.4.3 .data () автоматически подберет атрибуты данных в вашем HTML. Таким образом, к <div data-foo="bar"></div> можно получить немедленный доступ в коде, используя $('div').data('foo') //bar

Answer 2

Зависит от того, какие метаданные. Если это действительно связано с вашими элементами HTML, это хорошее место для этого. Я могу придумать несколько идей:

Поместите только основные ключи в ваши HTML-элементы и запросите их у сервера (верните его в формате JSON). Это кажется плохим дизайном, потому что сервер должен запоминать / пересобирать состояние каждый раз, когда клиенту нужны метаданные. Чем больше состояния / работы вы можете передать клиенту, тем более масштабируемым будет ваш дизайн.

Передайте обратно объекты javascript с вашим HTML-кодом в неисполняемом теге сценария (как если бы вы использовали шаблоны на стороне клиента).

Хранить в локальном хранилище (база данных на стороне клиента для HTML 5)