Advertisement
  1. Code
  2. JavaScript

24 усталені практики при написанні коду JavaScript для розробників-початківців

by
Read Time:12 minsLanguages:

Ukrainian (українська мова) 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 bottomPlace JS at bottomPlace 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;  розробку 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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.