Share
Cu mult timp în urmă, într-o galaxie departe, departe, JavaScript era un limbaj urât. De fapt, "ura" este o subevaluare; JavaScript era un limbaj disprețuit. Ca rezultat, dezvoltatorii i-au tratat în general, ca atare, doar înclinându-și degetele de la picioarele în apele JavaScript, atunci când aveau nevoie să stropească un pic de fler în aplicațiile lor. În ciuda faptului că există o mulțime de bine în limba JavaScript, din cauza ignoranței pe scară largă, puțini au avut timp să învețe cum trebuie. În schimb, cum vă amintiți unii dintre dvs., utilizarea standard a JavaScript a implicat o cantitate semnificativă de copiere și lipire.
"Nu vă deranjați să aflați ce face codul, sau dacă urmează cele mai bune practici; pur și simplu lipiți-l!" - Cel mai rău sfat vreodată
Deoarece apariția jQuery a reinițiat interesul pentru limbajul JavaScript, o mare parte din informațiile de pe web sunt un pic obișnuite.
În mod ironic, se pare că o mare parte din ceea ce o urăște comunitatea de dezvoltare nu avea prea multe de-a face cu limba JavaScript. Nu, amenințarea reală sub mască a fost DOM sau "Document Object Model", care, mai ales în acel moment, era inconsistentă de la browser la browser. "Sigur, ar putea funcționa în Firefox, dar cum rămâne cu IE8? Bine, poate că funcționează în IE8, dar cum rămâne cu IE7?" Lista continuă neobosit!
Din fericire, începând cu aproximativ cinci ani în urmă, comunitatea JavaScript ar vedea o schimbare incredibilă spre bine, deoarece bibliotecile precum jQuery au fost introduse publicului. Nu numai că aceste biblioteci oferă o sintaxă expresivă care a fost deosebit de atrăgătoare pentru designerii de web, dar au reușit, de asemenea, să-și alinieze simțul jocului prin împrăștierea soluțiilor de rezolvare a diferitelor ciudățenii de browser în API-ul său. trăgaci $ .ajax și lăsați jQuery să facă partea dificilă. Realizați rapid spre astăzi și comunitatea JavaScript este mai vibrantă decât oricând - în mare parte datorită revoluției jQuery.
Deoarece creșterea jQuery a reinițiat interesul pentru limba JavaScript, o mare parte din informația de pe web este un pic cam înclinată. Acest lucru este mai puțin datorită ignoranței scriitorilor și mai mult rezultatul faptului că învățam cu toții. Este nevoie de timp pentru ca cele mai bune practici să apară.
Din fericire, comunitatea sa maturizat foarte mult din acele zile. Înainte de a ne arunca cu privire la unele dintre cele mai bune practici, să aruncăm mai întâi câteva sfaturi proaste care au circulat pe web.
Problema cu sfaturi ca aceasta este că ei iau ideea de pre-optimizare la o extremă.
La fel ca Ruby on Rails, prima introducere a dezvoltatorilor în JavaScript a fost prin jQuery. Acest lucru duce la un ciclu obișnuit: învățați jQuery, îndrăgostiți, sapa în vanilla JavaScript și nivelul în sus.
Deși nu există nimic în neregulă cu acest ciclu, acesta a deschis drumul pentru nenumărate articole, care le-au recomandat utilizatorilor nu folosiți jQuery în diverse situații, datorită "problemelor de performanță". Nu ar fi neobișnuit să citiți că este mai bine să folosiți vanilie pentru bucle, peste $ .each. Sau, la un moment dat sau altul, ați fi putut citi că este cea mai bună practică de a utiliza document.getElementsByClassName peste motorul lui Joyery, Sizzle, pentru că este mai rapid.
Problema cu sfaturi ca aceasta este că ei iau ideea de pre-optimizare la o extremă, și nu iau în considerare diferite inconsecvențe de browser - lucrurile pe care jQuery le-a fixat pentru noi! Rularea unui test și observarea unei economii de câteva milisecunde peste mii de repetări nu este un motiv pentru a renunța la jQuery și la sintaxa sa elegantă. Timpul tău este mult mai bine investit în modificarea părților din aplicația ta, care vor avea de fapt o diferență, cum ar fi dimensiunea imaginilor tale.
Acest al doilea model anti-model a fost, din nou, rezultatul comunității (inclusiv al tău cu adevărat la un moment dat), care nu a înțeles pe deplin ce se petrece sub capota jQuery. Ca atare, probabil ați întâlnit (sau ați scris-vă) codul, care a împachetat un element în obiectul jQuery nenumărate ori într-o funcție.
Accentsconagua
$ ('button.confirm') pe ('click', functie () // Do it once $ ('. ('activ'); // Și din nou pentru bună măsură $ ('modal'). css (...);); În timp ce acest cod ar putea părea inofensiv (și este adevărat, în marea schemă a lucrurilor), urmărim practica proastă de a crea mai multe instanțe ale obiectului jQuery. De fiecare dată când ne referim $ ( 'Modal'), un nou obiect jQuery este generat. Este inteligent?
Gândiți-vă la DOM ca piscină: de fiecare dată când sunați
$ ( 'Modal'), jQuery se scufundă în piscină și vânează monedele (sau elementele) asociate. Când interogați în mod repetat DOM pentru același selector, în esență, aruncați acele monede înapoi în apă, doar pentru a sari și pentru a le găsi din nou peste tot!
Selectați întotdeauna selectorii de lanț dacă intenționați să le utilizați mai mult de o dată. Fragmentul de cod anterior poate fi refactat la:
$ ('button.confirm') pe ('click', functie () $ ('. modal') .modal () .addClass ('activ ') .css (...); Alternativ, utilizați "cache".
$ ('button.confirm') pe ('click', functie () // Do it ONLY once modal modal = '(modal'); ; modal.css (...);); Cu această tehnică, jQuery sare în piscina DOM un total de o dată, mai degrabă decât trei.
O atenție prea mare este acordată performanței selectorului.
Deși nu la fel de omniprezent în aceste zile, nu cu mult timp în urmă, web-ul a fost bombardat de nenumărate articole despre optimizarea performanței selectorului în jQuery. De exemplu, este mai bine să o utilizați $ ('div p') sau $ ( 'Div'). Găsi ( 'p')?
Gata pentru adevăr? Nu contează cu adevărat. Este cu siguranță o idee bună să aveți o înțelegere de bază a modului în care motorul jQuery Sizzle analizează interogările selectorului de la dreapta la stânga (ceea ce înseamnă că este mai bine să fii mai specific la sfârșitul selectorului decât la început). Și, bineînțeles, cu cât mai specifică poate fi, cu atât mai bine. Clar, $ ( 'A.button') este mai bună pentru performanță decât (Butonul '') $, datorită faptului că, cu primul, jQuery este capabil să limiteze căutarea numai la elementele de ancorare de pe pagină, mai degrabă decât toate elementele.
Dincolo de aceasta, totuși, prea multă atenție este acordată performanței selectorului. Când sunteți îndoieli, puneți-vă încrederea în faptul că echipa jQuery este compusă din cei mai buni dezvoltatori JavaScript din industrie. Dacă în bibliotecă există un impuls de performanță, ei o vor fi descoperit. Și dacă nu ei, unul dintre membrii comunității va depune o cerere de tragere.
Având în vedere acest lucru, fii conștient de selectorii tăi, dar nu te îngriji prea mult de implicațiile de performanță, dacă nu poți să verbalizi de ce este necesar.
jQuery a încurajat utilizarea pe scară largă a funcțiilor de apel invers, care pot oferi cu siguranță o comoditate plăcută. În loc să declarați o funcție, pur și simplu utilizați o funcție de apel invers. De exemplu:
$ ('a.external') pe ('click', funcția () // această funcție de apel inversă este declanșată // atunci când se face clic pe .extern); Ați scris cu siguranță o mulțime de cod care arată exact așa; Știu că am! Atunci când sunt utilizate cu ușurință, funcțiile de apel invers anonim servesc ca facilități utile. Frecarea se produce pe linie, când intrăm ... iadul de apel (declanșarea sunetului de fulger)!
Callback iad este atunci când codul dvs. indent în sine de numeroase ori, în timp ce continuați cuibări funcții de apel invers.
Luați în considerare următoarele coduri de mai jos:
$ (this) .fadeOut (400, function () $ .ajax (// ... succes: funcția (date) anchor.fadeIn (400, funcția () // tocmai ați introdus iadul de apel);))););
Ca regulă de bază, cu cât este mai mult codul tău, cu atât este mai probabil ca un miros de cod. Sau, mai bine, întrebați-vă, codul meu arată ca Mighty Ducks Flying V?
Atunci când codul de refactorizare, cum ar fi acest lucru, cheia este să vă întrebați: "Cum ar putea fi testat acest lucru?" În acest bit aparent simplu de cod, un ascultător al evenimentului este legat de o legătură, elementul se estompează, se face un apel AJAX, după succes, elementul se estompează, probabil, datele rezultate vor fi adăugate undeva. Sigur că e mult de testat!
Nu ar fi mai bine să împărțiți acest cod în mai multe bucăți mai ușor de verificat și mai ușor de verificat? Cu siguranță. Deși următoarele pot fi optimizate în continuare, un prim pas spre îmbunătățirea acestui cod ar putea fi:
var updatePage = funcția (el, date) // adăuga date preluate DOM; var fetch = funcția (ajaxOptions) ajaxOptions = ajaxOptions || // url: ... // dateType: ... succes: updatePage; retur $ .ajax (ajaxOptions); ; $ ('a.data') pe ('click', functie () $ (this) .fadeOut (400, preluare);); Chiar mai bine, dacă aveți o varietate de acțiuni care să declanșeze, trebuie să conțină metodele relevante din cadrul unui obiect.
Gândiți-vă cum, într-un restaurant fast-food, cum ar fi McDonalds, fiecare lucrător este responsabil pentru o sarcină. Joe face cartofii prajiti, Karen inregistreaza clientii, iar burgerii de gratar Mike. Dacă toți cei trei membri ai personalului au făcut totul, acest lucru ar introduce o varietate de probleme de întreținere. Când trebuie implementate schimbări, trebuie să ne întâlnim cu fiecare persoană pentru a le discuta. Cu toate acestea, dacă, de exemplu, îl vom păstra pe Joe exclusiv pe cartofi prăjiți, ar trebui să adaptăm instrucțiunile pentru pregătirea cartofilor de cartofi, trebuie doar să vorbim cu Joe și cu nimeni altcineva. Ar trebui să adoptați o abordare similară cu codul dvs.; fiecare funcție este responsabilă pentru o singură sarcină.
În codul de mai sus, aduce funcția declanșează doar un apel AJAX la adresa URL specificată. updatePage funcția acceptă unele date și o adaugă DOM. Acum, dacă vrem să testăm una dintre aceste funcții pentru a ne asigura că funcționează așa cum era de așteptat, de exemplu, updatePage , putem să batem obiectul de date și să îl trimitem către funcție. Uşor!
Este important să ne amintim că ecosistemul jQuery sa maturizat foarte mult în ultimii ani. Șansele sunt, dacă aveți nevoie de o anumită componentă, atunci altcineva le-a construit deja. Desigur, continuați să construiți pluginuri pentru a vă îmbunătăți înțelegerea bibliotecii jQuery (de fapt, vom scrie unul în acest articol), dar, pentru utilizarea în lumea reală, se referă la eventualele plugin-uri existente înainte de reinventarea roții.
De exemplu, aveți nevoie de un selector de date pentru un formular? Salvați-vă locul de muncă și, în schimb, profitați de biblioteca jQuery UI bazată pe comunitate și testată.
După ce faceți referință la biblioteca jQuery UI și la foaia de stiluri asociată, procesul de adăugare a unui selector de date la o intrare este la fel de ușor ca și cum faceți:
Sau un acordeon? Sigur, ați putea să scrieți acea funcționalitate, sau, din nou, să profitați de interfața jQuery.
Pur și simplu creați marcajul necesar pentru proiectul dvs..
Capitolul 1
Un text.
capitolul 2
Un text.
capitolul 3
Un text.
Secțiunea 4
Un text.
Atunci, automagic transforma-l într-un acordeon.
$ (functie () $ ("# acordeon"). acordeon ();); 
Dacă ați putea să creați file în treizeci de secunde?
Creați marcarea:
- Despre noi
- Misiunea noastră
- Intrați în contact
Despre noi text.
Textul misiunii noastre.
Luați legătura cu textul.
Și activează pluginul.
$ (functie () $ ("# tabs") tabs ();); Terminat! Nu necesită nici măcar o înțelegere notabilă a JavaScript.
Să facem acum câteva bune practici pentru construirea pluginurilor jQuery, pe care trebuie să le faceți la un moment dat în cariera dvs. de dezvoltare.
Vom folosi o relativ simplă MessageBox plugin ca demo pentru învățarea noastră. Simțiți-vă liber să lucrați împreună; de fapt, te rog!
Atribuirea: implementați funcționalitatea necesară pentru afișarea casetelor de dialog utilizând sintaxa, $ .message ('SAY TO USER'). În acest fel, de exemplu, înainte de a șterge definitiv o înregistrare, putem cere utilizatorului să confirme acțiunea, mai degrabă decât să recurgă la inflexibil și urât alerta cutii.
Primul pas este să dai seama cum să "activezi" $ .message. În loc să extinem prototipul jQuery, pentru cerințele acestui plugin, trebuie doar să atașăm o metodă la spațiul de nume jQuery.
(funcția ($) $ .message = funcția (text) console.log (text);;) (jQuery);
Este la fel de ușor ca asta; dă-i drumul, încercați! Când sunați $ .message ('Aici este mesajul meu'), acel șir ar trebui să fie înregistrat în consola browserului (Shift + Command + i, în Google Chrome).
Deși nu este suficient spațiu pentru a acoperi procesul de testare a pluginului, acesta este un pas important pe care ar trebui să-l cercetați. Există un sentiment uimitor de siguranță care apare atunci când codul testat de refactorizare.
De exemplu, atunci când folosim suita de test jQuery, Qunit, am putea încerca să conducem codul de la Pasul 1 scriind:
modulul ('jQuery.message', test ('este disponibil în spațiul de nume jQuery', 1, funcția () ok (mesajul $, metoda mesajului trebuie să existe ');); O.K funcția, disponibilă prin intermediul Qunit, afirmă pur și simplu că primul argument este o valoare trută. În cazul în care mesaj metoda nu există în spațiul de nume jQuery, atunci fals va fi returnat, caz în care testul nu reușește.
Urmând modelul de dezvoltare bazat pe teste, acest cod ar fi primul pas. După ce ați observat că testul eșuează, următorul pas ar fi adăugarea acestuia mesaj metodă, în consecință.
În timp ce, pentru scurt timp, acest articol nu se va îndrepta mai departe către procesul de dezvoltare bazat pe teste în JavaScript, sunteți încurajat să vă referiți la repo-ul GitHub pentru acest proiect pentru a revizui toate testele pentru plugin: https: // github .com / JeffreyWay / messageBox / pată de cerneală / master / testare / MessageBox_test.js
A mesaj metoda care nu face nimic nu este de ajutor pentru nimeni! Să luăm mesajul furnizat și să îl afișăm utilizatorului. Cu toate acestea, mai degrabă decât încorporarea unui glob imens de cod în $ .message , vom folosi pur și simplu funcția pentru a instanția și a inițializa o Mesaj obiect.
(functie ($) "use strict"; var Mesaj = initialize: function (text) this.text = text; - returnați Object.create (Mesaj) .initialize (text);;) (jQuery);
Nu numai că această abordare, din nou, face Mesaj obiect mai testabil, dar este și o tehnică mai curată, care, printre altele, protejează iadul de apel invers. Gandeste-te la asta Mesaj obiect ca reprezentare a unei singure casete de mesaje.
Dacă Mesaj reprezintă o singură casetă de mesaj, care va fi codul HTML pentru unul? Să creăm a div cu o clasă de Mesaj-box, și să îl pună la dispoziția Mesaj exemplu, prin intermediul unui el proprietate.
var Mesaj = initialize: function (text) this.el = $ ('',' clasa ':' caseta de mesaje ',' stil ':' display: none '); this.text = text; returnați acest lucru; ; Acum, obiectul are o referință imediată la ambalaj div pentru caseta de mesaje. Pentru a avea acces la acesta, am putea face:
var msg = Object.create (Mesaj) .initialize (); // [console.log (msg.el);
Rețineți că acum avem un fragment HTML, dar nu a fost încă introdus în DOM. Acest lucru înseamnă că nu trebuie să ne facem griji cu privire la eventualele refuzuri inutile, atunci când adăugăm conținut la div.
Pasul 5
Următorul pas este să luați șirul de mesaje furnizat și să îl inserați în div. Asta e ușor!
inițializa: funcția (text) // ... this.el.html (this.text); // [â € <]
Cu toate acestea, este puțin probabil să dorim să inserăm textul direct în div. Mai realist, caseta de mesaje va avea un șablon. În timp ce am putut lăsa utilizatorul pluginului să creeze un șablon și să îl refere, să păstrăm lucrurile simple și să limităm șablonul la Mesaj obiect.
var Mesaj = template: funcție (text, butoane) return ['+ text +'
","', butoane, '' ].a adera("); //… ;
În situațiile în care nu ai de ales decât să cuipești HTML-ul în JavaScript, o abordare populară este de a stoca fragmentele HTML ca elemente dintr-un tablou și apoi de a le uni într-un șir HTML.
În acest fragment de mai sus, textul mesajului este acum inserat într-un paragraf cu o clasă de Mesaj-box-text. De asemenea, am stabilit un loc pentru butoanele pe care le vom implementa în scurt timp.
Acum inițializa metoda poate fi actualizată pentru a:
inițializa: funcția (text) // ... this.el.html (acest.template (text, butoane));
Când este declanșat, construim structura casetei de mesaj:
Iată un mesaj important.
Pasul 6
Pentru ca caseta de mesaje să fie cât mai flexibilă, utilizatorul pluginului trebuie să aibă posibilitatea de a specifica opțional, printre altele, care butoane ar trebui să fie prezentate utilizatorului - cum ar fi "Bine", "Anulare", "Da" , "etc. Ar trebui să adăugăm următorul cod:
$ .message ("Esti sigur?", butoane: ['Da', 'Anulare']); ... și să genereze o casetă de mesaje cu două butoane.
Pentru a implementa această funcție, actualizați mai întâi versiunea $ .message definiție.
$ .message = funcție (text, setări) var msg = Object.create (Message); msg.initialize (text, setări); retur; ;
Acum setări obiect va fi trecut la inițializa metodă. Să o actualizăm.
inițializare: funcție (text, setări) this.el = $ ('',' clasa ':' caseta de mesaje ',' stil ':' display: none '); this.text = text; this.settings = setările this.el.html (this.template (text, butoane)); Nu este rău, dar ce se întâmplă dacă utilizatorul pluginului nu specifică nicio setare? Luați în considerare întotdeauna diferitele moduri în care pluginul dvs. poate fi folosit.
Pasul 7
Presupunem că utilizatorul pluginului va descrie ce butoane să prezinte, dar, pentru a fi sigur, este important să furnizați un set de valori implicite, care este o bună practică atunci când creați pluginuri.
$ .message = funcție (text, setări) var msg = Object.create (Message); msg.initialize (text, setări); retur; ; $ .message.defaults = icon: 'info', butoane: ['Bine'], apel invers: null;
Cu această abordare, în cazul în care utilizatorul plugin-ului trebuie să modifice setările implicite, el trebuie doar să actualizeze $ .message.defaults, după cum este necesar. Rețineți: nu ascundeți niciodată valorile implicite de la utilizator. Asigurați-le la dispoziția "exterioară".
Aici am setat câteva setări implicite: pictograma, butoanele și o funcție de apel invers, care ar trebui declanșate, după ce utilizatorul a dat clic pe unul din butoanele din caseta de mesaje.
jQuery oferă o metodă utilă de a înlocui opțiunile implicite pentru un plugin (sau orice obiect, într-adevăr), prin intermediul lui extinde metodă.
inițializa: funcția (text, butoane) // ... this.settings = $ .extend (, $ .message.defaults, settings);
Cu această modificare, this.settings va fi acum egal cu un obiect nou. Dacă utilizatorul plugin-ului specifică orice setări, acestea vor suprascrie plugin-urile implicite obiect.
Pasul 8
Dacă intenționăm să adăugăm o pictogramă personalizată în caseta de mesaj, în funcție de acțiune, va fi necesar să adăugăm o clasă CSS elementului și să permitem utilizatorului să aplice o imagine de fundal, în consecință.
În cadrul inițializa adăugați:
this.el.addClass ("casetă de mesaje-" + această setare.condiție); Dacă nu este specificată nicio pictogramă în setări obiect, implicit, info, este folosit: .Mesaj-box-info. Acum, putem oferi o varietate de clase CSS (dincolo de scopul acestui tutorial), care conține diferite pictograme pentru caseta de mesaje. Iată câteva exemple pentru a începe.
.message-box-info fundal: url (cale / spre / info / icon.png) no-repeat; .message-box-warning fundal: url (cale / spre / warning / icon.png) no-repeat;
În mod ideal, ca parte a pluginului dvs. MessageBox, doriți să includeți o foaie de stil externă care conține stilul de bază pentru caseta de mesaje, aceste clase și o mână de pictograme.
Pasul 9
Pluginul acceptă acum o serie de butoane pentru a fi aplicate șablonului, dar nu am scris încă funcționalitatea pentru ca aceste informații să poată fi utilizate. Primul pas este de a lua o serie de valori ale butoanelor și de a traduce acest lucru la intrările HTML necesare. Creați o nouă metodă pe Mesaj obiect pentru a face față acestei sarcini.
createButtons: funcție (butoane)
jQuery.map este o metodă utilă care aplică o funcție pentru fiecare element dintr-o matrice și returnează un nou tablou cu modificările aplicate. Acest lucru este perfect pentru nevoile noastre. Pentru fiecare element din matrice de butoane, cum ar fi ['Da nu'], vrem să înlocuim textul cu o intrare HTML, cu valoarea stabilită, în consecință.
createButtons: funcție (butoane) return $ .map (butoane, funcție (buton) return '„; ).a adera("); Apoi, actualizați inițializa metodă pentru apelarea acestei metode noi.
inițializare: funcție (text, setări) this.el = $ ('',' clasa ':' caseta de mesaje ',' stil ':' display: none '); this.text = text; this.settings = $ .extend (, $ .message.defaults, setările); var butoanele = this.createButtons (this.settings.buttons); this.el.html (acest.template (text, butoane)); returnați acest lucru;
Pasul 10
Ce bun este un buton, dacă nu se întâmplă nimic când utilizatorul o dă clic pe el? Un loc bun pentru a stoca toți ascultătorii de evenimente pentru o vizită se află într-un cadru special evenimente pe obiectul asociat, după cum urmează:
inițializa: funcția () // ... this.el.html (this.template (text, butoane)); this.events (); , evenimente: function () var self = aceasta; acest tip de fișier ('input') pe ('click', funcția () self.close (); (auto, $ (acest) .val ());); Acest cod este ceva mai complex, datorită faptului că utilizatorul pluginului trebuie să aibă capacitatea de a declanșa funcția de apel invers, atunci când se face clic pe un buton în caseta de mesaje. Codul determină pur și simplu dacă a suna inapoi funcția a fost înregistrată și, dacă da, o declanșează și trimite prin valoarea butonului selectat. Imaginați-vă că o casetă de mesaje oferă două butoane: "Acceptați" și "Anulați". Utilizatorul pluginului trebuie să aibă o modalitate de capturare a valorii butonului clicat și să răspundă în consecință.
Observați unde sunăm self.close ()? Această metodă, care încă nu a fost creată, este responsabilă pentru un singur lucru: închiderea și eliminarea casetei de mesaje de la DOM.
închide: funcția () this.el.animate (top: 0, opacity: 'hide', 150, function () $ (this) .remove (););
Pentru a adăuga un pic de fler, după ce ascundem caseta de mesaje, noi, în decursul a 150 de milisecunde, am pierdut cutia și am tranziționat-o în sus.
Pasul 11
Funcționalitatea a fost implementată! Ultimul pas este de a prezenta caseta de mesaje utilizatorului. Vom adăuga ultima spectacol metoda pe Mesaj obiect, care va introduce caseta de mesaj în DOM și o va poziționa.
(top: $ (window) .height () / 2 - this.el.outerHeight () / 2, opacitate: 'show', 300);
Este nevoie doar de un simplu calcul pentru a poziționa caseta vertical în centrul ferestrei browserului. Cu aceasta, plugin-ul este complet!
$ .message = funcție (text, setări) var msg = Object.create (Message) .initialize (text, setări); msg.show (); retur; ;
Pasul 12
Pentru a utiliza noul plugin, pur și simplu apelați $ .Message (), și treci printr-un mesaj și toate setările aplicabile, cum ar fi:
$ .message ('Rândul a fost actualizat.'); 
Sau, pentru a solicita confirmarea pentru o acțiune distructivă:
$ .message ('Într-adevăr doriți să ștergeți această înregistrare?', butoanele: ['Da', 'Anulare'], pictograma: 'alertă', callback: funcția (buttonText) if (buttonText === 'Da ') // continuați și ștergeți înregistrarea); 
Gânduri închise
Pentru a afla mai multe despre dezvoltarea jQuery, sunteți încurajat să vă referiți la cursul pe acest site, "30 de zile pentru a afla jQuery".
În cursul construirii acestui eșantion MessageBox plugin, au apărut o varietate de bune practici, cum ar fi evitarea iadului de apel invers, scrierea unui cod testabil, punerea la dispoziția utilizatorului plugin a opțiunilor implicite și asigurarea faptului că fiecare metodă este responsabilă pentru o singură sarcină.
În timp ce s-ar putea realiza cu siguranță același efect prin încorporarea nenumăratelor funcții de apel invers $ .message, acest lucru este rareori o idee bună, și este chiar considerat un anti-model.
Amintiți-vă cele trei chei pentru codul de întreținere și pluginurile și script-urile jQuery flexibile:
- Pot să testez asta? Dacă nu, refăctorul și împărțiți codul în bucăți.
- Am oferit abilitatea de a suprascrie setările implicite?
- Sunt după practici rele sau presupuneri?
Pentru a afla mai multe despre dezvoltarea jQuery, sunteți încurajat să vă referiți la cursul meu de screencast de pe acest site, "30 de zile pentru a afla jQuery".
