Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

24 установившиеся практики при написании кода JavaScript для начинающих разработчиков

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

В качестве продолжения "30 HTML and CSS Best Practices" на этой неделе мы рассмотрим JavaScript! После ознакомления со списком обязательно сообщите, какие у вас есть дополнения!


1. Используйте === вместо ==

В JavaScript используются два вида операторов равенства: === | !== и == | != . Рекомендуется всегда использовать первый набор при сравнении (* предотвращает ошибки приведения типов. Здесь и далее примеч. пер.).

«Если двое операндов имеют один и тот же тип и значение, то в результате использования === получаем true, а в результате использования !== – false.» – «JavaScript: The Good Parts» (* JavaScript. Сильные стороны).

Однако при работе с == и != у вас могут возникнуть ошибки (* приведения типов), если значения имеют различный тип данных. В этих случаях они попробуют преобразовать тип значений, что часто приводит к ошибкам.


2. Eval = зло

Для тех, кто не в курсе, функция "eval" предоставляет нам доступ к компилятору JavaScript. Собственно, с ее помощью мы можем выполнить код, переданный ей в виде строки.

В результате ее использования не только значительно понизится производительность вашего скрипта, но и возникнет огромный риск, связанный с нарушением секретности (информационной безопасности), поскольку при вызове eval переданной строке предоставляются значительные полномочия (* например, могут читаться и меняться  локальные переменные). Избегайте ее использования!


3. Не используйте сокращенные варианты инструкций

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

Однако, давайте рассмотрим этот:

Кто-то может решить, что код выше был бы эквивалентным следующему:

К сожалению, он бы ошибся. В действительности его эквивалент:

Как вы заметите, добавление отступа имитирует функциональную возможность фигурной скобки. Очевидно, что этот прием – ужасная практика, которую следует избегать во что бы то ни стало. Единственный случай, где стоило бы опускать фигурные скобки, – использование однострочников (* программа, эффект которой значительно больше, чем можно было бы предположить по её размеру), да и то, этот случай – очень спорный вопрос.

Всегда думайте наперед

Что если позднее вам необходимо будет добавить больше команд в эту управляющую инструкцию. Для этого вам необходимо было бы переписать этот блок кода. Вывод – будьте бдительны при опускании синтаксических знаков.


4. Воспользуйтесь JS Lint

JSLint – отладочная программа, написанная Дугласом  Крокфордом (Douglas Crockford). Просто вставьте код вашего скрипта, и она проверит его на наличие очевидных проблем и ошибок.

«JSLint принимает код JavaScript и сканирует его. При обнаружении проблем отладчик возвращает сообщение с ее описанием и приблизительным  расположением в коде. Проблема не обязательно является синтаксической  ошибкой, хотя в основном это так. JSLint выявляет проблемы, касающиеся как оформления кода, так и семантики программы. Отладчик не гарантирует, что ваша программа исправна. Благодаря ему у вас появляется еще одна пара глаз для обнаружения проблем в коде»
– документация по JSLint.

До запуска скрипта прогоните его через JSLint просто для того, чтобы удостовериться, что вы не допустили каких-либо глупых ошибок.



5. Размещайте ваш скрипт в конце страницы

Этот совет уже упоминался в предыдущей статье этой серии. Но поскольку это очень уместно и тут, то я повторюсь.

Place JS at bottom

Помните, что главная цель – сделать загрузку страницы максимально быстрой для пользователя. При загрузке скрипта браузер не может продолжить (* начать выполнение кода), пока не загружен весь файл. Поэтому пользователь должен будет ждать дольше, чтобы заметить какой-либо прогресс (* если скрипт размещается не в конце файла).

Если у вас имеются файлы JS, единственная цель которых – добавление какой-то функциональной возможности (например, после нажатия кнопки), то вперед, разместите эти файлы внизу, сразу перед закрывающим тегом body. Это безусловно относится к устоявшейся практике.

Более удачный вариант


6. Объявляйте переменные снаружи от цикла For

При выполнении длинных циклов «for» не создавайте дополнительной нагрузки на движок. Например:

Неудачный вариант

Обратите внимание, как нам необходимо определять длину массива при каждой итерации и как мы каждый раз обходим DOM (* объектная модель документа) для получения элемента с id "container" – очень неэффективно!

Более удачный вариант

Кто оставит в комментариях советы по улучшению вышеуказанного блока кода, получит бонусные баллы.


7. Наиболее быстрый способ создания строки

Не всегда обращайтесь к вашему  супер-пупер циклу "for", когда вам необходимо перебрать элементы массива или свойства объекта. Проявите креативность и найдите наиболее быстрое решение задачи за счет имеющихся средств.

Я не буду докучать вам эталонным тестированием (* [стандартная] тестовая программа или пакет для оценки (измерения и/или сравнения) различных аспектов производительности процессора, отдельных устройств, компьютера, системы или конкретного ПО); вам просто нужно будет мне поверить (или протестировать самостоятельно) – это безоговорочно наиболее быстрый метод!

Код с использованием нативных (* описанных в модели DOM и стандартах HTML) методов (вроде join()), независимо от того, что происходит за уровнем  абстракции (* соответствие уровня описания задачи её наиболее общему представлению - чем выше уровень абстракции , тем меньше усилий затрачивается на кодирование), выполняется намного быстрее, чем код с использованием какого-либо ненативного альтернативного варианта.
– James Padolsey (Джеймс  Падолси), james.padolsey.com


8. Уменьшите количество переменных в глобальной области видимости

«Уменьшая ваш след (* количество переменных) в глобальной области видимости до единственного имени, вы значительно снижаете шансы дурного взаимодействия с другими приложениями, виджетами или библиотеками.»
– Douglas Crockford.

Более удачный вариант

Обратите внимание на то, как мы «уменьшили наш след» до всего лишь одного шутливо названного объекта – "DudeNameSpace".


9. Комментируйте свой код

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


10. Применяйте Progressive Enhancement (* прогрессивное улучшение – предполагает, что веб-интерфейсы должны создаваться поэтапно, циклически, от простого к сложному. На каждом из этапов должен получаться законченный веб-интерфейс, который будет лучше, красивее и удобнее предыдущего; настаивает на важности содержания)

Всегда делайте версию для пользователей с отключенным JavaScript. Вам может показаться заманчивой мысль: «У большинства моих пользователей включен JavaScript, поэтому я не буду беспокоиться по этому поводу». Однако, это было бы огромной ошибкой.

Выделяли минутку, чтобы полюбоваться вашим замечательным слайдером при выключенном JavaScript? (Скачайте Web Developer Toolbar, чтобы это легко  проверить.) В результате этого ваш сайт может полностью поломаться. На практике возьмите себе за правило разрабатывать ваш сайт исходя из предположения, что JavaScript пользователя будет отключен. После, как реализовали базовый вариант, начинайте постепенно улучшать ваш макет!


11. Не передавайте строку в "SetInterval" или "SetTimeOut"

Рассмотрим следующий код:

Этот код не только неэффективен, но и ведет себя таким же образом, как и вела бы себя функция "eval". Никогда не передавайте строку в "SetInterval" или "SetTimeOut". Вместо этого передавайте имя функции.


12. Не используйте инструкцию "With"

На первый взгляд может показаться, что использование операторов "With" – неплохая идея. Их основное предназначение при этом – предоставить возможность использования сокращенной записи для доступа к глубоко вложенным объектам. Например:

--вместо--

К сожалению, после проведения некоторых тестов, было обнаружено, что эти инструкции «работают скверно при объявлении новых свойств/переменных» (* добавляются не к аргументу инструкции, а к окружающей функции, где они буду продолжать существовать и после выхода из инструкций, то есть при этом нарушаются области видимости (действия)). Взамен вам следует использовать var.


13. Используйте {} вместо New Object()

Имеется множество способов создания объектов в JavaScript. Вероятно, более традиционным способом является использование конструктора «new», например:

Однако, этот способ зарекомендовал себя как «плохую практику» без должных на то оснований. Вместо этого я вам рекомендую использовать более надежный способ создания объектов – при помощи литерала (* литеральная (символьная) константа).

Более удачный вариант

Обратите внимание, что если вы просто хотите создать пустой объект, использование {} решит проблему.

«За счет использования литералов объектов мы можем писать код, при помощи которого реализуется множество возможностей и в то же время написание которого интуитивно понятно разработчику. При этом нет необходимости в вызове конструктора напрямую или соблюдении верной последовательности передаваемых в функцию аргументов и т.д.» – dyn-web.com


14. Используйте [] вместо New Array()

То же справедливо и при создании нового массива.

Нормально

Более удачный вариант

«Обычная ошибка в программах на JavaScript – использование объекта там, где необходим массив, или массива, когда необходимо воспользоваться объектом. Правило простое: когда именами свойств являются небольшие последовательные числа, вам необходимо использовать массив. В ином случае – объект.» – Дуглас Крокфорд.


15. Имеется длинный список переменных? Уберите ключевое слово "Var" и используйте вместо него запятые.

Более удачный вариант

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


17. Всегда, всегда используйте точки с запятой (;)

Технически в большинстве браузеров опускание «;» сойдет вам с рук.

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

Более удачный вариант


18. Циклы "For in"

При переборе элементов объекта вы можете обнаружить, что также получите и методы объекта. Чтобы разрешить эту ситуацию, всегда оборачивайте свой код в инструкцию if, благодаря которой информация фильтруется (* hasOwnProperty гарантирует, что отбираются только свойства экземпляра).

Как указано в «JavaScript. Сильные стороны» (Дуглас Крокфорд).


19. Используйте функциональную возможность "Timer"  Firebug (*  отладчик web-приложений, используется как отдельное расширение для браузера Mozilla Firefox, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest; разработка Firebug в виде отдельного дополнения прекращена, а его функциональность вошла в основной состав Firefox DevTools) для оптимизации вашего кода

Вам необходим быстрый и простой способ определения времени выполнения операции? Воспользуйтесь функциональной возможностью "Timer" Firebug для регистрации результатов.


20. Читайте, читайте, читайте...

Несмотря на то что я являюсь большим поклонником блогов по веб-разработке (вроде этого!), ничто не заменит книгу, когда вы обедаете или перед сном. Всегда держите книгу по веб-разработке на своей  прикроватной тумбочке. Ниже перечислены мои любимые книги по разработке на JavaScript:

Читайте их... много раз. Я до сих пор перечитываю!


21. Функции-выражения немедленного вызова

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


22. Чистый код JavaScript всегда будет работать быстрее библиотеки

За счет использования библиотек JavaScript, вроде jQuery и Mootools, вы можете сэкономить кучу времени при написании кода – особенно при выполнения действий AJAX. Тем не менее, всегда помните, что при использовании библиотеки ваш код никогда не будет работать так быстро, как код на чистом JavaScript (если вы, конечно, пишите его корректно).

Метод "each" jQuery отлично подходит для организации  циклов, однако при использовании оператора "for" код всегда будет работать чуточку быстрее.


23. JSON.Parse от Крокфорда

Хотя в JavaScript 2 должен будет иметься встроенный парсер (* синтаксический анализатор), на момент написания статьи нам необходимо реализовывать наш собственный. Дуглас Крокфорд, создатель JSON (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript), уже создал парсер, который вы можете использовать. Его можно скачать здесь.

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


24. Уберите атрибут "language"

Много лет тому назад вполне можно было встретить атрибут "language" внутри тегов script.

Однако, уже давно с тех пор этот атрибут считается устаревшим, так что забудьте о нем.


На этом все, чуваки.

Что ж, вот вы и ознакомились с 24-мя важнейшими советами для начинающих разработчиков на JavaScript. Поделитесь и вашими краткими советами! Спасибо за проявленный интерес! Какую тему следует обсудить в третей части этой серии?

Подпишитесь на нас на Twitter или на NETTUTS RSS Feed, чтобы быть в курсе о новых руководствах и статьях по веб-разработке.

И обязательно ознакомьтесь с тысячами JavaScript items, доступных на Envato Market. Наверняка там найдется что-то полезное для вас при разработке на JavaScript.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.