„Jei galvoju apie„ AngularJS “, jei turiu fone„ jQuery “?

Tarkime, kad esu susipažinęs su kliento programų kūrimu jQuery , bet dabar norėčiau pradėti naudoti „ AngularJS“ . Ar galite apibūdinti reikalingą paradigmos kaitą? Štai keletas klausimų, kurie gali padėti jums sukurti atsakymą:

  • Kaip skirtingai kurti ir kurti kliento žiniatinklio programas? Koks skirtumas?
  • Ką turėčiau nustoti daryti / naudoti; Ką turėčiau pradėti daryti / naudoti?
  • Ar yra kokių nors serverio pusės svarstymų / apribojimų?

Nenoriu AngularJS jQuery ir AngularJS detalių palyginimų.

4523
21 февр. vasario 21 d 2013-02-21 07:09 '13, 7:09, 2013-02-21 07:09
@ 15 atsakymų

1. Nesukurkite savo puslapio ir pakeiskite jį naudodami DOM manipuliaciją

JQuery sistemoje sukuriate puslapį ir sukuriate jį dinamiškai. Taip yra dėl to, kad jQuery buvo sukurta augti ir išaugo neįtikėtinai iš šios paprastos prielaidos.

Tačiau AngularJS turite pradėti nuo nulio, turint omenyje savo architektūrą. Užuot galvoję, kad „turiu šį DOM kūrinį, ir aš noriu tai padaryti, padaryti X“, turėtumėte pradėti nuo to, ko norite, ir tada pradėti plėtoti savo paraišką, o tada pagaliau pradėti kurti savo pristatymą.

2. Nepadidinkite jQuery su „AngularJS“

Panašiai nepradėkite su idėja, kad „jQuery“ atlieka „X“, „Y“ ir „Z“, taigi aš tik pridėsiu prie „AngularJS“ modelių ir valdiklių. Tai tikrai vilioja, kai tik pradedate, todėl visada rekomenduoju, kad nauji „AngularJS“ kūrėjai niekada nenaudotų jQuery, bent jau tol, kol jie priprasti prie „kampinio kelio“.

Aš mačiau daug kūrėjų čia ir adresų sąraše sukurkite šiuos sudėtingus sprendimus, kuriuose yra 150 arba 200 kodų jQuery įskiepių, kurie po to yra suklijuojami AngularJS su keliais atšaukimais ir $apply kurie supainioti ir supainioti; bet galų gale jie dirba! Problema ta, kad daugeliu atvejų, kai jQuery įskiepiai gali būti perrašomi AngularJS kodo fragmente, kur staiga viskas tampa aiški ir suprantama.

Esmė yra ta, kad: sprendžiant problemą, pirmiausia „mąstykite AngularJS“; jei negalite rasti sprendimo, paklauskite bendruomenės; jei galų gale nėra paprasto sprendimo, susisiekite su jQuery. Bet neleiskite, kad jQuery taptų ramentu, arba niekada neišgirsite „AngularJS“.

3. Visada galvokite apie architektūrą.

Pirmiausia žinoma, kad vieno puslapio programos yra programos. Tai nėra interneto puslapis. Todėl mes turime galvoti kaip serverio pusės kūrėjas, o ne galvoti kaip kliento kūrėjas. Turime galvoti apie tai, kaip padalyti savo paraišką į atskirus, išplečiamus, išbandomus komponentus.

Taigi, kaip jūs tai darote? Ką manote AngularJS? Štai keletas bendrų principų, skirtingai nei jQuery.

Pateikimas yra „oficialus įrašas“

„JQuery“ programiniu būdu keičiame vaizdą. Mes galime turėti išskleidžiamąjį meniu, pavadintą ul kaip:

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> 

„JQuery“ programoje, taikomojoje logikoje, ją suaktyvintume tokiu būdu:

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

Šie du daro tą patį, tačiau AngularJS versijoje kiekvienas, kuris žiūri į šabloną, žino, kas turi įvykti. Kai tik atsiranda naujas vystymo komandos narys, ji gali tai pažvelgti ir žinoti, kad yra parengta „ dropdownMenu direktyva; ji neturi įvesti teisingo atsakymo ar persijoti per bet kurį kodą. Išvaizda mums pasakė, kas nutiks. Daug švaresnis.

AngularJS nauji kūrėjai dažnai klausia, kaip rasti visus tam tikros rūšies ryšius ir pridėti direktyvas. Kūrėjas visada stulbinamas, kai atsakome: jūs ne. Bet priežastis, dėl kurios jūs to nedarote, yra tai, kad tai yra pusiau jQuery, pusiau AngularJS ir nieko gero. Problema yra ta, kad kūrėjas bando „vykdyti„ jQuery “„ AngularJS “kontekste. Jis niekada neveiks gerai. Pateikimas yra oficialus įrašas. Ne direktyvoje (daugiau apie tai žr. Toliau) niekada nekeiskite DOM. Ir pateikiant direktyvas taikomos, todėl ketinimas yra aiškus.

Atminkite: nesukurkite ir pažymėkite. Jūs turite architektą ir tada dizainą.

Duomenų įpareigojimas

Tai neabejotinai vienas iš nuostabiausių „AngularJS“ bruožų, ir labai mažai reikia padaryti tai, ką aš minėjau ankstesniame skyriuje. „AngularJS“ automatiškai atnaujins jūsų pristatymą, taigi jums nereikės! „JQuery“ atsakome į įvykius ir atnaujiname turinį. Kažkas panašaus:

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

Be problemų maišymo, mes taip pat turime tas pačias problemas, kurios reiškia anksčiau minėtus ketinimus. Bet dar svarbiau, kad mes turėjome rankiniu būdu kreiptis ir atnaujinti DOM mazgą. Ir jei norime ištrinti žurnalo įrašą, taip pat turime nukopijuoti DOM kodą. Kaip išbandyti logiką atskirai nuo DOM? O kas, jei norime pakeisti pristatymą?

Tai šiek tiek nepatogus ir truputį trapus. Tačiau AngularJS mes galime tai padaryti:

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

Tačiau šiuo požiūriu mūsų požiūris gali atrodyti taip:

problemų atskyrimą ir suteikia daug didesnę patikrinimo galimybę.  Kiti atsakymai paminėjo šį klausimą, todėl paliksiu tik tai. 

Problemų atskyrimas

Ir visi aukščiau minėti klausimai sieja šią sudėtingą temą: išlaikykite atskiras problemas. Jūsų nuomonė yra oficialus pranešimas apie tai, kas turėtų įvykti (daugiausia); jūsų modelis atspindi jūsų duomenis; jūs turite paslaugų lygį, kad galėtumėte atlikti pakartotines užduotis; manipuliuoti DOM ir išplėsti savo nuomonę su direktyvomis; ir jūs visi kartu su valdikliais. Tai taip pat paminėta kituose atsakymuose, o vienintelis dalykas, kurį norėčiau pridėti, yra susijęs su bandomumu, kurį aptarsiu kitame skyriuje.

Įgalinti priklausomybes

Padėti mums išspręsti problemas, priklausomybės injekciją (DI). Jei naudojate serverio pusės kalbą (iš „ Java“ į „ PHP“ ), tikriausiai jau esate susipažinę su šia koncepcija, bet jei esate „jQuery“ kliento vaikinas, ši koncepcija gali atrodyti kaip kažkas nuo kvailo iki nereikalingo šypsenos. Tačiau taip nėra: -)

Iš plačios perspektyvos DI reiškia, kad jūs galite laisvai deklaruoti komponentus, o tada iš bet kurio kito komponento, tiesiog paprašykite jo kopijos ir ji bus pateikta. Jums nereikia žinoti įkrovos tvarkos, failų vietos ar panašaus. Jėga gali būti ne iš karto matoma, bet aš pateiksiu tik vieną (bendrą) pavyzdį: testavimas.

Tarkime, mūsų taikomojoje programoje mums reikia tarnybos, kuri įgyvendina serverio saugojimą per REST API ir, priklausomai nuo programos būklės, saugojimas taip pat yra vietinis. Atlikdami bandymus su mūsų valdikliais, nenorime susisiekti su serveriu - mes vis dar išbandome valdiklį. Mes galime paprasčiausiai pridėti tokį pat pavadinimą kaip ir mūsų originalus komponentas, o purkštuvas garantuos, kad mūsų valdytojas automatiškai gaus netikrą - mūsų valdytojas nežino ir neturėtų žinoti skirtumo.

Kalbėjimas apie bandymus ...

4. Testu pagrįstas vystymasis - visada

Tai iš tiesų yra 3 skirsnio „Architektūra“ dalis, tačiau taip svarbu, kad jį pateikčiau savo aukščiausio lygio skyriuje.

Iš visų daugelio jQuery įskiepių, kuriuos matėte, naudojote ar rašėte, kiek iš jų turėjo kompaniono testo rinkinį? Ne labai daug, nes jQuery tai nėra labai priimtina. Bet AngularJS yra.

JQuery, vienintelis būdas išbandyti yra sukurti komponentą savarankiškai su pavyzdiniu / demonstraciniu puslapiu, kuriuo mūsų bandymai gali atlikti DOM manipuliacijas. Taigi, mes turime sukurti komponentą atskirai ir tada jį integruoti į mūsų taikomąją programą. Kaip nepatogu! Tiek daug laiko, kuriant su „jQuery“, vietoj bandymo grindžiamo kūrimo pasirenkame iteracinį variantą. O kas gali mus kaltinti?

Bet kadangi mes turime atskirti problemas, mes galime iteratyviai testuoti vystymąsi „AngularJS“! Pvz., Tarkime, kad norime, kad supersimple direktyva mūsų meniu parodytų, koks yra mūsų dabartinis maršrutas. Mes galime pasakyti, ko norime, mūsų paraiškos požiūriu:

 

Na, dabar mes galime parašyti egzistuojančios direktyvos nebuvimo testą:

 

Ir kai mes atliekame bandymą, galime patvirtinti, kad jis nepavyksta. Tik dabar turime sukurti mūsų direktyvą:

 .directive( 'myDirective', function () { return { template: '<a class="btn">Toggle me!</a>', link: function ( scope, element, attrs ) { var on = false; $(element).click( function () { on = !on; $(element).toggleClass('active', on); }); } }; }); 

Yra keletas klaidų:

  • Pirma, jQuery niekada nebuvo reikalaujama. Čia mes nieko nedarėme, kad jQuery iš viso reikėjo!
  • Antra, net jei mūsų puslapyje jau yra jQuery, nėra pagrindo jį naudoti čia; mes galime tiesiog naudoti angular.element , o mūsų komponentas vis dar veiks, kai pateksite į projektą, kuriame nėra jQuery.
  • Trečia, net jei manoma, kad ši direktyva reikalauja jQuery, jqLite ( angular.element ) visada naudos jQuery, jei ji bus pakrauta! Taigi nereikia naudoti $ - mes galime naudoti angular.element .
  • Ketvirtasis, glaudžiai susijęs su trečiuoju, yra tas, kad jqLite elementai neturėtų būti įvynioti į $ - element , kuris perduodamas link funkcijai, jau bus jQuery elementas!
  • Penkta, ką minėjome ankstesniuose skyriuose, kodėl mes sujungiame šabloninę medžiagą į mūsų logiką?

Ši direktyva gali būti perrašyta (net ir labai sudėtingais atvejais).

7185
22 февр. Josh David Miller atsakymas vasario 22 d 2013-02-22 00:26 '13 prie 0:26 2013-02-22 00:26

Imperatyvus → deklaracinis

„JQuery“ programoje selektorius naudojamas ieškoti DOM ir tada susieti / registruoti įvykių tvarkytojus. Kai įvykis įvyksta, šis (būtinas) kodas atnaujina / pakeičia DOM.

AngularJS, jūs norite galvoti apie nuomones , o ne apie DOM elementus. HTML vaizdai (deklaratyvūs), kuriuose yra AngularJS direktyvų . Direktyvose nustatomi įvykių tvarkytojai už scenos už mus ir dinamiški duomenys privalomi. Rinkėjai retai naudojami, todėl žymių (ir tam tikrų klasių tipų) poreikis yra žymiai sumažintas. Peržiūros yra susietos su modeliais (per sritis). Peržiūros yra modelio projekcija. Modeliai, kuriais keičiami įvykiai (t. Y. Duomenys, regiono ypatybės) ir vaizdai, kurie sukuria šiuos modelius „automatiškai“.

AngularJS, pagalvokite apie modelius, o ne JQuery pasirinktus DOM elementus, kuriuose yra jūsų duomenys. Pagalvokite apie idėjas, kaip šių modelių prognozes, o ne užregistruokite skambučius, kad manipuliuotumėte, ką mato vartotojas.

Problemų atskyrimas

jQuery naudoja nepastebimą „JavaScript“ - elgsena („JavaScript“) yra atskirta nuo struktūros (HTML).

„AngularJS“ naudoja valdiklius ir direktyvas (kurių kiekvienas gali turėti savo valdiklį ir (arba) kompiliavimo ir nuorodų funkcijas), kad pašalintų elgesį iš peržiūros / struktūros (HTML). Kampas taip pat turi paslaugas ir filtrus , padedančius padalinti / organizuoti jūsų programą.

border=0

Taip pat žiūrėkite ngn-wiki.ru.site/questions/511 / ...

Programos dizainas

Vienas iš būdų plėtoti „AngularJS“ programą:

  • Pagalvokite apie savo modelius. Šiems modeliams sukurkite paslaugas ar savo „JavaScript“ objektus.
  • Pagalvokite, kaip norite pristatyti savo modelius - savo nuomonę. Sukurkite HTML šablonus kiekvienam pristatymui, naudodami būtinas direktyvas, kad gautumėte dinamišką duomenų prijungimą.
  • Prie kiekvieno rodinio prijunkite valdiklį (naudodami ng-view ir routing arba ng-controller). Paprašykite dispečerio surasti / gauti tik bet kokius modelio duomenis, kuriuos turi atlikti vaizdai. Padarykite valdiklius kuo plonesnius.

Prototipo paveldėjimas

JQuery galite daug nuveikti, nežinodami, kaip veikia „JavaScript“ paveldėjimo darbas. Kurdami „AngularJS“ programas, vengsite kai kurių dažniausiai pasitaikančių klaidų, jei gerai suprantate „JavaScript“ paveldėjimą. Rekomenduojamas skaitymas: Kokie yra „AngularJS“ prototipo / prototipo paveldėjimo apimties niuansai?

408
21 февр. Mark Rajcok atsakymas 21 vasaris 2013-02-21 07:09 '13, 7:09, 2013-02-21 07:09

AngularJS vs jQuery

AngularJS ir jQuery priima visiškai skirtingas ideologijas. Если вы отправляетесь из jQuery, вы можете обнаружить некоторые отличия от удивления. Angular может рассердить вас.