Share
Indiferent de nivelul nostru actual de calificare, am fost toți începători la un moment dat. Efectuarea de greșeli clasice începător vine cu teritoriul. Astăzi, am cerut unei varietăți de autori de personal Nettuts + să facă clic cu lista lor de capcane și soluții - într-o varietate de limbi.
Aflați din greșelile noastre; nu faceți aceste lucruri!
Domeniul DOM este lent. Limitarea interacțiunii dvs. cu aceasta va spori foarte mult performanța codului dvs. Luați în considerare următorul cod (rău):
Accentsconagua
// anti-model pentru (var i = 0; i < 100; i++) var li = $("Acest cod de fapt modifică DOM 100 de ori, și creează în mod inutil 100 de obiecte jQuery. 100! O abordare mai corectă ar fi fie utilizarea unui fragment de document, fie construirea unui șir care să conțină 100 elemente și apoi adaugă acel HTML elementului care conține. În acest fel, sariți în DOM o dată o dată. Iată un exemplu:
var liststring = ""; pentru (var i = 100; i> 0; i -) liststring + = "
După cum sa menționat mai sus, prin această tehnică, atingem DOM doar o singură dată, ceea ce reprezintă o îmbunătățire, dar se bazează, de asemenea, pe concatenarea șirului pentru a construi un șir mare. Există o modalitate diferită pe care am putea să o abordăm, folosind matrice.
var liststring = "
Atunci când construiți șiruri mari, stocați fiecare piesă a șirului ca element dintr-un element de matrice și sunând a adera() este probabil mai elegant decât concatenarea șirului. Aceasta este una dintre cele mai rapide și mai simple moduri de a construi HTML repetitiv în JavaScript, fără a folosi o bibliotecă de șabloane sau un cadru.
Acest element următor nu reprezintă o problemă de performanță, dar este extrem de important - mai ales dacă lucrați la codul pe care lucrează și alți oameni. Mențineți identificatorii (nume variabile și funcții) consecvenți. Luați în considerare următoarele variabile ca exemplu:
var foo = "bar"; var plant = "verde"; var car = "roșu";
Nu ar fi logic să adăugăm o altă variabilă, numită Ceva. Aceasta introduce inconsecvența în modelul dvs. de numire variabilă, determinând creierul dvs. să semnaleze cognitiv această variabilă ca fiind diferită sau specială. Acesta este motivul pentru care constantele în majoritatea limbilor sunt definite în mod tradițional cu toate capacele.
Puteți face acest lucru cu un pas mai departe prin menținerea unei lungimi similare, a unei structuri gramaticale și a unei explicații atunci când se numește funcții. De exemplu, luați în considerare următoarea funcție controversată:
funcția subtractFive (număr) număr de întoarcere - 5;
Denumirea unei funcții care adaugă cinci la un număr dat trebuie să urmeze același model, prezentat aici:
funcția addFive (număr) return number + 5;
Uneori, puteți numi o funcție pentru a indica valoarea de retur. De exemplu, ați putea numi o funcție care returnează un șir HTML getTweetHTML (). S-ar putea să premedicați și numele unei funcții do, dacă funcția efectuează pur și simplu o operație și nu returnează o valoare, de exemplu: doFetchTweets ().
Funcțiile constructorului respectă în mod obișnuit tradiția clasei în alte limbi, capitalizând prima literă:
funcție Câine (culoare) this.color = culoare;
Ca regulă generală, ar trebui să fii descriptivă atunci când numiți identificatorii. Clasificați-le împreună cu alți identificatori asemănători prin menținerea unui model de denumire care este lizibil și oferă sugestii cu privire la natura scopului unei variabile sau a unei funcții.
hasOwnProperty () în pentru ... in bucleleJetoanele JavaScript nu sunt asociative; încercând să le folosească ca atare, este înfruntată de comunitate. Obiectele, pe de altă parte, pot fi tratate ca tabele de tip hash și puteți itera pe proprietățile obiectului utilizând pentru ... in cum ar fi:
pentru (var propul în someObject) alert (someObject [prop]); // valoarea de avertizare a averii
Problema, totuși, este că pentru ... in buclă iterează peste fiecare proprietate enumerabilă pe lanțul prototip al obiectului. Aceasta poate fi problematică dacă doriți doar să utilizați proprietățile existente pe obiectul real.
Puteți rezolva această problemă utilizând hasOwnProperty () metodă. Iată un exemplu:
pentru (var propul în someObject) if (someObject.hasOwnProperty (prop)) alert (someObject [prop]); // valoarea de avertizare a proprietății
Această versiune avertizează numai valorile proprietăților pe care se află direct someObject.
Compararea valorilor booleene într-o stare este o pierdere de timp de calcul. Uitați-vă la următorul exemplu pentru un exemplu:
dacă (foo == true) // face ceva pentru adevărat altceva // face ceva pentru fals
Observați condiția: foo == true. Comparația dintre foo și Adevărat este inutil pentru că foo este deja o valoare booleană (sau este una trută sau una falsă). În loc să comparăm foo, pur și simplu utilizați-l ca o condiție, cum ar fi:
dacă (foo) // face ceva pentru adevărat altceva // face ceva pentru fals
Pentru a testa pentru fals, utilizați operatorul logic NOT, după cum se arată mai jos:
dacă (! foo) // face ceva dacă foo este fals altceva // face ceva dacă foo este adevărat
Evenimentele sunt un subiect complicat în JavaScript. Au dispărut zilele inline onclick (cu excepția unor cazuri foarte rare de "pagină de spart"). În schimb, utilizați blocarea evenimentelor și delegarea evenimentelor.
Să ne imaginăm că aveți o rețea de imagini care trebuie să lanseze o fereastră modală a casetei de lumină. Iată ce faceți voi nu ar trebui do. Notă: folosim aici jQuery, presupunând că utilizați o bibliotecă similară. Dacă nu, aceleași principii de barbotare se aplică și la JavaScript de vanilie.
HTML-ul relevant:
Javascriptul (rău):
$ ('a') pe ('clic', functie () callLightbox (aceasta);); Acest cod presupune că apelarea casetei lightbox implică trecerea unui element de ancorare care se referă la imaginea de dimensiune completă. În loc să se lege la fiecare element de ancorare, legați-l la # Grid-container element în loc.
$ ("# grid-container") pe ("faceți clic pe", "a", funcție (eveniment) callLightbox (event.target);); În acest cod, amândouă acest și event.target consultați elementul de ancorare. Puteți folosi aceeași tehnică cu orice element părinte. Doar asigurați-vă că ați definit elementul care ar trebui să fie ținta evenimentului.
Suprasolicitarea declarațiilor ternare este destul de comună atât în JavaScript, cât și în PHP.
// javascript returnează foo.toString ()! == ""? adevarat fals;
// returnul php (ceva ())? adevarat fals;
O expresie a condiției întoarce întotdeauna a Adevărat sau fals valoare, ceea ce înseamnă că nu este necesar să adăugați în mod explicit Adevărat/fals ca valori ternare. În schimb, ați putea reveni pur și simplu la această condiție:
// javascript returnează foo.toString ()! == "";
// php return ceva ();
dacă ... altfel declarațiile reprezintă o parte centrală a majorității limbilor. Dar făcând ceva simplu, cum ar fi atribuirea unei valori unei variabile bazate pe o condiție - ei bine, ei pot junk codul. Luați în considerare următorul cod:
dacă ($ salut) $ post-> message = 'Bună ziua'; altceva $ post-> message = 'La revedere';
Acest cod poate fi redus la o singură linie, menținând în același timp lizibilitatea prin utilizarea operatorului ternar, astfel:
$ post-> mesaj = $ salut? 'Salut la revedere';
Este clar, concis și vă oferă funcționalitatea de care aveți nevoie.
La fel de util ca și operatorul ternar, cea mai importantă orientare este să nu o folosiți prea mult! Scopul codării nu este de a vă crampa logica în cât mai puține linii posibil.
Să recunoaștem: multe niveluri de cuibărire sunt urâte și dificil de întreținut / citit. Următorul cod este un exemplu relativ simplificat, dar se agravează mult în timp:
// anti-model $ error_message = null; dacă ($ this-> form_validation-> run ()) dacă ($ this-> upload-> do_upload ()) $ image = $ this-> upload-> get_info (); dacă ! $ this-> image-> create_thumbnail ($ image ['file_name'], 300, 150)) $ error_message = 'A apărut o eroare la crearea miniaturii.'; altceva $ error_message = 'A apărut o eroare la încărcarea imaginii.'; altfel $ error_message = $ this-> form_validation-> error_string (); // Afișați mesaje de eroare dacă ($ error_message! == null) $ this-> load-> view ('form', array ('error' => $ error_message,)); // Salvați pagina în altă parte $ some_data ['image'] = $ image ['nume_fișier']; $ This-> some_model-> Salvare ($ some_data); Acesta este un cod urât, dar puteți să-l faceți drastic mai curat folosind excepții, cum ar fi:
încercați if (! $ this-> form_validation-> run ()) aruncați o nouă Excepție ($ this-> form_validation-> error_string ()); if (! $ this-> upload-> do_upload ()) arunca o nouă excepție ('A apărut o eroare la încărcarea imaginii.'); $ imagine = $ acest-> încărcare-> get_info (); if (! $ this-> image-> create_thumbnail ($ image ['file_name'], 300, 150)) aruncați o nouă Excepție ('A apărut o eroare la crearea miniaturii.'); Afișați mesajele de eroare capturate (Excepție $ e) $ this-> load-> view ('form', array ('error' => $ e-> getMessage (),)); // Opriți executarea metodei cu returnare sau folosiți întoarcerea la ieșire; // A ajuns atât de departe, nu trebuie să aibă probleme $ some_data ['image'] = $ image ['nume_firma']; $ This-> some_model-> Salvare ($ some_data); Acesta ar putea fi același număr de linii, dar permite un cod mult mai lizibil și mai ușor de întreținut. Se evită, de asemenea, acele sesiuni dificile de depanare, unde ați pierdut o cale posibilă prin dacă afirmație. Nu te complica!
A doua opinie: fi foarte, foarte atent, când folosiți excepții pentru controlul fluxului. Consultați aici informații suplimentare.
Fals-Metode fericiteFiind excepțional, fericit este mult mai avantajos decât să fii fericit.
Dezvoltatorii Ruby sau Python sunt folosiți pentru a urmări excepțiile banale. În timp ce sunetul este plictisitor, este de fapt un lucru bun. Dacă ceva nu merge bine, o excepție este aruncată și imediat știți unde este problema.
În PHP - și mai ales atunci când folosiți cadre mai vechi, cum ar fi CodeIgniter - obțineți ceea ce eu numesc "cod fals-fericit" (spre deosebire de exception-happy). În loc să ai o excepție să te ridici în față, doar returnează a fals valoare și atribuie șirul de eroare altor proprietăți. Acest lucru te obligă să îl pescuii din clasă folosind un get_error (); metodă.
Fiind excepțional, fericit este mult mai avantajos decât să fii fericit. Dacă apare o eroare în codul dvs. (de exemplu: nu s-a putut conecta la S3 pentru a încărca o imagine sau o valoare este goală etc.), aruncați o excepție. De asemenea, puteți arunca anumite tipuri de excepții prin extinderea Excepție clasa, ca atare:
clasa CustomException extinde excepția
Aruncarea unei excepții personalizate face ca depanarea să fie mult mai ușoară.
Este obișnuită folosirea dacă instrucțiuni pentru a controla calea de execuție a unei funcții sau metode. Este tentant să testați o condiție și să executați o mulțime de cod atunci când starea este rezultatul Adevărat, doar pentru a reveni pur și simplu în altfel afirmație. De exemplu:
funcția someFunction ($ param) if ($ param == 'OK') $ this-> doSomething (); return true; altfel return false;
Totuși, acest tip de soluție reprezintă un potențial pentru codul spaghetti. Puteți face acest cod mai ușor de citit prin inversarea condiției. Iată o versiune mai bună:
funcția someFunction ($ param) if ($ param! = 'OK') return false; $ This-> doSomething (); return true;
Nu este mai ușor de citit? Este o simplă schimbare care face o diferență drastică în lizibilitatea codului tău.
in timp ce pentru iterații simple pentru bucla este frecvent utilizată atunci când aveți nevoie, de exemplu, de un contor. Iată un simplu pentru buclă:
pentru (var i = 0; i < x; i++) …
Există câteva motive foarte bune pentru a utiliza a pentru buclă, dar a in timp ce bucla poate fi mai bine dacă aveți nevoie doar de ceva simplu, cum ar fi:
var i = x; in timp ce eu--) …
Nu funcționează în orice situație, dar este o alternativă.
Aceasta este cu ușurință una dintre cele mai frecvente greșeli făcute de noii veniți.
O metodă este o unitate de lucru a obiectului și limitarea metodelor dvs. la o dimensiune menținută face ca codul dvs. să fie mai ușor de citit și de întreținut. Aruncati o privire la urmatoarea metoda de monstru:
clasa SomeClass funcția monsterMethod () if ($ weArePilots) $ this-> goAndDressUp (); $ This-> washYourTeeth (); $ This-> cleanYourWeapon (); $ This-> takeYourHelmet (); dacă ($ this-> helmetDoesNotFit ()) $ this-> takeAHat (); altfel $ this-> installHelmet (); $ This-> chekcYourKnife (); dacă ($ this-> myAirplain () == "F22") $ this-> goToArmyAirport (); altfel $ this-> goToCivilianAirport (); $ This-> scop (); $ This-> pregăti (); $ This-> foc ();
Luați în considerare ruperea acestei metode de monstru în bucăți mai mici, descriptive, fiecare fiind responsabilă de efectuarea unei acțiuni bine abstracte. Aceasta este cu ușurință una dintre cele mai frecvente greșeli făcute de noii veniți.
clasa SomeClass funcția monsterMethod () if ($ weArePilots) $ this-> prepareYourself (); $ This-> tryHelmet (); $ This-> findYourAirport (); $ This-> fightEnemy (); funcția privată prepareYourself () $ this-> goAndDressUp (); $ This-> washYourTeeth (); $ This-> cleanYourWeapon (); $ This-> chekcYourKnife (); funcția privată tryHelmet () $ this-> takeYourHelmet (); dacă ($ this-> helmetDoesNotFit ()) $ this-> takeAHat (); altfel $ this-> installHelmet (); funcția privată findYourAirport () if ($ this-> myAirplain () == "F22") $ this-> goToArmyAirport (); altfel $ this-> goToCivilianAirport (); funcția privată fightEnemy () $ this-> aim (); $ This-> pregăti (); $ This-> foc ();
Acolo mergem: mai curat și mai ușor de depanat!
Prea multe niveluri de cuibărire fac codul dificil de citit și de întreținut. Luați în considerare următoarele:
funcția doSomething () if ($ someCondition) if ($ someOtherCondition) dacă ($ yetSomeOtherCondition) doSomethingSpecial (); Fă altceva();
Puteți consulta Sfat # 10 pentru a face acest cod mai ușor de citit prin inversarea unor condiții.
funcția doSomething () if (! $ someCondition) return false; dacă (! $ someOtherCondition) return false; dacă ($ yetSomeOtherCondition) doSomethingSpecial (); Fă altceva();
Acest cod este considerabil mai curat și produce aceleași rezultate ca înainte.
Când te găsești cu imbricate dacă declarații, examinați îndeaproape codul; metoda dvs. poate efectua mai multe sarcini. Iată un exemplu:
funcția someFunc () if ($ oneThing) $ this-> doSomething (); dacă ($ anotherThing) $ this-> doSomethingElse ();
În aceste cazuri, extrageți metodele imbricate în metoda proprie:
funcția someFunc () if ($ oneThing) $ this-> doSomething (); $ This-> doAnotherThing ($ anotherThing); private doAnotherThing ($ anotherThing) dacă ($ anotherThing) $ this-> doSomethingElse ();
Numerele magice și corzile sunt rele. Definiți variabilele sau constantele cu valorile pe care doriți să le utilizați în codul dvs..
In loc de asta:
funcția someFunct () $ this-> order-> set (23); $ This-> comanda-> addProduct ( 'supercomputer'); $ This-> shoppingList-> adaugă ( 'supercomputer');
Specificați ce înseamnă acele numere și șiruri de caractere și le atribuiți unei variabile cu un nume semnificativ, cum ar fi:
funcția someFunct () $ orderId = 23; $ selectProductName = "supercomputer"; $ This-> comanda-> set ($ IDComandă); $ This-> comanda-> addProduct ($ selectedProductName); $ This-> shoppingList-> adaugă ($ selectedProductName);
În timp ce unii ar putea susține că ne-am crea inutil variabile, hit-ul de performanță este neglijabil. Citibilitatea are întotdeauna prioritate. Rețineți: nu optimizați pentru performanță până când nu puteți descrie de ce este necesar.
Utilizați funcțiile de matrice încorporate în loc de pentru fiecare().
Nu este ideal:
foreach (& $ myArray ca $ cheie => element $) if ($ element> 5) unset ($ myArray [$ key]);
Mai bine:
$ myArray = array_filter ($ myArray, functie ($ element) return $ element <= 5;);
PHP oferă o varietate de metode de array. La început, acestea sunt confuze, dar ia o zi și încearcă să învețe cât mai multe.
Este ușor să excesați variabilele, dar nu uitați că variabilele sunt stocate în memorie. Pentru fiecare variabilă pe care o creați, sistemul trebuie să aloce memoria pentru acea variabilă. Uită-te la acest cod:
funcția publică get_posts () $ query = $ this-> db-> get ('posts'); $ rezultat = $ interogare-> rezultat (); returneaza rezultatul $; $ rezultat variabila nu este necesară. Următorul cod omite această variabilă:
funcția publică get_posts () $ query = $ this-> db-> get ('posts'); returnați $ query-> result (); Diferența este subtilă, însă am reușit să îmbunătățim acest exemplu simplu. Am păstrat-o $ interogare deoarece aceasta se referă la baza de date, în timp ce $ rezultat legate mai mult de logica noastră.
Orice mai puțin este un miros de cod.
O bază de date este concepută pentru a lucra cu date; utilizați instrumentele și abilitățile sale pentru a face aplicația mai eficientă.
De exemplu, puteți evita interogările bazei de date redundante în multe situații. Majoritatea scripturilor de gestionare a utilizatorilor plug-and-play utilizează două interogări pentru înregistrarea utilizatorilor: una pentru a verifica dacă e-mailul / numele de utilizator există deja și altul pentru a-l adăuga efectiv în baza de date. O abordare mult mai bună este să setați câmpul cu numele de utilizator UNIC. Apoi puteți folosi funcțiile native MySQL pentru a verifica dacă înregistrarea a fost adăugată sau nu la baza de date.
Zilele numelui variabilelor X, y, z sunt terminate (cu excepția cazului în care, desigur, aveți de-a face cu un sistem de coordonate). O variabilă reprezintă o parte importantă a logicii dvs. Nu doriți să introduceți un nume lung? Obțineți un IDE mai bun. IDE-urile moderne auto-completează numele variabilelor într-o clipită a ochiului.
Codificați întotdeauna timp de șase luni de acum. Ești sigur că îți vei aduce aminte de ce
$ SUTvariabilele se referă la un an de acum? Probabil că nu: să fie descriptivă. Orice mai puțin este un miros de cod.
Se întâmplă greșeli; cheia este de a învăța de la ei.
Denumiți-vă metodele cu verbele care reprezintă acțiunea pe care o efectuează. Conceptul principal este exact opusul schemei de denumire a variabilelor. Utilizați un nume scurt, dar descriptiv, într-un domeniu larg (și anume: metode publice) și folosiți un nume mai lung și mai detaliat într-un domeniu scurt (de exemplu: metode private / protejate). Acest lucru vă ajută să faceți citirea codului ca și proza scrisă.
Evitați, de asemenea, orice altă limbă decât limba engleză, atunci când vă numiți metodele. Este enervant să citești nume de funcții ca 做些 什麼 () sau делатьчтото () în proiectul tău. Este posibil ca alți programatori să nu înțeleagă intenția dvs. În timp ce ar putea părea arogant, pentru bine sau mai rău, limba engleză este limba adoptată de cod. Încercați să o utilizați, dacă lucrăm la o echipă mare.
În cele din urmă, structura codului este la fel de importantă pentru lizibilitatea și întreținerea ca orice altceva despre care am vorbit astăzi. Iată două recomandări:
"N-am făcut niciodată o greșeală de programare stupidă." -- Nimeni niciodata.
Se întâmplă greșeli; cheia este de a învăța de la ei. Noi, cei de la Nettuts +, am făcut și vom continua să facem greșeli. Speranța noastră este că învățați din greșelile noastre pentru a le putea evita în viitor. Dar, pentru a fi sincer, cel mai bun mod de a învăța cele mai bune practici este să faceți singuri greșelile!
Vă mulțumim pentru lectură!
