Web-Käyttöliittymä

AngularJS-opetusohjelma: Mukautettujen direktiivien demistifiointi

JavaScriptin nopean kasvun myötä a täysi pino kieli, yhä useammat sovellukset käyttävät kehyksiä, joiden avulla verkkoselain pystyy käsittelemään enemmän käyttöliittymän käsittelyä, kuten tietojen sitominen, datanäkymien hallinta, tietojen muuntaminen ja monet muut palvelut. Yksi kykenevimmistä, laajennettavissa ja suosituimmista kehyksistä on KulmaJS , ja yksi AngularJS-kehyksen hyödyllisimmistä komponenteista on jotain, jota kutsutaan a direktiivi . AngularJS tarjoaa monia hyödyllisiä direktiivejä, ja mikä vielä tärkeämpää, se tarjoaa runsaan kehyksen mukautettujen direktiivien luomiselle.

Mikä on direktiivi? Yksinkertaisesti sanottuna direktiivit ovat JavaScript-toimintoja, jotka manipuloivat ja lisäävät käyttäytymistä HTML DOM -elementteihin. Direktiivit voivat olla hyvin yksinkertaisia tai erittäin monimutkaisia. Siksi on erittäin tärkeää saada vankka käsitys heidän monista vaihtoehdoistaan ja toiminnoista, jotka manipuloivat niitä.

Tässä opetusohjelmassa tutkitaan neljää toimintoa, jotka suoritetaan direktiivinä, ja käytetään DOM: ssä, ja annetaan esimerkkejä. Tämä viesti edellyttää jonkin verran perehtymistä AngularJS: ään ja mukautettuihin direktiiveihin. Jos olet uudempi kulmikas, saatat nauttia a ensimmäisen AngularJS-sovelluksen rakentamisen opetusohjelma.

AngularJS-direktiivin elinkaaren neljä toimintoa

Määritettävissä on monia vaihtoehtoja, ja kuinka nämä vaihtoehdot liittyvät toisiinsa, on tärkeää. Jokainen direktiivi käy läpi jotain elinkaaria vastaavaa, kun AngularJS kokoaa ja linkittää DOM: n. Direktiivin elinkaari alkaa ja päättyy AngularJS-käynnistysprosessin aikana, ennen kuin sivu renderöidään. Direktiivin elinkaaressa on neljä erillistä toimintoa, jotka voidaan suorittaa, jos ne on määritelty. Jokaisen avulla kehittäjä voi hallita ja mukauttaa direktiiviä elinkaaren eri vaiheissa.

Neljä toimintoa ovat: koota , ohjain , esilinkki ja post-Link .

koota Toiminto antaa direktiivin manipuloida DOM: ää ennen sen kokoamista ja linkittämistä, jolloin se voi lisätä / poistaa / muuttaa direktiivejä sekä lisätä / poistaa / muuttaa muita DOM-elementtejä.

ohjain toiminto helpottaa direktiiviviestintää. Sisarus- ja lapsidirektiivit voivat pyytää sisarustensa ja vanhempiensa rekisterinpitäjää välittämään tietoja.

esilinkki toiminto sallii yksityisen $ -ulottuvuus manipulointia ennen linkin jälkeistä prosessia.

postilinkki menetelmä on direktiivin ensisijainen työhevosmenetelmä.

Direktiivissä tehdään jälkikokoamisen jälkeinen DOM-manipulointi, tapahtumankäsittelijät on konfiguroitu, samoin kellot ja muut asiat. Direktiivin julistuksessa neljä toimintoa määritellään näin.

 .directive('directiveName',function () { return { controller: function() { // controller code here... }, compile: { // compile code here... return { pre: function() { // pre-link code here... }, post: function() { // post-link code here... } }; } } })

Yleensä kaikkia toimintoja ei tarvita. Useimmissa tapauksissa kehittäjät yksinkertaisesti luovat ohjain ja postilinkki -toiminto alla olevan mallin mukaisesti.

 .directive('directiveName',function () { return { controller: function() { // controller code here... }, link: function() { // post-link code here... } } })

Tässä kokoonpanossa linkki viittaa postilinkki toiminto.

Olipa kaikki tai osa toiminnoista määritelty, niiden suoritusjärjestys on tärkeä, erityisesti niiden suorittaminen suhteessa muuhun AngularJS-sovellukseen.

AngularJS-direktiivin toimintojen suorittaminen suhteessa muihin direktiiveihin

Harkitse seuraavaa HTML-koodinpätkää ohjeiden kanssa parentDir , childDir ja grandChildDir käytetään HTML-fragmenttiin.

element.html(element.html());

Direktiivin toimintojen toteutusjärjestys suhteessa muihin direktiiveihin on seuraava:

Käännä vaihe
- Käännä toiminto : parentDir
- Käännä toiminto : childDir
- Käännä toiminto : grandChildDir
Ohjain ja esilinkkivaihe
- Ohjaimen toiminto : parentDir
- Pre-Link-toiminto : parentDir
- Ohjaimen toiminto : childDir
- Pre-Link-toiminto : childDir
- Ohjaimen toiminto : grandChildDir
- Pre-Link-toiminto : grandChildDir
Linkin jälkeinen vaihe
- Linkin jälkeinen toiminto : grandChildDir
- Linkin jälkeinen toiminto : childDir
- Linkin jälkeinen toiminto : parentDir

AngularJS-direktiivitoiminnon opetusohjelma - suoritusmääräys suhteessa muihin direktiiveihin.

AngularJS-direktiivin toiminto Selitys: Syvä sukellus

Laadintavaihe tapahtuu ensin. Pohjimmiltaan kääntämisvaihe kiinnittää tapahtumakuuntelijat DOM-elementteihin. Esimerkiksi, jos tietty DOM-elementti on sidottu a: han $ -ulottuvuus ominaisuus, tapahtumakuuntelija, jonka avulla se voidaan päivittää $ -ulottuvuus ominaisuutta käytetään DOM-elementille. Kokoamisprosessi alkaa juuri DOM-juurielementistä, josta AngularJS-sovellus käynnistettiin, ja kulkee DOM: n haarat alaspäin ensin syvyyden läpi, kääntäen ensin vanhemman ja sen lapset aina lehtisolmuihin asti.

Kun kokoaminen on valmis, direktiivejä ei voida enää lisätä tai poistaa DOM: sta (vaikka on olemassa kiertotapoja tässä käyttämällä suoraan koota palvelu . Seuraava vaihe on ohjainten ja esilinkkitoimintojen kutsuminen kaikille direktiiveille. Kun ohjainta kutsutaan, $ -ulottuvuus on saatavana ja sitä voidaan käyttää. $ -elementti Ohjaimeen injektoitu sisältää käännetyn mallin, mutta ei sisällä suljettua alisisältöä (suljettu sisältö on alku- ja lopun HTML-tunnisteiden välistä sisältöä, johon direktiiviä sovelletaan). Määritelmän mukaan MVC-mallin ohjaimet yksinkertaisesti siirtävät mallin näkymään ja määrittelevät toiminnot tapahtumien käsittelemiseksi. Siksi direktiivin rekisterinpitäjän ei pitäisi muuttaa direktiivin DOM: ää kahdesta syystä: se rikkoo rekisterinpitäjän tarkoitusta, eikä suljettua lapsisisältöä ole lisätty DOM: iin. Joten mitä ohjain ei muuta kuin muuttaa $ -ulottuvuus ? Ohjain antaa lapsidirektiivien kommunikoida vanhempadirektiivien kanssa. Itse ohjaintoimintoa tulisi pitää ohjainobjektina, joka siirretään lapsidirektiivin linkin jälkeiseen toimintoon, jos lapsidirektiivi sitä pyytää. Siksi ohjainta käytetään tyypillisesti helpottamaan direktiiviviestintää luomalla objekti, jolla on ominaisuuksia ja menetelmiä, joita sen sisarus- ja lapsidirektiivit voivat käyttää. Päädirektiivi ei voi määrittää, voiko lapsidirektiivi vaatia ohjainta, joten on parasta rajoittaa koodin tässä menetelmässä toimintoihin ja ominaisuuksiin, joita lapsidirektiivit voivat käyttää turvallisesti.

Ohjaintoiminnon jälkeen esilinkitystoiminto suoritetaan. Esilinkkitoiminto on salaperäinen monille ihmisille. Jos luet suuren osan asiakirjoista Internetissä ja kirjoissa, ihmiset kirjoittavat, että tätä toimintoa käytetään vain harvoissa olosuhteissa ja ihmiset eivät koskaan tarvitse sitä. Samat selitykset eivät sitten anna esimerkkiä tilanteesta, jossa sitä voitaisiin käyttää.

Esilinkkitoiminto ei todellakaan ole lainkaan monimutkainen. Ensinnäkin, jos tarkastelet AngularJS-lähdekoodia, löydät erinomaisen esimerkin esilinkkitoiminnosta: direktiivi lämpöä käyttää sitä. Miksi? Se on yksinkertaisesti loistava tapa suorittaa yksityinen koodi, johon $ -ulottuvuus ; koodi, jota sisarus- ja lapsidirektiivit eivät voi kutsua. Toisin kuin ohjaintoiminto, esilinkkitoimintoa ei siirretä direktiiveihin. Siksi sitä voidaan käyttää suorittamaan koodi, joka muuttaa $ -ulottuvuus sen direktiivin. Direktiivi lämpöä tekee juuri tämän. Kun esilinkitystoiminto lämpöä suorittaa yksinkertaisesti JavaScriptiä, joka on siirretty direktiiviin direktiivin vastaisesti $ -ulottuvuus . Suorituksen tulos on saatavissa $ -ulottuvuus Prototyyppinen perintö lapsidirektiiveille ohjaimen, esilinkin ja linkin jälkeisten toimintojen suorittamisen aikana, mutta antamatta pääsyä näihin alikäyttödirektiiveihin vanhempien esilinkitystoiminnon koodin suorittamiseksi uudelleen. Lisäksi direktiivissä saatetaan joutua suorittamaan muita koodeja, jotka eivät liity $ -ulottuvuus että se haluaa pitää yksityisenä.

Jonkin verran kokeneet AngularJS-kehittäjät sanoisin tämän yksityinen koodi voitaisiin silti sijoittaa ohjaimeen, eikä sitä sitten voida kutsua lapsidirektiiveissä. Tämä väite pitää paikkansa, jos direktiiviä käyttää vain alkuperäinen koodaaja, joka sen koodasi, mutta jos muut kehittäjät aikovat levittää ja käyttää direktiiviä, yksityisen koodin sisällyttäminen esilinkkitoimintoon voisi olla erittäin hyödyllistä. Koska kehittäjät eivät koskaan tiedä, miten heidän direktiiviä käytetään uudelleen ajan myötä, yksityisen koodin suojaaminen alidirektiivin suorittamalta on hyvä lähestymistapa direktiivikoodien kapselointiin. Pidän hyvänä käytäntönä sijoittaa direktiivitiedonannon julkinen koodi ohjaintoimintoon ja yksityinen koodi esilinkkitoimintoon. Ohjaimen tavoin esilinkin ei pitäisi koskaan tehdä DOM-manipulointia eikä suorittaa transkluusiotoimintoa, koska lapsidirektiivien sisältöä ei ole vielä linkitetty.

Jokaiselle direktiiville sen ohjain ja esilinkitystoiminto suoritetaan ennen alidirektiivien ohjainta ja esilinkitystoimintoa. Kun kaikkien direktiivien ohjain ja esilinkkivaihe on valmis, AngularJS aloittaa linkitysvaiheen ja suorittaa linkityksen jälkeiset toiminnot kullekin direktiiville. Linkitysvaihe kulkee kääntämisen, ohjaimen ja esilinkin suorittamisen vastakkaiseen suuntaan aloittamalla lehti DOM-solmuista ja siirtymällä juurihakemistoon. Linkin jälkeinen DOM-kulku seuraa enimmäkseen syvyyden ensimmäistä polkua. Kun jokainen alikäyttödirektiivi linkitetään, sen linkin jälkeinen toiminto suoritetaan.

Postlink-toiminto on toiminto, joka on yleisimmin toteutettu mukautetuissa AngularJS-direktiiveissä. Tässä toiminnossa voidaan tehdä melkein kaikki kohtuulliset. DOM: ää voidaan manipuloida (vain itselleen ja lapsielementeille), $ -ulottuvuus on käytettävissä, vanhempadirektiivien ohjainobjektia voidaan käyttää, transclude-toimintoja voidaan ajaa jne. On kuitenkin joitain rajoituksia. Uusia direktiivejä ei voida lisätä DOM: iin, koska niitä ei koota. Lisäksi kaikki DOM-manipulaatiot on suoritettava DOM-funktioilla. Yksinkertaisesti soittamalla html toiminto DOM-elementissä ja uuden HTML: n siirtäminen poistaa kaikki kääntämisen aikana lisätyt tapahtumankäsittelijät. Esimerkiksi nämä eivät toimi odotetulla tavalla:

element.html(element.html() + ' new content ');

tai

|_+_|

Koodi ei aiheuta HTML-koodin muutosta, mutta DOM-elementtien merkkijonoversion uudelleen määrittäminen poistaa kaikki kääntöprosessin aikana luodut tapahtumankäsittelijät. Tyypillisesti post-link-toimintoa käytetään tapahtumankäsittelijöiden kytkemiseen, $ katsella on ja $ tarkkailla s.

Kun kaikki postilinkin toiminnot on suoritettu, $ -ulottuvuus käytetään käännettyyn ja linkitettyyn DOM-rakenteeseen, ja AngularJS-sivu elää.

Direktiivin toimintakaavio

Tässä on taulukko, jossa luetellaan kunkin toiminnon tarkoitus, mikä on käytettävissä, kun se suoritetaan, ja parhaat käytännöt kunkin toiminnon asianmukaisesta käytöstä.