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

Відвідування веб-ресурсу - це конкретний URI в адресному рядку браузера. Відвідувач вказує адресу сторінки, і вона розбирається браузером на елементи дерева DOM - Document Object Model. Будь-яке посилання на цій сторінці вказує браузеру розібрати іншу сторінку і побудувати інше дерево об’єктів.

javascript object

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

Фактично дії користувача - це переміщення між системами об’єктів, утворених в процесі відвідування сторінок. Кожна сторінка - це власне дерево DOM і, крім того, JavaScript object’s - це об’єкти синтаксису самої мови і призначених для користувача описів.

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

Є три основні варіанти, які формують об’єкти сторінки веб-ресурсу, як на рівні DOM і самої мови JavaScript, який виконав конструкції створення змінних, так і на підставі описів, зроблених розробником:

  • Завантаження - відвідувач прийшов на сторінку сайту;
  • Оновлення - відвідувач оновив сторінку (кнопка браузера або Ctrl-F5);
  • Зміна елемента сторінки, наприклад (AJAX, скрипт, подія, ...).

Всі три процеси кардинально різняться, але відрізняти особливості перших двох особливо важливо. Важко заборонити відвідувачу оновлювати сторінку - це невикорінна “згубна” звичка відвідувача, яку розробнику слід мати на увазі.

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

object javascript

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

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

JavaScript заснований на об’єктах. Практично всі змінні мови - це об’єкти. Розробник може формулювати власні опису об’єктів, використовуючи різноманітні варіанти синтаксису.

object keys javascript

Все, що не є “рядком”, “числом”, true, false, null або undefined, є об’єктом. В рамках синтаксису мови цього можна не надавати значення, розуміючи під об’єктами тільки елементи DOM і власні опису JavaScript Object’s. Фундаментальне будова мови в більшості випадків для розробника не має істотного практичного значення.

Наприклад, математичні функції представлені об’єктом Math. Це зручно в рамках концепції мови, але для розробника - це просто зручний синтаксис використання необхідного арсеналу математичних операцій.

авторський приклад - це не картинка

Важливо правильно працювати з DOM і коректно описувати власні об’єкти. Синтаксис JavaScript object function’s і виразів для їх застосування - це форма запису логіки необхідного алгоритму.

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

В основі всіх об’єктів JavaScript лежить правило: “властивість” = “значення” і поняття асоціативного масиву. У найпростішому випадку object JavaScript - це сукупність пар “властивість” = “значення”. При цьому “значення” не завжди може бути числом, а властивість не завжди записано без лапок.

Не слід зловживати ім’ям властивостей. Ідеально, коли імена властивостей містять тільки символи латинського алфавіту, задовольняють вимогам до іменування змінних і не є ключовими (в т. Ч. Зарезервованими) словами мови.

javascript delete object

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

Ініціалізувати масив властивостей означає одночасно:

  • Створення масиву;
  • Створення об'єкта.

У конкретному контексті застосування можна розглядати JavaScript object - як асоціативний масив, а в іншому місці алгоритму - як об’єкт, призначати йому потрібні методи, змінювати значення його елементів.

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

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

Отримати і змінити значення властивостей об’єкта можна конструкцією Object. keys: JavaScript формує масив всіх властивостей об’єкта. Коли об’єкти створюються динамічно, ця конструкція дуже зручна, оскільки автоматично формує список всіх наявних в об’єкті властивостей.

авторський приклад - це не картинка

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

Аналогічного ефекту можна досягти в точковій нотації або скобочной:

  • X1_Obj. NameLast;
  • X1_Obj [ 'NameFirst' ].

Обидві конструкції допустимі і дають потрібний результат. У наведеному прикладі при завданні масиву через фігурні дужки “{}” може бути допущена помилка у вигляді символу “,” в кінці перерахування (відзначено в прикладі червоним кружечком). Зазвичай браузери ігнорують зайвий символ в перерахуванні, але краще цього не робити.

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

Оскільки об’єкт - це асоціативний масив, операція JavaScript delete object виконується на рівні поточного об’єкта (при спадкуванні - це має значення) і розглядається на колекції властивостей цього об’єкта.

javascript object properties

У контексті наведеного прикладу можна використовувати такі конструкції:

  • Delete x1_Obj. NameLast ;
  • Delete x2_Obj [ 'NameFirst' ];

Перша конструкція видаляє другий елемент першого об’єкта, друга конструкція - перший елемент другого об’єкта. Оператор видалення не працює на властивостях прототипу і повертає результатом значення false, якщо властивість не може бути видалено.

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

Синтаксис JavaScript object properties і functions (методи) аналогічний загальним канонами синтаксису і семантики мови. По суті, справа йде якраз навпаки.

javascript object event

Властивості і методи об’єкта - це варіант опису інформації та допускаються з нею дій через об’єктно-орієнтовану парадигму JavaScript.

авторський приклад - це не картинка

В даному прикладі описаний об’єкт x3_Obj, у якого є тільки два властивості: item і pos. Потім був доданий метод hello () у вигляді функції. В результаті інтерпретацію цього опису в контексті значень властивостей, JavaScript 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 );

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

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

Можна обговорювати, що таке JavaScript Object’s і парадигма об’єктно-орієнтованого підходу мови, що працює в середовищі браузера. Це цікаво, але в реальності потрібна практика, а не теорія. Обслуговувати DOM сторінки, надавати інструментарій для маніпулювання об’єктами і переміщення по системам об’єктів - це сильна сторона JavaScript.

javascript object function

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

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

Фактично об’єкт куки виникає відразу після того, як браузер побудує DOM і доповнює систему об’єктів JavaScript новим функціоналом: прочитати і створити (змінити) куки.

На цьому простому прикладі об’єктно-орієнтоване програмування розглядається як процедура створення реальних об’єктів, які мають виключно власні властивості і функціонал (методи). Кожен об’єкт робить свою роботу і не бере участі в загальному алгоритмі, не змінює дані інших об’єктів або загального простору імен.

При такому підході розробник забезпечує створення системи унікальних об’єктів достатніх для опису і обслуговування розв’язуваної задачі.

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

Важливий елемент функціонування DOM і JavaScript: object event’s - дозволяє отримати інформацію про подію в його обробнику. Практично кожному елементу сторінки можна призначити власний обробник на одне або кілька подій.

javascript object values

Фактично розробник JavaScript створює не один великий “шматок” коду, а безліч описів функцій, об’єктів, структур даних і призначає конкретних елементів сторінки обробники подій.

Object event - це інформація про подію, яка викликала обробник і можливість виконання цим обробником адекватної реакції на цю подію. Кожна подія відрізняється не тільки ім’ям і місцем виникнення, але і безліччю інших параметрів.

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

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

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

Браузер “трансформує” URI, адреса веб-ресурсу, вказаний відвідувачем, в дерево DOM - систему об’єктів сторінки цього веб-ресурсу. При переміщенні відвідувача по посиланнях сторінки браузер переходить на відповідні дерева інших сторінок.

Ця обставина дозволяє розробнику побудувати свою систему об’єктів як фундамент веб-ресурсу, адекватно реагує на поведінку відвідувача. Якщо виокремити загальний функціонал, наприклад:

  • Робота з куками;
  • Прийом / передача даних (AJAX);
  • Спливаючі підказки;
  • Внутрішні повідомлення (чат сайту);
  • Інші завдання;

То, створені одного разу, системи об’єктів можна використовувати при розробці інших сайтів. У цьому істотна перевага об’єктного підходу перед звичайним застосуванням JavaScript, як мови браузера, що забезпечує функціонування сторінки і реакцію на події.

javascript object

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



ЩЕ ПОЧИТАТИ