"Razmišljanje u AngularJS", ako imam pozadinu jQuery?

Pretpostavimo da sam upoznat s razvojem klijentskih aplikacija u jQuery , ali sada bih želio početi koristiti AngularJS . Možete li opisati potrebnu promjenu paradigme? Evo nekoliko pitanja koja vam mogu pomoći u oblikovanju odgovora:

  • Kako mogu drugačije izraditi i izraditi web-aplikacije klijenata? U čemu je razlika?
  • Što trebam prestati raditi / koristiti; Umjesto čega trebam početi raditi / koristiti?
  • Postoje li ikakva razmatranja / ograničenja na strani poslužitelja?

Ne tražim detaljnu usporedbu između jQuery i AngularJS .

4523
21 февр. postavila Mark Rajcok 21. veljače 2013-02-21 07:09 '13 u 7:09 2013-02-21 07:09
@ 15 odgovora

1. Ne stvarajte svoju stranicu, a zatim je promijenite pomoću DOM manipulacije

U jQuery kreirate stranicu i dinamički je kreirate. To je zbog činjenice da je jQuery dizajniran da raste i nevjerojatno raste iz ove jednostavne pretpostavke.

Ali u AngularJS-u morate početi od nule, imajući na umu vašu arhitekturu. Umjesto da mislim da "imam ovaj komad DOM-a, i želim to učiniti, napravite X", trebali biste početi s onim što želite, a zatim početi razvijati svoju aplikaciju, a zatim konačno početi razvijati prezentaciju.

2. Ne povećavajte jQuery s AngularJS

Isto tako, nemojte početi s idejom da jQuery čini X, Y i Z, pa ću samo dodati AngularJS na vrhu ovoga za modele i kontrolere. To je doista primamljivo kada tek počinjete, tako da uvijek preporučujem da novi programeri AngularJS-a uopće ne koriste jQuery, barem dok se ne naviknu na ono što su napravili “Angular way”.

Vidio sam mnogo razvojnih inženjera ovdje i na popisu za slanje koji stvaraju ova složena rješenja s jQuery dodatcima od 150 ili 200 redova koda koji se zatim lijepe zajedno u AngularJS s skupom povratnih poziva i $apply koji zbunjuju i zbunjuju; ali na kraju oni rade! Problem je u tome što u većini slučajeva, kada se jQuery plugin može prepisati u AngularJS u isječku koda, gdje sve iznenada postaje jasno i razumljivo.

Zaključak je da: pri rješavanju problema najprije "mislite u AngularJS"; ako ne možete pronaći rješenje, pitajte zajednicu; ako nakon svega toga nema jednostavnog rješenja, slobodno kontaktirajte jQuery. Ali ne dopustite da jQuery postane štaka, ili nikada nećete ovladati AngularJS-om.

3. Uvijek razmislite o arhitekturi.

Najprije se zna da su aplikacije na jednoj stranici aplikacije. Ovo nije web stranica. Stoga moramo razmišljati kao programer na strani poslužitelja, a ne razmišljati kao razvojni klijent. Moramo razmisliti o tome kako podijeliti našu aplikaciju na odvojene, proširive komponente koje se mogu testirati.

Pa kako to radiš? Što mislite u AngularJS-u? Evo nekih općih načela, za razliku od jQuery.

Podnesak je "službeni zapisnik"

U jQuery, programski mijenjamo pogled. Možda imamo padajući izbornik označen kao:

Home </li> <li> <a href="#/menu1">Menu 1</a> <ul> <li><a href="#/sm1">Submenu 1</a></li> <li><a href="#/sm2">Submenu 2</a></li> <li><a href="#/sm3">Submenu 3</a></li> </ul> </li> <li> <a href="#/home">Menu 2</a> </li> </ul> 

U jQuery, u našoj aplikacijskoj logici, aktivirali bismo je s nečim poput:

 <ul class="main-menu" dropdown-menu> ... </ul> 

Ove dvije rade isto, ali u verziji AngularJS, svatko tko pogleda predložak zna što se treba dogoditi. Kad god se pridruži novi član razvojnog tima, može ga pogledati i znati da je dropdownMenu direktiva na mjestu; ne mora unijeti točan odgovor ili prosijati bilo koji kôd. Pogled nam je rekao što će se dogoditi. Mnogo čišće.

Programeri koji su novi u AngularJS-u često pitaju kako pronaći sve linkove određene vrste i dodati im direktive. Programer je uvijek zapanjen kad mi odgovorimo: nemate. Ali razlog zašto to ne učinite je da je to poput polu-jQuery, pola AngularJS i ništa dobro. Problem je u tome što programer pokušava "izvršiti jQuery" u kontekstu AngularJS-a. Nikada neće uspjeti. Podnesak je službeni unos. Izvan direktive (više o ovome dolje) nikada ne mijenjate DOM. Smjernice se primjenjuju u podnesku, tako da je namjera jasna.

Zapamtite: ne stvarajte, a zatim označite. Morate arhitekta, a zatim dizajn.

Vezivanje podataka

Ovo je definitivno jedna od najupečatljivijih značajki AngularJS-a i izostavlja mnogo potrebe da se izvrši vrsta DOM manipulacija koje sam spomenuo u prethodnom odjeljku. AngularJS će automatski ažurirati vašu prezentaciju tako da ne morate! U jQuery odgovaramo na događaje, a zatim ažuriramo sadržaj. Nešto poput:

 <ul class="messages" id="log"> </ul> 

Osim miješanja problema, imamo i iste probleme koji označavaju namjere koje sam ranije spomenuo. Ali još važnije, morali smo ručno pozvati i ažurirati DOM čvor. A ako želimo izbrisati unos dnevnika, moramo također kopirati DOM kod. Kako testirati logiku odvojeno od DOM-a? A što ako želimo promijeniti prezentaciju?

Malo je neuredno i sitno krhko. Ali u AngularJS-u to možemo učiniti:

 <ul class="messages"> <li ng-repeat="entry in log">{{ entry.msg }}</li> </ul> 

Ali u tom pogledu, naš pogled može izgledati ovako:

22 февр. Odgovor koji je dao Josh David Miller 22. veljače 2013-02-22 00:26 '13 u 0:26 2013-02-22 00:26

Imperativ → deklarativan

U jQuery, selektor se koristi za traženje DOM-a , a zatim povezivanje / registriranje rukovaoca događaja. Kada se događaj pokrene, ovaj (imperativ) kod ažurira / modificira DOM.

U AngularJS-u želite razmišljati o pogledima , a ne o DOM elementima. HTML reprezentacije (deklarativne) koje sadrže AngularJS direktive , Smjernice postavljaju rukovatelje događajima iza kulisa za nas i daju nam dinamičko vezanje podataka. Selektori se rijetko koriste, tako da je potreba za identifikatorima (i nekim tipovima klasa) znatno smanjena. Prikazi su povezani s modelima (kroz područja). Prikazi su projekcija modela. Modeli za promjenu događaja (tj. Podataka, svojstva regije) i prikaza koji automatski oblikuju te modele.

U AngularJS-u razmislite o modelima, a ne o jQuery odabranim DOM elementima koji sadrže vaše podatke. Zamislite ideje kao projekcije ovih modela, umjesto da registrirate povratne pozive kako biste manipulirali onim što korisnik vidi.

Razdvajanje problema

jQuery koristi nenametljiv JavaScript - ponašanje (JavaScript) je odvojeno od strukture (HTML).

AngularJS koristi kontrolere i smjernice (od kojih svaka može imati vlastite kontrolne i / ili kompajlirne i link funkcije) kako bi uklonila ponašanje iz pogleda / strukture (HTML). Angular također ima usluge i filtre koji pomažu u podjeli / organizaciji vaše prijave.

border=0

Pogledajte i solopackaging.ru.site/questions/511 / ...

Dizajn aplikacije

Jedan pristup razvoju aplikacije AngularJS:

  • Razmislite o svojim modelima. Izradite usluge ili vlastite JavaScript objekte za te modele.
  • Razmislite o tome kako želite predstaviti svoje modele - svoje poglede. Stvorite HTML predloške za svaku prezentaciju, koristeći potrebne smjernice za dobivanje dinamičkih podataka.
  • Priključite kontroler na svaki prikaz (koristeći ng-view i usmjeravanje ili ng-kontroler). Zatražite od dispečera da pronađe / dohvati samo bilo koje podatke modela koje bi pogledi trebali izvesti. Učinite da kontroleri budu što tanji.

Nasljeđivanje prototipa

Možete mnogo učiniti s jQuery bez znanja kako prototip JavaScript djeluje. Prilikom razvijanja AngularJS aplikacija izbjeći ćete uobičajene pogreške ako dobro razumijete JavaScript nasljedstvo. Preporučena literatura: Koje su nijanse prototipa / prototipa nasljednog volumena u AngularJS?

408
ответ дан Mark Rajcok 21 февр. '13 в 7:09 2013-02-21 07:09

AngularJS vs. jQuery