Javascript функція в функції

Ідеї ​​динамічного формування контенту на web-ресурса стали нормою. Статичні сторінки і шаблонне сайтостроєніє остаточно завершили свою місію.

Однак сучасний web-ресурс не обов'язково повинен бути представлений набором сторінок, які формуються сервером і оновлюваних браузером (JS + AJAX).

Javascript функція в функції

Web-ресурс в момент приходу відвідувача може являти собою пару заголовків для протоколу, трохи тексту в «head», кілька рядків коду в «body» і все. Решта «додумається» в процесі роботи відвідувача - це ідеальний сайт або прагне бути таким.

Місце опису та сутність функцій

Javascript функція в функції

Поняття алгоритму поза функцією тут відсутня в принципі. Зрозуміло, розробник може в будь-якому місці сторінки вставити скрипт, помістити в нього код і він буде виконаний. Але який сенс в коді, який виконується тільки раз: при завантаженні (перевантаження) сторінки? Хіба що можна встановити початкові значення яких-небудь малозначущих змінних.

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

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

функціональна динаміка

Функціональна динаміка - це зовсім не тільки і не стільки обробники, призначені елементів сторінки, це функції, що формують елементи сторінки, ну і безпосередні обробники теж можуть змінюватися.

Javascript функція в функції

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

Це нове мислення в розробці: розподілена обробка інформації в надрах окремо взятого браузера!

Синтаксис змінних і функцій

Опис функції в загальному випадку починається з ключового слова «function», за яким слід її ім'я, список аргументів у круглих дужках через кому і тіло функції в фігурних дужках.

Javascript функція в функції

В даному прикладі описані дві функції, що забезпечують AJAX-обмін між сторінкою та сервером. Мінлива scXHR описана вище, тому доступна як в InitXML, так і всередині WaitReplySC.

Ім'я функції і парамет «функція»

Тут важливо також відзначити, що WaitReplySC - це функція. Але в рядку scXHR.onreadystatechange = WaitReplySC вона передається як параметр. Це загальне правило передачі функцій в інші функції в якості параметрів. Вказав дужки і передав в них її параметр (параметри) - функція виповниться негайно. Передав тільки ім'я, ну і що з того. Виклик функції зробить той, хто отримав її ім'я.

Вихід з функції і її результат

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

Javascript функція в функції

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

Зовсім не обов'язково пробігати весь алгоритм функції, коли можна вийти раніше.

аргументи функцій

Javascript функція в функції

Усередині функції доступна змінна arguments, що має властивість length. Можна звертатися до будь-якого аргументу функції через arguments [0], arguments [1]. до останнього arguments [arguments.length-1].

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

Використання функцій

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

Одна функція може обслуговувати кілька елементів сторінки і кілька подій. За допомогою параметра «this» можна передати функції інформацію, звідки вона була викликана.

Класичне використання JS-функцій - обробники подій на елементах. В даному прикладі в формі входу / виходу відвідувача буде викликана функція scfWecomeGo () або scfWelcomeCancel (), а при виборі режиму роботи scfMenuItemClick (this).

Javascript функція в функції

Функція не обов'язково повинна повертати рядок символів, число або іншу функцію. Вона може повернути повноцінний HTML-елемент, причому в якому буде необхідна кількість елементів, зі своїми обработчиками своїх подій.

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

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

Про розподіленому мисленні

Розробнику доводиться мислити на рівні всіх елементів сторінки, на рівні всіх подій і мати в ясному представленні, як все відбувається насправді. Це складно, але ця робота коштує того.

Javascript функція в функції

Javascript функція в функції

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

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

Javascript функція в функції

Аргументи і результати функцій

Це хороший механізм, але досить складний щодо реалізації. Технічно все допустимо, семантично забезпечити логіку передачі «функціоналу» під силу тільки кваліфікованому розробнику.

Javascript функція в функції

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

Виконання сформованого коду

Javascript функція в функції

Javascript функція в функції

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

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

Однак і рекурсія, і функція, що викликає іншу функцію, яка може зробити обґрунтований зворотний виклик - норма речей.

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

Javascript функція в функції

Схожі статті