7 Пунктів javascript, які полегшать життя новачкам

коротка запис

Але те ж саме можна зробити і так:

Виходить коротше і не потрібно повторювати ім'я об'єкта. У прикладі car дуже коротку назву, а якщо ви використовуєте invalidUserInSession. Потрібно пам'ятати про ляп такого запису в IE. Ніколи не залишайте замикає коми перед закриття фігурної дужки, інакше у вас виникнуть проблеми.

Для масивів теж є короткий запис. Так, прихильники старої школи можуть оголошувати масив таким чином:

Але є більш короткий варіант:

Інший момент, який стосується масивів, полягає в тому, що немає такої сутності, як асоціативний масив. Можна знайти безліч прикладів, в яких вище наведений об'єкт car визначався б наступним чином:

"Асоціативний масив" - це плутати назву для об'єкта.

Ще одна коротка запис використовується для умов. Так замість наступного коду:

У разі, якщо умова буде мати значення true. виконається те, що стоїть після знака питання, а в іншому випадку виконається те, що стоїть після двокрапки.

JSON як формат даних

Наприклад, зробити опис рок групи можна так:

По суті, JSON є ймовірно найлегшим способом опису складних даних - і він працює в браузерах. Його можна використовувати навіть в PHP за допомогою функції json_decode ().

Для багатьох стає відкриттям, що математичні та рядкові функції JаvaScript можуть істотно полегшити життя. Їх можна використовувати для виключення циклів і умов. Наприклад, пошук найбільшого числа в масиві чисел може бути написаний з використанням циклу:

А можна домогтися того ж без використання циклу:

Зауважте, що функція sort () сортує масив лексично, тому для числового масиву потрібно використовувати поворотну функцію, щоб отримати правильний порядок чисел.

Інший цікавий метод - Math.max (). Він повертає найбільше число зі списку параметрів:

Так як метод перевіряє числові значення і повертає найбільший серед них, то його можна використовувати для визначення підтримки браузером різних властивостей:

Це приклад вирішення проблеми з Internet Explorer. Ви можете прочитати scrollTop для поточного документа, але в залежності від DOCTYPE документа ту чи іншу властивість отримає значення. При використанні Math.max () ви отримуєте правильне значення, так як інше буде undefined.

Інші потужні функції призначені для маніпуляції рядками - split () і join (). Ймовірно, що найкращим прикладом буде приєднання класу CSS до елементу.

Справа в тому, що коли ви додаєте клас до елементу DOM, то хочете або додати його як перший клас, або як додатковий клас з пропуском перед ним. Коли клас видаляється, то також потрібно видалити і пробіл (що стало дуже важливим останнім часом, так як деякі браузери не задіють класи, замикає пробілами).

Отже, оригінальна функція буде такою:

Можна автоматизувати операцію за допомогою методів split () і join ().

Таким чином автоматично класи розділяються пробілами і в кінці додається новий клас.

делегування подій

Події виконують роботу веб додатки. Вони дозволяють розширювати функціонал без порушення коду ядра програми. Основною проблемою є те, що події можуть пропадати: ви використовуєте перехоплювач події для певного елемента, він стає активним, але нічого не відбувається. Доводиться приймати даний факт, що браузери (такі як IE6) мають різного роду проблеми при роботі з пам'яттю і в них використовується занадто багато різних подій. Тому мудрим рішенням буде не використовувати багато обробників подій в документі.

В даному випадку добре підходить техніка делегування подій. Якщо подія відбувається для певного елемента і всіх інших елементів, які знаходяться вище нього в ієрархії DOM, ви можете спростити обробку події, використовуючи один обробник, а не кілька.

Але те ж саме можна зробити одним обробником події:

Так як подія відбувається на всіх елементах списку, все що вам потрібно - це порівняти nodeName з тим елементом, який реагує на подію.

Обмеження: обидва вище наведених прикладу призначені для роботи в браузерах і вони закінчаться помилкою в IE6. Для IE6 потрібно використовувати модель подій, відмінну від W3C. Тому для трюків використовуються бібліотеки.

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

Анонімні функції і шаблони модулів

Обхідним шляхом є инкапсулирование ваших змінних в анонімній функції і виклик даної функції після її визначення. Наприклад, в результаті наступного визначення вийде три глобальних змінних і дві глобальні функції:

Будь-який інший скрипт на сторінці, який має змінну з ім'ям status, може стати джерелом проблем. Якщо обернути все певні функції і змінні ім'ям, наприклад, myApplication. то подібні колізії будуть виключені:

Такий підхід нічого не змінює поза функцією. Якщо все що вам потрібно, ізоляція змінних, то ім'я функції можна опустити:

Це називається шаблоном модуля. Такий метод широко використовується в бібліотеці Yahoo UI. Використання іншого синтаксису для забезпечення доступу до змінних і функцій із зовнішнього світу може напружувати. До того ж доводиться використовувати попередня назва модуля (в нашому прикладі myApplication). Можна кілька вкоротити запис за допомогою повернення покажчиків на елементи, які треба зробити публічними. Таким чином можна використовувати більш короткі імена:

Забезпечення можливості конфігурації

Часто при використанні чужих скриптів їх доводиться модифікувати. Причина полягає в тому, що буває дуже складно щось налаштувати для своїх потреб і доводиться міняти код.

Щоб уникнути такої ситуації ви можете додати об'єкт конфігурації до своїх скриптів. Ось основна сутність даної дії:

• Зробіть об'єкт, який буде частиною скрипта, і назвіть його configuration.
• У ньому треба зберігати все, що інші люблять міняти, коли вони використовують чужі скрипти:
  • CSS ID і імена класів;
  • Рядки (такі як мітки) для генеруються кнопок;
  • Значення, наприклад, "кількість відображуваних зображень," "розмір карти";
  • Різні локальні установки.
• Об'єкт повинен мати властивість public. щоб інші могли його змінити.

Майже все вище описане виконується на завершальному етапі кодування.

Насправді ви даєте іншим можливість використовувати ваш код і легко змінювати його під свої потреби.

Інтерактивність для фонової обробки даних

Звичайно, можна отримати JSON-P від ​​веб сервісу в якості відповіді на запит і зробити конверсію даних на стороні клієнта. Але навіщо займатися цим якщо є сервер, який має в своєму розпорядженні значно більші можливості для конвертації даних і подальшого повернення їх як JSON або HTML, та ще до того ж і може кешувати їх для завантаження?

Якщо ви плануєте використовувати AJAX, вивчайте HTTP і створення власних кешуючих і конверсійних проксі. Таким чином ви заощадите багато часу і нервів в ході розробки проекту.

Спеціальний код для браузера - даремно витрачений час. Використовуйте бібліотеки!

Якщо подивитися на історію розвитку веб технологій, то можна відзначити велику кількість різних концепцій, які з'являлися і зникали. Деякі з них були хороші, інші не дуже. Але дуже багато з них були тісно прив'язані до якого-небудь браузеру. І розробники, які витрачали час на код, що підтримує останні віяння, в кінцевому підсумку виявлялися біля розбитого корита. Тому що технологія йшла з ринку, і разом з нею ставали непотрібними всі знання і досвід щодо її використання.

Звичайно, досвід з написання коду завжди залишається з вами, але може варто займатися більш продуктивними речами, які залишають після себе слід в історії?

Бібліотеки, наприклад, YUI, jQuery і Dojo, допомагають розробникам створювати крос-браузерні додатки. Вони беруть на себе проблеми браузерів: погану реалізацію функцій, невідповідність стандартам, помилки в коді. Крім того, бібліотеки допомагають позбутися від рутинних операцій.

Якщо ви не займаєтеся бета тестуванням браузера, так як є великим його фанатом, то не варто робити специфічні вставки коду для нього. Буде дуже прикро, коли їх доведеться видаляти.

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!