JavaScript: функцыя ў функцыі. Мова праграмавання JS

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

Аднак сучасны web-рэсурс не абавязкова павінен быць прадстаўлены наборам старонак, якія фарміруюцца серверам і абнаўляюцца браўзэрам (JS + AJAX).

Web-рэсурс у момант прыходу наведвальніка можа ўяўляць сабой пару загалоўкаў для пратаколу, трохі тэксту ў «head», некалькі радкоў кода ў «body» і ўсё. Астатняе «дадумаецца» ў працэсе работы наведвальніка - гэта ідэальны сайт або які імкнецца быць такім.

Месца апісання і сутнасць функцый

опыт, наработаный многими десятилетиями. JavaScript - гэта вопыт, наработаный многімі дзесяцігоддзямі. Ён мае значную гісторыю развіцця, сучасную кваліфікаваную каманду стваральнікаў-распрацоўнікаў. Мова выдатна прадуманы, надзейны, прыгожы і дае сапраўдную магчымасць распрацоўнікам пісаць прыстойны код і самаўдасканальвацца.

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

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

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

функцыянальная дынаміка

Функцыянальная дынаміка - гэта зусім не толькі і не столькі апрацоўшчыкі, прызначаныя элементам старонкі, гэта функцыі, якія фармуюць элементы старонкі, ну і непасрэдныя апрацоўшчыкі таксама могуць мяняцца.

Дзеянне на старонцы разгортваецца ў залежнасці ад яе элементаў і паводзін наведвальніка на ёй. Руху мышкі, кнопкі клавіятуры, зграі, падзеі элементаў і іншыя абставіны прыводзяць да запуску патрэбных функцый.

Першапачаткова тут няма ніякай паслядоўнасці і няма ніякай паралельнасці. Тут ёсць адэкватная рэакцыя web-рэсурсу на падзеі. Наколькі хутка JavaScript адпрацуе тую ці іншую функцыю, залежыць ад шматлікіх тэхнічных (кампутар, лініі сувязі) і семантычных (логіка алгарытму, прадметная вобласць, сэнс задачы) фактараў.

Па факце можна сцвярджаць, што нешта спрацавала паралельна, а нешта споўніцца пасля чагосьці, але сэнсу ў гэтым асаблівага няма. Важна, што функцыі JavaScript - гэта магчымасць ствараць адэкватную рэакцыю на дзеянні наведвальніка.

Гэта новае мысленне ў распрацоўцы: размеркаваная апрацоўка інфармацыі ў нетрах асобна ўзятага браўзэра!

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

JavaScript-зменныя размяшчаюцца як у тэгу «script», так і ў целе функцыі. Функцыі вызначаюцца гэтак жа. Асаблівага сэнсу пісаць ўнутры функцыі яшчэ адну функцыю няма, але гэта можа быць неабходна па розных і цалкам абгрунтаваным прычынах.

Апісанне функцыі ў агульным выпадку пачынаецца з ключавога слова «function», за якім варта яе імя, спіс аргументаў на круглых дужках праз коску і цела функцыі ў фігурных дужках.

У дадзеным прыкладзе апісаны дзве функцыі, якія забяспечваюць AJAX-абмен паміж старонкай і серверам. Пераменная scXHR апісана вышэй, таму даступная як у InitXML, так і ўнутры WaitReplySC.

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

Тут быў прадстаўлены асінхронны варыянт, калі JavaScript-функцыя ў функцыі выклікаецца пасля адказу сервера. Пры гэтым, атрымаўшы адказ ад сервера, WaitReplySC звяртаецца да тэгах старонкі, запаўняе іх атрыманай інфармацыяй і выклікае іншыя функцыі, якія цалкам могуць ініцыяваць наступны запыт да сервера.

Тут важна таксама адзначыць, што WaitReplySC - гэта функцыя. scXHR.onreadystatechange = WaitReplySC она передается как параметр. Але ў радку scXHR.onreadystatechange = WaitReplySC яна перадаецца як параметр. Гэта агульнае правіла перадачы функцый у іншыя функцыі ў якасці параметраў. Указаў дужкі і перадаў у іх яе параметр (параметры) - функцыя споўніцца неадкладна. Перадаў толькі імя, ну і што з таго. Выклік функцыі зробіць той, хто атрымаў яе імя.

Функцыянальнасць, якая рэалізуецца праз AJAX, дазваляе выканаць выклік функцыі JavaScript праз дадзеныя, атрыманыя ад сервера. Фактычна, пасылаючы запыт на сервер, тая ці іншая функцыя можа зусім і не «ведаць», да якой функцыі яна звяртаецца і з якой інфармацыяй.

Выхад з функцыі і яе вынік

У целе функцыі можна пісаць любыя аператары мовы, які, уласна, для гэтага і прызначаны. Ўнутры функцыі даступныя зменныя, апісаныя ўнутры і па-за яе, але не тыя, што апісаны ў іншых функцыях.

Калі патрабуецца, каб функцыя вяртала вынік, можна скарыстацца аператарам вяртання JavaScript: return. У целе функцыі можа быць дастатковую колькасць аператараў вяртання. Зусім не абавязкова, што ўсе яны будуць вяртаць вынік аднаго і таго ж тыпу.

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

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

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

Аргументы на функцыю перадаюцца спісам праз коску, заключаюцца ў круглыя дужкі і знаходзяцца адразу пасля яе імя. У якасці аргументаў выкарыстоўваюцца імёны зменных, але можна перадаваць і непасрэдна значэння. Каб на JavaScript перадаць функцыю ў функцыю, трэба проста паказаць яе імя без дужкі.

Ўнутры функцыі даступная пераменная arguments, якая мае ўласцівасць length. Можна звяртацца да любога аргументу функцыі праз arguments [0], arguments [1], ... да апошняга arguments [arguments.length-1].

Змена аргументу функцыі сапраўды ўнутры функцыі, але не па-за яе. Для таго каб нешта змяніць па-за функцыі, трэба скарыстацца аператарам JavaScript return, праз які перадаць неабходнае значэнне вонкі.

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

У arguments ёсць ўласцівасць callee, якое прызначана для выкліку функцыі, што выконваецца ў дадзены момант часу. Калі выклікаць саму сябе, то варыянт JavaScript функцыя ў функцыі дазволіць рэалізаваць рэкурсіі.

выкарыстанне функцый

Асноўны клопат функцый - абслугоўваць падзеі браўзэра. Для гэтага практычна ў кожным тэгу ёсць магчымасць паказаць імя падзеі і функцыю, яго апрацоўчую. Можна паказваць некалькі падзей, але на кожнае падзея паказваецца толькі адна функцыя.

Адна функцыя можа абслугоўваць некалькі элементаў старонкі і некалькі падзей. Пасродкам параметру «this» можна перадаць функцыі інфармацыю, адкуль яна была выклікана.

Класічнае выкарыстанне JS-функцый - апрацоўшчыкі падзей на элементах. У дадзеным прыкладзе ў форме ўваходу / выхаду наведвальніка будзе выкліканая функцыя scfWecomeGo () або scfWelcomeCancel (), а пры выбары рэжыму працы scfMenuItemClick (this).

У апошнім выпадку перадаецца параметр «this», які дазваляе цудоўным чынам даведацца, з якога менавіта дзіва адбыўся выклік. Наогул, JavaScript настолькі якасна імплантаваны ў DOM і ён так зручна дазваляе перамяшчацца па яго элементаў, збіраць патрэбную інфармацыю, што дынаміка старонкі можа быць проста непрадказальнай.

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

Размяшчаючы такі элемент на старонцы, распрацоўшчык стварае новую функцыянальнасць, што добра ў частцы рашэння задачы і задавальнення інтарэсаў наведвальнікаў, але досыць складана ў частцы рэалізацыі.

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

Аб размеркаванай мысленні

Распрацоўніку даводзіцца думаць на ўзроўні ўсіх элементаў старонкі, на ўзроўні ўсіх падзей і мець ў ясным прадстаўленні, як усё адбываецца на самой справе. Гэта складана, але гэта работа варта таго.

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

У дадзеным прыкладзе дзесьці раней была выкліканая функцыя, якая ініцыявала стварэнне элемента меню навігацыі па файлаў. Мяркуецца старонкавая арганізацыя, гэта значыць у акенцы ўсяго сем файлаў, якія можна выдаляць і апрацоўваць. Перамяшчацца можна як па кліку на радку файла, так і стрэлкамі на клавіятуры, так і блокамі па сем радкоў.

У кожным выпадку ёсць свае функцыі. Інакш кажучы, у такім простым прыкладзе неабходна напісаць пару дзесяткаў функцый, якія будуць рэагаваць на розныя падзеі, а некаторыя з гэтых функцый будуць апрацоўваць розныя варыянты і сітуацыі, якія да падзей зусім не ставяцца.

Напрыклад, пры выдаленні радкі ніжнія павінны зрушыцца ўверх. Для гэтага спатрэбіцца альбо зрабіць новую выбарку, што банальна і ёміста па рэсурсах, альбо пералічыць радкі, выкарыстоўваць на javascript функцыі масіваў і элегантна дасягнуць мэты.

Аргументы і вынікі функцый

JavaScript дазваляе прывесці код да «поўнафункцыянальны» стане. Нармальна, калі аргументам функцыі з'яўляецца функцыя. Дапускаецца варыянт, калі функцыя вяртае функцыю. JavaScript ставіцца да гэтага цалкам спакойна.

Гэта добры механізм, але досыць складаны ў дачыненні да рэалізацыі. Тэхнічна ўсё дапушчальна, семантычна забяспечыць логіку перадачы «функцыяналу» пад сілу толькі кваліфікаванаму распрацоўніку.

Калі ў JavaScript функцыя ў функцыі - куды ні ішло, але калі функцыя спараджае функцыю, а тая яшчэ адну, то ўсачыць логіку досыць складана. Па сутнасці справы, пытанне не ў тым, каб прымяніць кваліфікацыю, пытанне ў тым, каб атрымаць бяспечны і правільны вынік.

Клопат распрацоўніка зразумелая і простая. Ёсць задача, трэба рашэнне, а не памылка накшталт «JavaScript error the operation is insecure», чысты экран або прыпынак за ўсё рухавічка браўзэра.

Калі аргументам з'яўляецца функцыя, значыць распрацоўшчык перадае зменную з адмысловымі ўласцівасцямі, то бок, гэта не колькасць, не радком, не аб'ект. Але выкарыстанне такога аргументу можа прывесці да таго, што зменяцца знешнія зменныя і будзе вынік выканання функцыі. У залежнасці ад таго, што перададзеныя будуць адэкватныя змены.

Выкананне сфармаванага кода

Рэалізаваць выкананне кода, сфармаванага ў працэсе працы іншага кода, можна з дапамогай «eval». Гэта не лічыцца выдатным рашэннем, але часта можна не ўскладняць код залішнімі функцыямі, а абмежавацца банальным фарміраваннем радкі JavaScript кода і папросту выканаць яе.

У дадзеным прыкладзе фарміруецца радок ўстаўкі ў дзеючы дзіў некаторай інфармацыі. Нумар дзіва і змест інфармацыі розныя для розных пазіцый, таму такое рашэнне ў дадзенай сітуацыі гарантавана не забяспечыць сітуацыю «javascript error the operation is insecure», але надзейна дасць патрэбны эфект.

Нюанс парадыгмы JavaScript «функцыя ў функцыі»

Калі ёсць магчымасць абысціся без празмернасцяў, лепш ім скарыстацца. Усе пералічаныя варыянты добрыя. Безумоўна, у многіх выпадках гэта адзінае рашэнне.

Класічны прыклад рэкурсіі: вылічэнне фактарыяла. Тут дастаткова цяжка напісаць алгарытм, які зацыкліліся, але вельмі проста можна выйсці за межы значэння. Фактарыяла расце занадта хутка.

Аднак і рэкурсіі, і функцыя, якая выклікае іншую функцыю, якая можа зрабіць абгрунтаваны зваротны выклік - норма рэчаў.

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

Такіх прыкладаў можна прывесці мноства, і ўсё гэта будуць рэальныя і надзённыя задачы, зусім не з вобласці праграмавання. Менавіта таму праблема заключаецца менавіта ў тым, што без празмернасцяў не абысціся, створаная сістэма функцый, дакладней яе адладка і наступная надзейная праца ператвараецца ў клопат ня JavaScript, а распрацоўніка.