Javascript Object: створення об'єктів і робота

Відвідування веб-ресурсу - це конкретний URI в адресному рядку браузера. Відвідувач вказує адресу сторінки, і вона розбирається браузером на елементи дерева DOM - Document Object Model. Будь-яке посилання на цій сторінці вказує браузеру розібрати іншу сторінку і побудувати інше дерево об'єктів. Браузер дозволяє відвідувачу повернутися назад або пройти вперед по ланцюжку сторінок, які вже були переглянуті в поточному сеансі роботи. Фактично дії користувача - це переміщення між системами об'єктів, утворених в процесі відвідування сторінок. Кожна сторінка - це власне дерево DOM і, крім того, jаvascript object's - це об'єкти синтаксису мови та описів.

DOM: завантаження, оновлення та зміна

Є три основних варіанти, які формують об'єкти сторінки веб-ресурсу, як на рівні DOM і самої мови jаvascript, виконав конструкції створення змінних, так і на підставі описів, зроблених розробником: завантаження - відвідувач прийшов на сторінку сайту; оновлення - відвідувач оновив сторінку (кнопка браузера або Ctrl-F5); зміна елемента сторінки, наприклад (AJAX, скрипт, подія, ). Всі три процеси кардинально різняться, але відрізняти особливості перших двох особливо важливо. Важко заборонити відвідувачу оновлювати сторінку - це невикорінна «згубна» звичка відвідувача, яку розробнику слід мати на увазі. Навігація по сторінці і за її межі повинна лежати виключно в функціоналі самої сторінки, а не в історії відвідувань браузера та функції його кнопок. Багато сайтів декларують це важлива вимога, але відвідувачі традиційно його порушують.


Зміна сторінки без перезавантаження на рівні окремого її елемента (наприклад, AJAX) - це звичайне рішення для динамічних сторінок. Як правило, це використовується для переходів по елементам сторінки, зміни її об'єктів, управління діалогом з відвідувачем.

Фундаментальні об'єкти jаvascript

jаvascript заснований на об'єктах. Практично всі змінні мови - це об'єкти. Розробник може формулювати власні опису об'єктів, використовуючи різноманітні варіанти синтаксису. Все, не є "рядком", "числом", true, false, null або undefined, є об'єктом. В рамках синтаксису мови цього можна не надавати значення, розуміючи під об'єктами тільки елементи DOM і власні опису jаvascript object's. Фундаментальне будова мови у більшості випадків для розробника не має істотного практичного значення. Наприклад, математичні функції представлені об'єктом Math. Це зручно в рамках концепції мови, але для розробника - це просто зручний синтаксис використання необхідного арсеналу математичних операцій. Важливо правильно працювати з DOM і коректно описувати власні об'єкти. Синтаксис jаvascript object function's і виразів для їх застосування - це форма запису логіки необхідного алгоритму.

Рядки, масиви і об'єкти

В основі всіх об'єктів jаvascript лежить правило: "властивість" = "значення" і поняття асоціативного масиву. У найпростішому випадку object jаvascript - це сукупність пар "властивість" = "значення". При цьому значення не завжди може бути числом, а властивість не завжди записано без лапок.
Не слід зловживати ім'ям властивостей. Ідеально, коли імена властивостей містять тільки символи латинського алфавіту, задовольняють вимогам до імен змінних і не є ключовими (у т. ч. зарезервованими словами мови. Ніякого впорядкування властивостей не передбачається, але при створення або ініціалізації асоціативного масиву знати, як розташовані його елементи, цілком допустимо. Використовувати цю обставину не рекомендується, але мати на увазі - можливо. Ініціалізувати масив властивостей означає одночасно: створення масиву; створення об'єкта. У конкретному контексті застосування можна розглядати jаvascript object - як асоціативний масив, а в іншому місці алгоритму - як об'єкт, призначати йому потрібні методи, змінювати значення його елементів. Оскільки імена властивостей і їх значення при створенні або зміні повинні задаватися у форматі рядків, рекомендується використовувати рядкову позначення та лапки.

Доступ до властивостей об'єкта

Отримати і змінити значення властивостей об'єкта можна конструкцією Object.keys: jаvascript формує масив всіх властивостей об'єкта. Коли об'єкти створюються динамічно, ця конструкція дуже зручна, оскільки автоматично формує список всіх наявних в об'єкті властивостей. В даному прикладі виконано опис двох масивів різним чином. У застосуванні обидва масиву еквівалентні, оскільки містять однойменні властивості та їх значення. У циклі перебираються всі властивості другого масиву і формується рядок всіх значень. Аналогічного ефекту можна досягти в точковій нотації або скобочной: x1_Obj . NameLast; x1_Obj ['NameFirst']. Обидві конструкції припустимі і дають потрібний результат. У наведеному прикладі при завданні масиву через фігурні дужки "{}" може бути допущена помилка у вигляді символу "," в кінці перерахування (зазначено в прикладі червоним кружечком). Браузери зазвичай ігнорують зайвий символ у перерахуванні, але краще цього не робити.

Видалення властивостей об'єкта

Оскільки об'єкт - це асоціативний масив, операція jаvascript object delete виконується на рівні поточного об'єкта (при спадкуванні - це має значення) і розглядається на колекції властивостей цього об'єкта. У контексті наведеного прикладу можна використовувати такі конструкції: delete x1_Obj . NameLast ; delete x2_Obj ['NameFirst']; Перша конструкція видаляє другий елемент першого об'єкта, друга конструкція - перший елемент другого об'єкта. Оператор видалення не працює на властивості прототипу і повертає результатом значення false, якщо властивість не може бути видалено.

Властивості та методи об'єктів

Синтаксис jаvascript object properties і functions (методи) аналогічний загальним канонами синтаксису і семантики мови. По суті, справа йде якраз навпаки. Властивості і методи об'єкта - це варіант опису інформації і допустимих з нею дій через об'єктно-орієнтовану парадигму jаvascript. У цьому прикладі описаний об'єкт x3_Obj, у якого є тільки дві властивості: item та pos. Потім був доданий метод wait() у вигляді функції. В результаті інтерпретацію цього опису в контексті значень властивостей, jаvascript object values зробить так, як показано у віконці результату, тобто помістить тіло функції (1) в якості значення. При прямому виклику властивості Hello() воно інтерпретується як метод (функція) і результатом (2) буде виконання коду цього методу.

Ключове слово this в об'єкті

Для орієнтації в просторі властивостей об'єкта розробник може використовувати ключове слово this і посилатися через нього на описані їм властивості для отримання або зміни їх значень. Це тільки початок опису об'єкта з тілом тільки конструктора. У цьому прикладі виконано опис об'єкта для роботи з куками. Об'єкт ініціалізується в момент завантаження сторінки конструкцією: var oCookie = new scCookies ( cOwnerCode ); oCookie . Init (); В даному прикладі cOwnerCode - унікальний код відвідувача. Якщо його немає, то в конструкторі об'єкта oCookie буде створено новий код. Неважливо, що мав на увазі під авторизацією відвідувача розробник даного об'єкта, важливо як ключове слово this тут використовується для опису методів об'єкта та їх виклику з інших методів об'єкта: this . GetCookie = function (cName) {}; this . SetCookie = function (cName, cValue) {}. Так описані методи об'єкта для читання куки її імені і запису значення куки з конкретним ім'ям. this . GetCookie ( 'cOwner' ); this . SetCookie ( 'cOwner' , cOwner ); Так вони використовуються, якщо в результаті першої конструкції значення не буде надано, то друга конструкція його встановлює.

Приклад об'єкта для роботи з куками

Можна обговорювати, що таке jаvascript object's і парадигма об'єктно-орієнтованого підходу мови, що працює в середовищі браузера. Це цікаво, але в реальності потрібна практика, а не теорія. Обслуговувати DOM сторінки, надавати інструментарій для маніпулювання об'єктами та переміщення по системам об'єктів - це сильна сторона jаvascript. На об'єктно-орієнтованої практиці важливо інше. Робота з куками практично на всіх веб-ресурсах в порядку речей. Реалізувати це в форматі об'єкта - відмінна ідея. У цьому контексті ініціалізація об'єкта відбувається в момент відкриття сторінки: сторінка завантажена = об'єкт куки існує і все прочитав, а чого не було - створив. В процесі роботи зі сторінкою відвідувач здійснює ті чи інші дії і браузер повинен змінити або створити куки. Є два методи об'єкта (зазначені вище), які це роблять. Фактично об'єкт куки виникає відразу після того, як браузер побудує DOM і доповнює систему об'єктів jаvascript новим функціоналом: прочитати і створити (редагувати) куки. На цьому простому прикладі об'єктно-орієнтоване програмування розглядається як процедура створення реальних об'єктів, які мають виключно власні властивості і функціонал (методи). Кожен об'єкт робить свою роботу і не бере участь у загальному алгоритмі, не змінює дані інших об'єктів або загального простору імен. При такому підході розробник забезпечує створення системи унікальних об'єктів достатніх для опису та обслуговування розв'язуваної задачі.

Події сторінки та об'єктів

Важливий елемент функціонування DOM і jаvascript: object подієві s - дозволяє отримати інформацію про подію в його обробника. Практично кожному елементу сторінки можна призначити власний обробник на одне або кілька подій. Фактично розробник jаvascript створює не один великий шматок коду, а безліч описів функцій, об'єктів, структур даних і призначає конкретних елементів сторінки обробники подій. Object event - це інформація про подію, яка викликала обробник і можливість виконання цим обробником адекватної реакції на цю подію. Кожна подія відрізняється не тільки ім'ям і місцем виникнення, але і безліччю інших параметрів. Зокрема, події клавіатури - це один набір параметрів, події мишки - зовсім інший спектр даних, а відповідь сервера через AJAX зовсім планує сам розробник. У кожному конкретному випадку картина подій, які можуть виникнути на сторінці, трансформується в спектр включених обробників, за межами передбачених варіантів обробки конкретного набору подій сторінка не робить ніяких дій.

Створення і робота об'єктів

Браузер "трансформує" URI, адреса веб-ресурсу, зазначений відвідувачем, дерево DOM - систему об'єктів сторінки цього веб-ресурсу. При переміщенні відвідувача по посиланнях сторінки браузер переходить на відповідні дерева інших сторінок. Ця обставина дозволяє розробнику побудувати свою систему об'єктів як фундамент веб-ресурсу, адекватно реагує на поведінку відвідувача. Якщо виокремити загальний функціонал, наприклад: робота з куками; прийом/передача даних (AJAX); спливаючі підказки; внутрішні повідомлення (чат сайту); інші завдання; те, створені одного разу, системи об'єктів можна використати при розробці інших сайтів. У цьому істотна перевага об'єктного підходу перед звичайним застосуванням jаvascript, як мови браузера, який забезпечує функціонування сторінки і реакцію на події. Об'єкти - це закінчені компоненти, які можна оформляти у вигляді окремих файлів і використовувати у подальшому. Характерною особливістю такого підходу є можливість зворотного зв'язку, коли оновлений, покращений об'єкт може використовуватися в попередній розробці, автоматично оновлюючи її функціонал без доопрацювання сайту.