Simplu și ușor de înțeles despre polimer

Alexey Tankayan
Dezvoltator web

Simplu și ușor de înțeles despre polimer

Recunoașteți mai întâi!

Abonați-vă la newsletter-ul nostru și obțineți mai întâi ultimele noutăți

Deci, să începem. Există două tipuri de adnotări obligatorii:







  1. One-way adnotare ( „[[]]“) - vă permite să transferați date din celula gazdă la un copil, dar niciodată nu trece de la copil la elementul gazdă.
  2. Adnotarea în două sensuri (">") vă permite să transferați date de la gazdă către copil și invers.

Vom da seama ce se întâmplă când Polymer funcționează cu aceste adnotări.

Atunci când o componentă este înregistrată, Polymer scanează conținutul tag-ului șablon al acestei componente și caută în interiorul ei acele elemente care au adnotări obligatorii. Apoi, Polymer creează așa-numitele "proprietăți-efecte" pentru fiecare element. Un efect proprietate este un obiect care conține informații despre elementul pe care să îl actualizați când se modifică valoarea proprietății. specificate în adnotarea obligatorie.

De exemplu, pentru această componentă, Polymer va crea un efect proprietate pentru elementul span și un alt efect proprietate pentru elementul de intrare. Toate efectele create de proprietate sunt stocate într-o matrice, care este o listă de acțiuni care trebuie executate atunci când proprietatea se schimbă.

Puteți vedea ce sunt aceste efecte de proprietate. accesând proprietatea privată a componentei _propertyEffects.

Simplu și ușor de înțeles despre polimer






În plus față de crearea proprietăților-efecte. Polimerul creează, de asemenea, ceva de genul un setter pentru proprietate. În interiorul acestui setter se efectuează așa-numita "verificare murdară", care este o verificare pentru a vedea dacă valoarea proprietății sa schimbat deloc.

Arată așa ceva (Polymer descrie asemănarea sa cu setterii și o face puțin diferit, aici și mai jos sunt prezentați în această formă pentru ușurință în înțelegere):

__data__ este o variabilă privată în care sunt stocate valorile proprietății elementului. Dacă valoarea proprietății sa modificat, atunci după salvarea noii valori în __data__. toate efectele de proprietate sunt ocolite și se efectuează acțiuni corespunzătoare pentru a actualiza elementele asociate cu proprietatea folosind adnotări obligatorii.

Acum, să vedem ce se întâmplă dacă specificăm un observator pentru proprietate și adăugăm semnalul de notificare cu valoarea true:

De fapt, nu se va întâmpla magie. După ce ați efectuat controlul murdar și efecte imobiliare. Funcționarul-observator va fi chemat. Apoi va fi trimis un eveniment care notifică schimbarea proprietății.

Să aruncăm o privire mai atentă la ceea ce face pavilionul de notificare. De fiecare dată când am pus-o la adevărat. Polimerul din setter adaugă un eveniment care îi spune celorlalte componente că proprietatea sa schimbat. Acest eveniment va fi întotdeauna denumit '% propertyname% -changed' și va stoca noua valoare a proprietății. Polimer, de asemenea, după stabilirea de proprietate efecte va verifica dacă proprietatea este conectat (în acest caz, demo) la proprietatea unei alte componente (în acest caz, valoarea proprietății componenta x-intrare). În acest caz, un manipulator va fi creat în interiorul componentei, ascultând evenimentul modificat de valoare. care va schimba valoarea demo-ului. cu care a fost asociată proprietatea valorii componentului x-input.

Dacă folosim adnotarea într-o singură direcție în șablonul componentei:

În acest caz, Polymer pur și simplu nu va crea un handler care să asculte evenimentul "cu valoare modificată".

Dacă pentru proprietate specificați pavilionul readOnly cu valoarea true:

Apoi, Polimer pur și simplu nu va crea un setter public la nimic în afara această proprietate nu sa schimbat, dar ridicatorul privat va fi creat pentru a gestiona schimbarea în cadrul componentei.

Alexey Tankayan
Dezvoltator web







Articole similare

Trimiteți-le prietenilor: