Лучший способ написать Javascript / jQuery - PullRequest
5 голосов
/ 29 января 2012

Я не новичок в веб-разработке, но мне просто интересно, есть ли у вас, ребята, какой-нибудь совет для меня улучшить:

Всегда, когда я пишу js или jQuery, я пишу весь код, подобный этому, в <head> на моей странице:

<script>
$(document).ready(function() {

   //All my functions and animations goes here…

});
</script>

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

Как это работает? В чем преимущество создания классов и их функций в отдельном файле?

Спасибо, VG

Ответы [ 5 ]

6 голосов
/ 29 января 2012

Преимущества размещения вашего javascript в отдельном файле:

  1. Повторное использование на нескольких страницах - Вы можете легко повторно использовать одни и те же функции javascript на нескольких страницах, не имея нескольких отдельных копийкода.
  2. Более эффективное кэширование - Браузер может намного эффективнее кэшировать ваш JavaScript, что может привести к более быстрому времени загрузки страницы.При использовании внешнего файла JS его можно загрузить при первом использовании, а затем извлечь из кэша браузера для всех последующих загрузок страницы, которые используют тот же файл JS.
  3. Отделение кода от HTML - Вы получаете лучшее разделение различных типов контента на странице.Визуальный дизайнер может работать с HTML, в то время как разработчик программного обеспечения может работать с JavaScript, и они не работают в одном и том же файле.

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

Структурирование кода в классы / объекты может иметь следующие преимущества:

  1. Организация - Это вынуждает разработчика организовывать свой код в функциональные блоки, где у вас естьобъект с заданным набором методов и свойств.Для чего угодно, кроме тривиального проекта, это гораздо более чистый способ или организация вещей, чем просто большой список функций javascript.
  2. Инкапсуляция - Объектно-ориентированный дизайн заставляет вас помещать данные в объектыгде гораздо яснее, кто владеет данными, кто изменяет данные, каков их срок действия и какие существуют методы для изменения данных.Кроме того, некоторые данные могут быть инкапсулированы внутри объекта, поэтому их можно изменять только с помощью требуемых методов (без непосредственного изменения).
  3. Тестирование - гораздо проще написать тесткомплекты для кода, организованного в объекты, методы и свойства.
  4. Самодокументируемый - Код, организованный в объекты, методы и свойства, обычно гораздо более самодокументируемый, чем длинный список процедур.
  5. Модульность - Обычно проще разбить объектно-ориентированный код на модули многократного использования, чем код, который не организован таким образом.
  6. Расширяемость - Хорошийобъектно-ориентированное проектирование может быть гораздо проще расширять и улучшать с помощью таких вещей, как подклассификация и переопределение методов, чем прямой процедурный код.
  7. ремонтопригодность - по всем вышеуказанным причинам хороший объектно-ориентированный код можетпроще в обслуживании.

К вашему сведению, многие преимущества объектно-ориентированного мышления и дизайна могутбыть найденным без использования литеральных классов (которых на самом деле нет в javascript).Это больше зависит от того, как вы разрабатываете и реализуете свой код, чем от конкретной синтаксической функции языка.Например, у вас может быть объектно-ориентированный дизайн в простом C, который не имеет определенной языковой концепции класса или объекта.В javascript многие языковые элементы являются объектами с расширяемыми свойствами и методами, поэтому еще проще реализовать объектно-ориентированное проектирование в javascript (на самом деле это трудно избежать), потому что вокруг вас уже есть объекты (объект окна, всеОбъекты DOM и т. Д ...).

4 голосов
/ 29 января 2012

Преимущество размещения вашего кода javascript в отдельных файлах заключается в том, что вы больше не смешиваете разметку (которая и есть HTML) и сценарии. У вас есть четкое разделение проблем. То же самое относится к CSS. Стиль укладывается в отдельные файлы. В результате ваша разметка становится меньше. Поскольку JavaScript является статическим, клиентские браузеры кэшируют все эти внешние статические файлы. Поэтому им не нужно извлекать его каждый раз, когда делается запрос. Это повышает производительность ваших приложений, потому что по сети меньше данных для отправки. С сервера извлекается только разметка, которая изменяется от страницы к странице.

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

1 голос
/ 29 января 2012

Разделение ваших классов и того, что не на отдельные файлы, делает их более удобными в обслуживании и более пригодными для использования в других проектах.Это просто помогает организовать вещи.

Осторожно, хотя ... вы не хотите иметь тонну файлов, которые клиент должен загрузить!Часто на стороне сервера будет запущено что-то, что соберет все нужные файлы в одну загрузку.PHP может сделать это для вас легко.

0 голосов
/ 29 января 2012

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

0 голосов
/ 29 января 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...