Зміст
- 01. Кодекс
- 02. Документ
- 03. Проаналізуйте
- 04. Тест
- 05. Виміряй
- 06. Автоматизувати
- 07. Обробляти винятки
- Кроки до успіху
Скрінкаст, створений Tuts + Premium спільно з журналом net та Creative Bloq.
З покращенням продуктивності браузера, поряд із постійним впровадженням нових API HTML5, обсяг JavaScript в Інтернеті зростає. І все-таки один погано написаний рядок коду може зламати весь веб-сайт, розчарувавши користувачів і відігнавши потенційних клієнтів.
Розробники повинні використовувати всі наявні в їх розпорядженні інструменти та методи, щоб поліпшити якість свого коду, щоб бути впевненими, що йому можна довіряти виконання передбачуваного кожного разу. Це тема, яка мені лежить на душі, і я багато років працював над пошуком набору кроків, яких слід дотримуватися під час розробки, щоб забезпечити випуск лише найякіснішого коду.
Виконайте ці сім кроків, щоб значно покращити якість своїх проектів на JavaScript. За допомогою цього робочого циклу буде менше помилок, і будь-які, які це роблять, будуть оброблятися витончено, залишаючи користувачам можливість переглядати сторінки без розладів.
01. Кодекс
Почніть із виклику строгого режиму ECMAScript 5 у своїх функціях із використанням строгого твердження та використовуйте шаблон дизайну модуля, мінімізуючи використання глобальних змінних, виділяючи окремі модулі коду в рамках самозапущених функцій закриття, передаючи будь-які зовнішні залежності для збереження модулі чіткі та стислі. Використовуйте лише усталені та добре перевірені сторонні бібліотеки та фреймворки, а ваші функції мають бути невеликими, відокремлюючи будь-яку бізнес-логіку або дані від маніпуляцій DOM та іншого коду рівня перегляду.
Більші проекти з декількома розробниками повинні дотримуватися встановленого набору правил кодування, таких як керівництво Google по стилю JavaScript, і їм будуть потрібні більш суворі правила управління кодом, включаючи більш суворе управління залежностями за допомогою визначення асинхронного модуля (AMD) через бібліотеку, таку як RequireJS, управління пакетами використання Bower або Jam для посилання на конкретні версії файлів ваших залежностей, а також використання структурних шаблонів дизайну, таких як шаблон Observer, для полегшення вільно пов'язаного зв'язку між різними модулями коду. Також є розумною ідеєю використовувати систему сховищ коду, таку як Git або Subversion, за допомогою таких служб, як GitHub або Beanstalk, щоб зберегти резервну копію коду в хмарі, забезпечити можливість повернення до попередніх версій, а для більш просунутих проектів - створити гілки коду для реалізації різних функцій перед їх об’єднанням разом після завершення.
02. Документ
Використовуйте формат структурованого блочного коментаря, такий як YUIDoc або JSDoc, для документування функцій, щоб будь-який розробник міг зрозуміти його призначення без необхідності вивчати його код, зменшуючи непорозуміння. Використовуйте синтаксис Markdown для більш багатих коментарів та описів у довгій формі. Використовуйте пов’язані інструменти командного рядка для автоматичного створення веб-сайту з документацією на основі цих структурованих коментарів, який в курсі будь-яких змін, внесених у ваш код.
03. Проаналізуйте
Регулярно запускайте засіб статичного аналізу коду, такий як JSHint або JSLint, проти свого коду. Вони перевіряють наявність відомих помилок кодування та потенційних помилок, таких як забуття використовувати суворий режим або посилання на незадекларовані змінні, а також виявляють відсутні дужки або крапки з комою. Виправте будь-які проблеми, які зазначає інструмент, щоб покращити якість коду. Спробуйте встановити параметри за замовчуванням для вашої команди проектів для забезпечення стандартів кодування, таких як кількість пробілів, за допомогою яких можна робити відступи кожного рядка, де розміщувати фігурні дужки та використання одинарних або подвійних лапок у файлах коду.
04. Тест
Модульний тест - це невелика автономна функція, яка виконує одну з функцій з вашої основної кодової бази з певними входами, щоб підтвердити, що вона виводить очікуване значення. Щоб покращити вашу впевненість у тому, що код буде поводитися належним чином, напишіть модульні тести, використовуючи фреймворк, такий як Jasmine або QUnit для кожної з ваших функцій, використовуючи як очікувані, так і несподівані вхідні параметри. І не забувайте про ці крайні випадки!
Запустіть ці тести в декількох браузерах в декількох операційних системах, скориставшись такими послугами, як BrowserStack або Sauce Labs, які дозволяють крутити віртуальні машини в хмарі на вимогу для тестування. Обидві служби надають API, що дозволяє запускати ваші модульні тести автоматично в кількох браузерах одночасно, а результати надсилаються вам у міру завершення. Як бонус, якщо ваш код зберігається в GitHub, ви можете скористатися BrowserSwarm - інструментом, який автоматично запускає ваші модульні тести, коли ви вводите код.
05. Виміряй
Інструменти охоплення коду, такі як Стамбул, вимірюють, які рядки коду виконуються, коли ваші модульні тести виконуються проти ваших функцій, повідомляючи це як відсоток від загальної кількості рядків коду. Запустіть інструмент покриття коду проти ваших модульних тестів і додайте додаткові тести, щоб збільшити свій бал охоплення до 100 відсотків, надаючи вам більшої впевненості у своєму коді.
Складність функції можна виміряти, використовуючи міри складності Халстеда: рівняння, розроблені комп'ютерним вченим Морісом Халстедом у 1970-х роках, які кількісно визначають складність функції відповідно до кількості петель, гілок та викликів функції, які вона містить. Коли цей показник складності зменшується, тим легше стає зрозуміти та підтримувати функцію, зменшуючи ймовірність помилок. Інструмент командного рядка Платон вимірює та генерує візуалізацію складності коду JavaScript, допомагаючи ідентифікувати функції, які можна вдосконалити, зберігаючи попередні результати, дозволяючи відстежувати прогрес якості з часом.
06. Автоматизувати
Використовуйте програму запуску завдань, таку як Grunt, для автоматизації процесів документування, аналізу, тестування, висвітлення та складання звітів про складність, заощаджуючи час та зусилля та збільшуючи шанс вирішити будь-які проблеми, що виникають. Більшість інструментів та тестових платформ, висвітлених у цій статті, пов’язані із завданнями Grunt, які допоможуть вам покращити робочий процес та якість коду без необхідності підняти палець.
07. Обробляти винятки
Незмінно, в якийсь момент при запуску ваш код видасть помилку. Використовуйте оператори try… catch, щоб витончено обробляти помилки під час виконання та обмежувати вплив на поведінку вашого сайту. Використовуйте веб-службу для реєстрації виявлених помилок під час виконання. Використовуйте цю інформацію, щоб додати нові модульні тести, щоб покращити свій код і викорінити ці помилки по черзі.
Кроки до успіху
Ці сім кроків допомогли мені створити деякі коди, якими я пишаюся на сьогоднішній день. Вони також є чудовою основою для майбутнього. Пообіцяйтеся використовувати ці кроки у своїх власних проектах для створення високоякісного коду JavaScript, і давайте працюватимемо над покращенням Інтернету, крок за кроком.
Слова: Ден Оделл
Ця стаття спочатку з’явилась у випуску 249 журналу net.
