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

Question

Я с трудом выбирал ненавязчивый javascript вместо определения его в синтаксисе html. Я хочу убедить себя пойти по ненавязчивому пути, но у меня проблемы с преодолением проблем, перечисленных ниже. Не могли бы вы помочь убедить меня:)

1) Когда вы ненавязчиво связываете события, на клиентской машине появляются дополнительные издержки для поиска этого html-элемента, где, как и в случае, когда вы что-то делаете, вам не нужно повторять DOM.

2) Существует задержка между тем, когда события связаны с использованием document.ready () (jquery), и тем, когда страница загружается. Это более очевидно на очень больших сайтах.

3) Если вы ненавязчиво связываете события (onclick и т. Д.), Вы не сможете посмотреть html-код и узнать, что событие связано с определенным классом или идентификатором. Это может стать проблемой при обновлении разметки и не осознавая, что вы можете воздействовать на код JavaScript. Существует ли соглашение об именах при определении элементов CSS, которые используются для привязки событий javascript (я видел, что ppl использует js_className)

4) Для сайта существуют разные фрагменты javascript для разных страниц. Например, Header.html содержит навигацию, которая запускает события javascript на всех страницах, а homepage.html и searchPage.html содержат элементы, запускающие JavaScript на соответствующих страницах

Пример кода sudo:

header.html

<script src="../myJS.js"></script>
<div>Header</div>
<ul>
<li>nav1</li><li>nav2</li>
</ul>

homepage.html

<@include header.html>
<div class="homepageDiv">some stuff</div>

searchpage.html

<@include header.html>
<div class="searchpageDiv">some other stuff</div>

myJS.js

$(document).ready(function(){
$("ul.li").bind("click",doSomething());
$(".homePageDiv").bind("click",doSomethingElse());
$(".searchPageDiv").bind("click",doSomethingSearchy());
});

В этом случае, когда вы находитесь на searchPage, он все равно будет пытаться найти «homepageDiv», который не существует и завершается ошибкой. Это не повлияет на функциональность, но это дополнительный ненужный обход. Я мог бы разбить это на отдельные файлы javascript, но тогда браузер должен загрузить несколько файлов, и я не могу просто обслуживать один файл и кэшировать его для всех страниц.

Каков наилучший способ использовать ненавязчивый javascript, чтобы я мог легко поддерживать (довольно много скриптов) веб-сайт, чтобы другой разработчик знал, что скрипты связаны с элементами html, когда они модифицируют мой код. И обслуживать код так, чтобы браузер клиента не искал элементы, которые не существуют на определенной странице (но могут существовать на других).

Спасибо!

Answer 1

То, что jQuery.ready() выполняется, не означает, что страница видна конечному пользователю.Это поведение, определяемое браузерами, и в настоящее время есть два события, которые следует учитывать здесь, поскольку mootools выражает это DomReady против Load.Когда jQuery выполняет метод ready, он говорит о загрузке dom, однако это не означает, что страница готова для просмотра пользователем, внешние элементы, которые, как изображения, и даже таблицы стилей и т. Д., Все еще могут загружаться.

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

Как найти привязку к элементам в вашей DOM.Вы действительно просто боитесь, что все потеряно.Это на самом деле не было моим реальным опытом, чаще всего в вашем JS вы можете проверить, на какой странице вы находитесь, и добавить только javascript для этой страницы (как упомянул Aadit выше).После этого операция быстрого поиска в вашем редакторе должна помочь вам найти что-либо, если что-то потеряно.

Имейте в виду, что при истинном MVC функциональность должна быть отделена от уровня представления.Это именно то, о чем OO javascript или ненавязчивый javascript.Вы должны быть в состоянии изменить DOM, не нарушая функциональность страницы.Да, если вы измените класс css и / или идентификатор элемента, с которым вы связываете, ваш JS сломается, однако пользователь не будет об этом знать, и страница, по крайней мере, будет работать.Однако, если это большая проблема, вы можете использовать OO-Javascript и поставить div или span в качестве заполнителей в вашем dom и использовать их в качестве маркеров для вставки функциональности или сказать, что она существует, вы можете даже использоватьHTML комментарии.Тем не менее, по моему опыту, вы знаете поведение своего сайта и, следовательно, всегда будете знать, что там есть какой-то JS.

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

• $("a#myLink") - самый медленный.

• $("a.myLink") - быстрее.

• $("#Link") - самый быстрый.

• $(".myLink") - самый быстрый.

В ссылке ниже вы можете увидеть, что до 34 тысяч операций в секундувыполняются, поэтому я сомневаюсь, что скорость - это проблема.

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

В заключение:

a) Не беспокойтесь о потере js-кода, всегда есть ctrl+f

b) Нет задержки, потому что dom ready не означает, что страница видна с начала.

Обновление Фиксированный порядок скорости в операциях, основанный на результатах испытаний здесь Однако имейте в виду, что производительность IE <8 действительно имеют место, если вы не указали контейнер (раньше это было правилом, теперь, похоже, это исключение из правила). </p>

Answer 2

Вы в замешательстве. Ненавязчивый JavaScript - это не просто определение обработчиков событий в программе. Это набор правил для написания JavaScript, который не влияет на функциональность другого JavaScript на той же странице. JavaScript это динамический язык. Любой может внести изменения во что угодно. Таким образом, если два отдельных сценария на одной и той же странице определяют глобальную переменную add следующим образом, последний из них определит ее win и повлияет на функциональность первого сценария.

// script 1
var add = function (a, b) {
    return a + b;
};

// script 2
add = 5;

//script 1 again
add(2, 3); // error - add is a number, not a function

Теперь, чтобы ответить на ваш вопрос напрямую:

1. Дополнительные затраты на поиск элемента в JavaScript и присоединение слушателя событий к нему невелики. Вы можете использовать новый метод DOM document.querySelector, чтобы быстро найти элемент и присоединить к нему прослушиватель событий (поиск элемента занимает менее 1 мс).
2. Если вы хотите быстро присоединить слушателей событий, не делайте этого, когда загружается содержимое вашего документа. Прикрепите прослушиватели событий в конце раздела тела или сразу после той части кода HTML, к которой вы хотите присоединить прослушиватель событий.
3. Я не понимаю, как изменение разметки может каким-либо образом повлиять на JavaScript. Если вы попытаетесь присоединить слушатель события к элементу, который не существует в JavaScript, он молча завершится ошибкой или выдаст исключение. В любом случае, это действительно не повлияет на функциональность остальной части страницы. Кроме того, HTML-дизайнеру действительно не нужно знать о событиях, к которым прикреплен какой-либо элемент. HTML должен использоваться только для семантической разметки; CSS используется для стилизации; и JavaScript используется для поведения. Не путайте три.
4. Бог дал нам свободную волю. Используй это. JavaScript поддерживает условное выполнение. Есть if заявлений. Посмотрите, существует ли homePageDiv, и только потом присоедините к нему прослушиватель событий.

Попробуйте:

$(document).ready(function () {
    $("ul.li").bind("click",doSomething());
    if (document.querySelector(".homePageDiv")) {
        $(".homePageDiv").bind("click",doSomethingElse());
    } else {
        $(".searchPageDiv").bind("click",doSomethingSearchy());
    }
});

Ваш вопрос имеет мало общего с ненавязчивым JavaScript. Это показало отсутствие исследований и понимания. Таким образом, я голосую за это. К сожалению.