Ищете хороший способ отделить Javascript и HTML

Question

Я только начал работать с jquery, поэтому мне нужно убедиться, что я все хорошо. Я объясню, что я сейчас верю, пожалуйста, дайте мне свои мысли.

Сначала я думаю, что вывод html с сервера должен быть главным образом для тех, у кого нет js, или если есть ошибка браузера. Таким образом, страница будет работать для всех, кого я надеюсь.

Тогда я думаю, что jquery должен иметь скрытые данные и шаблоны, которые он использует для изменения страницы.

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

<div id="checkbox-template" class="templatedefinition" style="visibility:hidden"> 
<input type="checkbox"><label></label> 
</div> 

Это было бы идеально, но я думаю, что у меня есть сомнения. Еще одна идея заключается в использовании

$(document.createElement()) 

И после этого есть несколько вариантов обработки данных. Я пытался что-то простое, как это:

var fruits= new Array(
    // id - Label - info 
    new Array("orange","Orange","some info"), 
    new Array("apple","Apple","some info"), 
    new Array("banana","Banana","some info") 
    ); 

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

Answer 1

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

Сначала я думаю, что HTML выход с сервера должны быть в основном для тех, которые не имеют JS или если есть браузер ошибка. Таким образом, страница будет работать для всех, кого я надеюсь.

Вы говорите о «Progressive enhancement», который является стратегией увеличения «доступности» на вашем сайте. Для этого вы планируете и разрабатываете пользовательский интерфейс, который будет работать для людей, у которых нет Javascript, перед тем как вы добавите Javascript, чтобы улучшить этот опыт для тех, кто его активировал. Вы должны планировать в своем дизайне, какая функциональность «потеряна», когда Javascript недоступен. Упрощенно - хорошая «доступность» - это когда основная задача, например, «отправить форму», по-прежнему работает без Javascript.

Вы также спрашиваете, должны ли вы выводить скрытые элементы html, предназначенные только для «зачарованного Javascript опыта» в HTML, или если вы «сгенерируете» его на лету, используя Javascript. Это подводит нас к другому термину - «Unobtrusive JavaScript».

Одна школа мысли никогда не должна помещать любую вещь, предназначенную для использования только javascript на вашей странице html, и использовать Javascript для добавления этих вещей в DOM. Преимущество в том, что у вас будет более чистая, более легкая и портативная html-страница.

Другая школа мысли должна быть менее «пуристской» и более «практичной» - значит делать то, что наиболее эффективно. Не пишите лишние 100 строк кода Javascript и потратили дополнительные 2 часа, если вы можете просто добавить дополнительный код непосредственно на HTML-страницу и скрыть его с помощью css.

Я лично считаю, что в качестве программистов мы всегда должны учитывать ценность бизнеса при принятии этих решений.Задайте себе такие вещи, как «Сколько времени я должен был потратить на это?», «Я создаю веб-сайт для 5 или 5 миллионов пользователей?». В принципе, не используйте гранату, чтобы убить мышей;)