11 помилок під час роботи з JavaScript
Освойте безкоштовно найпростіший, швидкий і гнучкий спосіб створювати адаптивні веб-сайти.
Дизайн лендінгу
Створюйте дизайн будь-яких сайтів - для себе та на замовлення!
Популярне
Reg.ru: домени та хостинг
Найбільший реєстратор та хостинг-провайдер в Укаини.
Понад 2 мільйони доменних імен на обслуговуванні.
Понад 700 тис. клієнтів у всьому світі вже зробили свій вибір.
Безкоштовний Курс "Практика HTML5 та CSS3"
з основ адаптивної верстки
на HTML5 та CSS3 з повного нуля.
Фреймворк Bootstrap: швидка адаптивна верстка
Навчіться верстати просто, швидко та якісно, використовуючи потужний та практичний інструмент.
Верстайте на замовлення та отримуйте гроші.
Що потрібно знати для створення PHP-сайтів?
Відповідь тут. Тільки найважливіше і корисне для веб-розробника-початківця.
Дізнайтеся, як створювати якісні сайти на PHP всього за 2 години та 27 хвилин!
Створіть свій сайт за 3 години та 30 хвилин.
Вам залишиться лише наповнити його потрібною інформацією та змінити дизайн (за бажанням).
Вивчіть основи HTML та CSS менш ніж за 4 години.
Ви зможете створити свої перші HTML-сторінки та надати їм потрібний вигляд за допомогою CSS.
Безкоштовний курс "Сайт на WordPress"
Бажаєте освоїти CMS WordPress?
Отримайте уроки з дизайну та верстки сайту на WordPress.
Навчіться працювати з темами та нарізати макет.
*Наведіть курсор миші, щоб призупинити прокручування.
Ви впевнені, що не захоплюєтеся поганими практиками? Сьогодні ми поговоримо про низку помилок, яких ви, можливо, припускаєте при роботі з ним.
Помилка № 1 - Ви використовуєте глобальні змінні
Глобальнізмінні - це змінні, доступні в будь-якій частині вашого сценарію, навіть у різних файлах, що підвантажуються цією сторінкою. Звучить здорово, чи не так? Будь-яка змінна, яку ви не захотіли б змінити, завжди під рукою.
Насправді ні.
Ця ідея погана тим, що ви можете ненавмисно переписати вміст ваших змінних.
Тепер припустимо, що ви також використовуєте код, знайдений у мережі, для виведення будь-яких повідомлень з твіттера або хочете зробити невелику фотогалерею для ваших продуктів. Згадані скрипти можуть мати фрагмент коду, на кшталт:
Тепер у вас є неприємності: дві важливі змінні були перезаписані, а ви навіть можете не здогадуватися про це.
Ваш код тепер працюватиме з невірними даними, а ви ризикуєте витратити купу часу та нервів, поки виявите помилку та усунете її.
Отже, що робити? Рішення – інкапсуляція, але є багато способів її реалізувати. Перш за все, ви можете написати весь код всередині анонімної функції, що самовикликається:
Таким чином, ніякий код ззовні функції не може отримати доступ до значення змінних всередині функції.
Такий код працює для домашнього використання, але не дуже підходить, якщо ви працюєте професійно або збираєтеся поширювати ваш код.
Наприклад, якщо ви хочете створити купівельний кошик, який могли б використовувати інші, було б добре використовувати модульний підхід:
Змінна tax доступна за межами функції, тому що оголошена без використання ключового слова var. Будьте уважні!
Помилка № 2 - Ви не використовуєте крапку з комою (;)
Звідси питання: навіщо витрачати час, якщо компілятор все одно зробить усе за нас?
Насправді, у деяких випадках ставититочку з комою просто необхідно, інакше ви отримаєте повідомлення про синтаксичну помилку. Ну а що робити з кінцями рядків?
Давайте подивимося на просту функцію:
Рішенням буде такий підхід:
Насправді, постановка точки з комою стає звичкою дуже швидко.
Цілком логічно також, що ви, будучи веб-розробником, працюєте і з іншими мовами (наприклад, з PHP), в яких точку з комою ставити потрібно обов'язково. То чи є сенс "перемикатися" з одного на інше, якщо можна писати код однаково різними мовами?
Помилка № 3 - Ви використовуєте ==
Що це означає?
Випробуйте такий код:
Працює саме так, як ви й очікували, так? Тепер спробуйте наступне:
Так, ви знову отримуєте слова Це вірно! у консолі. і так, це погано.
Справа в тому, що оператор подвійної рівності змінює значення, намагаючись зробити їх "більш схожими". В даному випадку він просто конвертує рядок "1" у число 1, що призводить до виконання рівності.
Рішення - використовувати потрійну рівність ===. Воно не здійснює перетворення типів там, де не просять, тому і значення, і тип залишаються саме такими, якими ви очікуєте їх побачити.
Очевидно, все те ж застосовно і до операторів != і !==.
Тепер просто для розваги подивіться на кілька неймовірних невідповідностей, які ви отримаєте, якщо використовуєте подвійну рівність:
Помилка № 4 - Ви використовуєте "об'єктні обгортки"
Насамперед, це просто супер незручно. Всі ці речі можна зробити куди меншою кількістю коду:
Однак, стривайте! Це не одне і те ж.
Це означає, що якщо перевірити тип для Number(10) або String("hello") за допомогою typeof, то ми отримаємо object - не те, що очікуємо. ДоКрім того, використання "об'єктних обгорток" може призвести до несподіваної поведінки програми, відмінної від її поведінки при роботі з примітивними значеннями.
Примітка: можливо, це зайве, але я хочу донести до новачків наступне: я не говорю, що вам не слід використовувати функцію-конструктор і ключове слово new (хоча деякі рекомендують саме це). Ця порада застосовується до примітивних типів даних: чисел, рядків; до масивів та порожніх об'єктів.
Помилка № 5 - Ви не перевіряєте властивості при використанні for-in
Всі ми знайомі з проходами масивом, проте ви, ймовірно, іноді захочете пройтися по черзі по властивостях об'єкта (Відступ: елементи в масиві - це просто пронумеровані властивості об'єкта).
Якщо ви робили це раніше, використовували цикл for-in:
Якщо ви виконаєте код вище, то отримаєте такий висновок:
Однак, браузери включатимуть властивості та методи, що йдуть вище в ланцюжку прототипів. У більшості випадків у вас не буде потреби бачити їх усі при перерахуванні властивостей.
Тому, щоб відфільтрувати властивості, що не належать до поточного об'єкта, вам слід використовувати метод hasOwnProperties:
У будь-якому випадку будьте уважні при використанні for-in, щоб уникнути небажаних результатів.
Помилка № 6 - Ви використовуєте with або eval
Почнемо з with. Дві головні причини не використовувати цю конструкцію:
- це справді сильно уповільнює роботу вашого скрипта; - не завжди очевидно, що ви робите.
Перший пункт пояснень не вимагає, тож переходимо до другого.
Коротко, як це працює: ви передаєте об'єкт оператору with, потім всередині блоку with ви можете отримувати доступ до властивостей об'єкта як змінних:
Але що жстанеться, якщо у нас є змінна з таким самим ім'ям, як і властивість об'єкта, до якого ми застосовуємо with?
У випадку, якщо існують змінна і властивість з тим самим ім'ям, буде використовуватися змінна.
Інший момент полягає в тому, що ви не можете додати властивість до об'єкта всередині конструкції with. Як можна бачити з прикладу нижче, задане для властивості job значення залишається порожнім при зверненні через об'єкт, проте сама змінна існує і зберігає значення Дизайнера.
А що ж щодо eval?
Якщо в цілому, ви можете передати рядок коду цієї функції, і він його виконає.
Звучить нешкідливо, швидше навіть тішить своїми можливостями, чи не так? У цьому й полягає основна проблема: це дуже потужна штука.
Насправді немає жодних причин використовувати цю функцію.
- Ви можете просто написати безпосередньо код; -evalуповільнює роботу скрипта, як іwith.
Таким чином, головною функцією eval є виконання коду, якого немає у вас "на руках". Скажімо, ви отримуєте його від сервера або безпосередньо від користувача.
Ви дійсно бажаєте дати відвідувачам вашого сайту повний контроль над своїм кодом? Сподіваюсь, що ні.
Також ця функція відкриває сайт для атак численних хакерів: використовуючи eval ви ніби кажете: "Я пішов, ключі під килимком." Якщо ви любите себе та своїх відвідувачів, не використовуйте її.
Помилка № 7 - Ви ігноруєте основу системи числення під час використання функції parseInt
Хм, що тут сталося? Хіба у другому рядку має бути не 43?
Насправді parseInt працює не тільки з десятковою системою числення, тому, коли функція "бачить" рядок, що починається з нуля, то вонавважає, що має справу з числом у восьмеричній системі числення.
Ось чому потрібно передавати цій функції другий параметр - необхідну систему числення:
Помилка № 8 - Ви не використовуєте фігурні дужки під час роботи з if і while
Йдеться про фігурні дужки для конструкційifіwhile. Вони необов'язкові, якщо у блоці коду лише один рядок:
Це чудово, тому що ви можете навіть розмістити все необхідне в один рядок:
Але це не дуже здорово з двох причин: перша - це може виглядати неочевидно.
Бачите, що я? Другий рядок не входить до умови if, проте виглядає все так, ніби він до нього відноситься. Дужки, зрозуміло, прояснять ситуацію.
Також, якщо вам раптом знадобиться додати додаткові рядки, то потрібно пам'ятати про те, що потрібно додати ще й фігурні дужки. Набагато простіше спантеличитися цим із самого початку. Тож зробіть це.
Помилка № 9 - Ви додаєте елементи в DOM поштучно
Проблема в тому, що додавання кожного нового елемента змушує браузер знову малювати всю сторінку цілком, тому якщо вам потрібно додати на сторінку купу елементів, то робити це поштучно - погана ідея:
Ось що слід зробити натомість: використовуйте фрагменти документа.
Фрагмент документа – це контейнер, який містить елементи DOM. Потім, замість того, щоб вставляти всі елементи поштучно, ви можете додати їх разом.
Фрагмент документа – це не вузол, і для нього немає відповідного візуального відображення у DOM. Це просто невидимий контейнер для низки DOM-елементів, який використовується як проміжний етап перед реальною модифікацією DOM. Отже, як можна вчинити:
Швидше, чіткіше, зрозуміліше – чому не полюбити?)
Небудьте одним із таких людей: навколо безліч добротних уроків і посібників, тому не шукайте собі виправдання. Якщо все, що ви знаєте - це jQuery (або Mootools, або ще щось), то ви ставите себе в незручне становище.
Помилка № 11 - Ви дотримуєтеся всіх правил
І, нарешті, фінальна помилка, яку ми розглянемо - це дотримання всіх правил. Так, і навіть деякі з тих правил, що були згадані вище в цій статті.
Але правда в тому, що якщо ви розумієте, чому не рекомендується робити те й те, це знання стає вашим помічником і ви вчитеся використовувати правильні інструменти в правильній ситуації.
Наприклад, всі відмовляють вас використовуватиeval, проте це єдиний інструмент, за допомогою якого ви можете обробити JSON-відповідь від сервера. Зрозуміло, що потрібно використовувати різні перевірки для забезпечення безпеки і т.д. Але суть залишається тією ж - вам не потрібно боятися "поганих практик", якщо у вас дійсно виникає потреба.
Зашореність, яка веде до скоєння цих помилок - та сама зашореність, що веде потім до нездатності правильно використовувати ці інструменти.
За матеріалами http://net.tutsplus.com Переклад: Дмитро Науменко