Форматирование / ведение домашнего хозяйства на код сайтах - в основном JS

Question

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

Всем, как лучше всего запускать код при первой загрузке страницы. Я знаю о window.onload и т. Д., Но что я имею в виду, я должен просто положить все сюда?

Например; Я создал свои собственные элементы формы, такие как выпадающий список, переключатель и селектор вкладок, я хочу добавить функцию javascript для каждого из этих трех различных элементов (все они имеют имя класса, связанное с их элементом - т.е. switch имя класса 'switch_holder' и т.д ...

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

Я знаю, что это длинный пост, но кто-нибудь может дать ответ на эти проблемы: 1 - ведение кода при загрузке страницы 2 - добавить списки событий в элементы с именами классов в чистом JS (т.е. без библиотек)

спасибо большое! :)

Answer 1

Вам гораздо лучше не использовать onLoad, а вместо этого использовать способ JQuery для добавления метода, который требует вызова при загрузке документа:

Как запустить jQuery Fancybox при загрузке страницы?

Используя JQuery вместо того, чтобы помещать код непосредственно в свой атрибут onLoad, вы можете сохранить код для загрузки каждого элемента, специфичного для каждого всплывающего окна, с кодом этого всплывающего окна, а не в HTML-коде, который его использует.

    $(document).ready(function() {
        // put your onLoad statements here
    });

Answer 2

1 - ведение кода при загрузке страницы

Вы можете поместить тег script в самом конце страницы, непосредственно перед закрывающим тегом </body>.Вот где ребята из YUI предлагают тебе это поставить.Таким образом, он не замедляет загрузку страницы и имеет доступ ко всем элементам в DOM, которые предшествуют ей.Пара полезных ссылок:

• Лучшие практики YUI
• Google, когда DOM будет готов

2 - добавить списки событий в элементы с именами классов в чистом JS (т.е. без библиотек)

Большинство современных браузеров поддерживают document.getElementsByClassName.Для браузеров, которые этого не делают (например, более старые версии IE), вы можете найти несколько его реализаций JavaScript.

Фактическое дополнение потребует обработки версий IE, которые не поддерживают addEventListener.К счастью, это легко, потому что есть attachEvent.Просто используйте служебную функцию, чтобы определить, какая из них доступна, и использовать ее.

---

Не по теме : Вы сказали, что не хотите использовать библиотеку, но, честно говоря,если вы хотите создать что-то сложное и надеетесь запустить его в самых разных браузерах, я бы рекомендовал пересмотреть его.Вы можете использовать много тяжелой работы и исследований, используя такие библиотеки, как jQuery , Прототип , YUI , Closure или любой из нескольких других .Они не просто предоставляют удобные служебные функции.Хорошая библиотека также будет работать с известными ошибками браузера, о которых вы не узнаете, пока не столкнетесь с ними, потому что кто-то пытается использовать вашу страницу, и она не совсем работает должным образом.Использование широко используемой, часто обновляемой библиотеки - это не то, что вы не l3t c0d3r.Это просто означает, что вы решили сосредоточиться на собственных проблемах, а не диагностировать ошибки и несоответствия браузера.Я имею в виду ... знаете ли вы , что Safari неверно сообщит о выбранном по умолчанию свойстве option, если вы сначала не получите доступ к свойству selectedIndex родителя?Да, я тоже.