For nylig udgav Angular en uafhængig "oplevelsesbaseret" udviklingsfunktion kaldet Zone.js. Selvom funktionen stadig er eksperimentel, har Angular-teamet arbejdet på denne vigtige innovation i lang tid. Responsive primitive spil bliver stadig vigtigere for udviklere, hvilket indikerer, at Angular går ind i en ny æra. VinkelafhængighederFordelene ved Signals og Rxjs er endnu mere udtalte, da behovet for konstant at lytte efter ændringer, som Zone.js afhænger af eliminerer, og endte med at fungere som mellemmand under udviklingen.
Angular vil fortsat være en dristig og stærk ramme i fremtiden og starte en ny transformation.
For det første er min artikel ikke ment som en måde at lære nogen noget. Jeg håber ikke, mine læsere føler, at de fortjener at være så passive. Jeg prøver at dele mine erfaringer og erfaringer så meget som muligt og åbne op for diskussioner. Det er vigtigt at diskutere sammen, udveksle idéer og evaluere ud fra kritisk tænkning. Det må ikke glemmes, at der stadig er en vis forvirring om, hvordan de præcist fungerer, især når de teknologier, der diskuteres i denne artikel, stadig er under udvikling, og jeg vil sige, at selv ændringsdetektionsmekanismen stadig kan skabe forvirring blandt kerneteamet i Angular.
Hvad er Zone.js, og hvad gør det?
Zone.js er et lille bibliotek udviklet af Brian Ford i 2010 under navnet "Zones" til at håndtere asynkront arbejde i JavaScript. Inspireret af sprog som Erlang og Dart sigter det mod at bringe struktureret samtidighed til JavaScripts enkelttrådede miljø. Angular-holdet fik momentum, da det adopterede Zones som sin ændringsdetektionsmekanisme i Angular 2, og Angular-teamet begyndte at bidrage med det i form af Zone.js, hvilket gav bredere fællesskabsdeltagelse og videre udvikling. I dag, selvom det stadig er tæt knyttet til Angular, kan Zone.js med rette betragtes som et kraftfuldt værktøj til overvågning og indgriben i asynkrone opgaver, hvilket muliggør performanceanalyse, fejlhåndtering og mange tvivlsomme funktioner.
Så hvorfor forlod Angular Zone.js?
Ved at udnytte AI's evne til ubesværet at forvandle vores imaginære billeder til tegninger, brugte vi metaforen "svamp under sengen" til at skabe et visuelt billede, der er let at forstå.
Forestil dig sengen på billedet ovenfor, som ikke er placeret på gulvet, men på en stor svamp. Zone.js er som en svamp i en Angular-applikation. Denne svamp sikrer, at sengen står på en behagelig, støttende bund, samtidig med at den giver relativ komfort til den sovende. Svampen absorberer hver bevægelse i sengen og forhindrer bevægelsen indeni i sengen i at reflekteres udad.
Monkey-patches Zone.js lytter til alle asynkrone API'er i browseren, såsom: events, commitments, observables, setTimeout, setInterval osv.
Ved at lytte til disse kan Angular-applikationen opdage eventuelle ændringer og dermed opdatere brugergrænsefladen; faktisk, ligesom en svampestøttebed, tillader Zone.js også Angular-applikationen at køre glat. I dette tilfælde kan der opstå præstationsproblemer, som vi ikke oplever i meget store projekter.
På den anden side synes denne komplekse struktur at forhindre os i at opfatte visse specifikke ændringer over tid. Hver tidligere egenskab og udvikling, sammen med dens egen indre udvikling og skiftende behov, bliver pludselig en hindring for den næste og udvikling.
Når vi trækker svampen ud under os, ser vi, at den naturlige bevægelsesfrihed begynder at komme frem, da sengen er i direkte kontakt med jorden. Når svampens komfortbegrænsende effekt begynder at slide, betyder det, at bevægelsen på sengen nu reflekteres direkte på gulvet.
En sådan metafor kan betyde, at svampen giver en komfortzone og en relativt mere behagelig søvn. Zone.js ligesom denne svamp giver den en seriøs komfortzone, der lader os mærke hver forandring på overfladen. Men over tid kan denne komplekse struktur forhindre os i at opfatte visse specifikke ændringer. Lændesmerter kan opstå, når vi trækker svampen væk under os, og disse ømheder, der indikerer, at vi er gået fra kunstig til naturlig jord, og selvom denne overgang kan være lidt smertefuld, så er det i sidste ende med en lige lænd, mere behagelig søvn og bedre blodcirkulation samt sundere fysisk og mental skarphed. Når vi skifter til zone-fri, altså ryg- og ledsmerter fra at sove i en seng uden svamp, er det et godt tegn på, at vi skifter fra kunstig til naturlig jord. Selvom denne overgangsoplevelse er en smule smertefuld, forsvinder overgangssmerten også, når vores lænd begynder at omforme sig til sin tidligere naturlige tilstand, hvilket giver bedre blodcirkulation; Overgangseksemplet her svarer til det eksperimentelle Zoneless, vi hørte i Angular v18.
Zone.js menes at tilføje ekstra belastning, fordi den sporer asektron-operationer og videregiver dem til vinkeldetektionsmekanismer såsom kald, hændelser, fejl osv. I dag, når det gælder Angulars præstation, kan vi hverken se eller mærke den ekstra belastning her. Zone.js kunne udvikles yderligere, og nogle fejlfindingsproblemer kunne løses, men grundlaget her er Angulars køreplan. Vi ser, at Angulars egne internt udviklede Signals-reagerende primitive Zone.js nu står i vejen for Angulars fremtidsplaner. Selvom Signals-strukturen er meget nyttig i forhold til detektionsmekanismer og også god i ydeevne, brugervenlighed og kraftfuld, er Zone.js ikke længere nødvendig, men det er ikke et bibliotek, der kan opgives natten over.
Vi forstår, at Angular ikke ønsker at begrænse sine drømme, men snarere ønsker at bygge en mere fleksibel og pålidelig applikation med en mere selvforsynende ramme ved at eliminere mellemliggende processer så meget som muligt. Vi ser Angular bevæge sig mod en mere praktisk tilstand og forsøge at gribe muligheden for at komme ind i optrenden igen i fremtiden. Desværre kan vi ud fra den nuværende StateofJS-undersøgelse ikke sige, at det er i en sådan tendens, men vi ser også, at Angular er åben for alle mulige innovationer.
Hvordan skifter jeg til Zoneless mode i Angular 18?
Angular 18 kommer med et trin, der gør det muligt for os at skifte til zonefri tilstand og slippe af med svampen. Som vist nedenfor kan vi nu give denne oplevelse ved hjælp af ikke-zoneændringsdetektionsmekanismen i bootstrap-fasen.
Med ovenstående funktion tilføjet til udbyderen kan vi nu bruge npm afinstaller zone.js-kommandoen til at fjerne zone.js defineret i polyfills-arrayet nedenfor fra angular.json.
Nu kan vi bruge Angular Zoneless!
Hvad er fordelene ved Zoneless?
Zoneless giver et mere strømlinet økosystem for vores applikationer ved at eliminere unødvendige lytteoperationer. Det betyder hurtigere rendering, højere ydeevne, hurtigere sideindlæsninger, mindre pakkestørrelser og nemmere fejlfinding.
Tag en klassisk test, hvor du tilføjer en tæller ved at klikke på en knap, og du vil øge det tal, når du trykker på knappen. I dette tilfælde kan vi se, at den ændrede værdi gengives, når hver funktion udløses, og denne værdi ændres i HTML'en. Fordi det allerede er en funktion, og vi udløser den direkte, bliver den gengivet her. Men hvad sker der, hvis denne værdi ændrer sig på grund af eksterne påvirkninger, og vi ønsker at se enhver værdiændring uden at vi udløser den manuelt? Hvis der er en Zone.js, lytter den konstant efter alle ændringer og underretter Angular på vores vegne. Men da der ikke findes en sådan mekanisme lige nu, skal vi enten udløse ændringsdetektionsmekanismen efter en asynkron operation, eller bruge Signals eller RxJS direkte, så ændringen kan opdages direkte på grund af denne reaktivitet.
Sponges forsvinden lærer os, at det ikke kun er Zone.js, der forsvinder, men også "komfortzonen".
Hvis vi bruger Zone.js som et modul med rå JavaScript, vil det se sådan ud.
I Angular behøver vi ikke håndtere disse situationer; Med ngZone arbejder disse operationer allerede sammen med detektionsmekanismen.
For eksempel, i tilfælde af direkte DOM, event listeners, observables and commitments, HTTP-anmodninger og synkrone kontrolstrømme, skal vi manuelt udløse ændringsdetektionsmekanismen for asynkrone operationer.
Da signaler eller R xjs automatisk registrerer ændringer, er der ikke behov for at aktivere ændringsdetektionsmekanismen.
Signaleksempel:
Lad os nu skrive en applikation til at teste mekanismerne for detektion af zoneløse og vinklede ændringer og se, hvordan det fungerer.
Efter at have startet intervallet defineret ovenfor som standard, ser vi, at det begynder at virke, men DOM'en bliver ikke opdateret, og ændringerne afspejles ikke. Når vi bruger signalets startinterval, ser vi, at det fungerer uden at udløse Angulars ændringsdetekteringsmekanisme. Som du kan se, når klik-begivenheden og signalintervallet begynder, bemærker Angular ændringen, fanger straks ændringen i vores standardinterval og frigiver den derefter.
Når vi sender værdien i en variabel til moderkomponenten, finder vi, at den opfattes forskelligt i både push- og standardtilfælde.
Når vi binder inputtet til venstre, afspejles ændringen, når der ikke er noget område, og tilsvarende kan vi se, at ændringen afspejles efter klik på grund af løftet.
Her ser vi, at efter et HTTP-kald uden at opdage ændringer, reflekteres ændringerne ikke, kun når vi udløser dem manuelt. Selvfølgelig reflekterer signaler nemt nytilkomne til den ønskede skærm. Nogle af koderne er som følger:
app.component.ts
change-detection-demo.component.ts
Appen er blevet udgivet på Stacklibitz, og du kan tjekke resten af testene. Du kan også spore resultater i brugerfladen via kode.
Stackblitz:Hyperlink-login er synlig.
GitHub:Hyperlink-login er synlig.
Der er også et eksempel på en applikation nedenfor, der viser, hvordan Angulars ændringsdetekteringsmekanisme fungerer, og du kan også prøve den derfra.
Hyperlink-login er synlig.
Ting at overveje, når du skifter til regionsfri tilstand
Det er vigtigt at bemærke, at som navnet antyder, er ExperimentalZonelessChangeDetection stadig eksperimentel.
Under nogle tests bemærkede vi nogle mærkeligheder i ændringsdetektionsmekanismen. For eksempel, når nogle ændringer ikke udløses manuelt, ser vi ingen ændringer i DOM'en, og tilstanden bliver ikke opdateret. Men når et andet signal eller en reaktionsvariabel fungerer uden for ændringsdetekteringsmekanismen og får DOM til at blive opdateret, kan vi observere, at den tidligere uopdaterede tilstand også bliver opdateret.
Hvis du vil implementere denne funktion i et eksisterende projekt, bør du nøje teste alle handlinger og applikationsadfærd. Især kan tredjepartsbiblioteker være afhængige af Zone.js, hvilket kan føre til fejl og renderingsproblemer.
Oprindelig:Hyperlink-login er synlig. |
Opslået den 30-12-2024 11:02:42
|
|
|
|
Udlejer|
Opslået den 30-12-2024 kl. 11:04:13
|
