Cu toții recunoaștem că ar trebui să scriem codul semantic. Poate chiar tu folosești sau
corect, și te simți destul de bine despre tine. Dar, ia în considerare și contractul implicit care există atunci când codați?
Să presupunem că un client solicită un link text, "Vezi mai mult,"Care ar trebui să dezvăluie un text suplimentar pe pagină. Vezi mai mult
cu un manipulator de clicuri ar trebui să funcționeze perfect, nu? Hei, arată și funcționează conform cerințelor!
Nu, nu va funcționa întotdeauna corect, deoarece încalcă contractul dintre dvs. și browser. În special, mă refer la cel care spune href
atributul trebuie să aibă o valoare care este o adresă URL validă.
Există probleme practice care pot apărea atunci când se încalcă contractele, iar acestea sunt motive mai bune pentru a scrie cod semantic decât lucrurile pe care le gândiți de obicei atunci când auziți termenul, "semantic".
Există, totuși, motive mult mai practice pentru a ne îngriji de semantică: contracte.
Dacă întrebați un dezvoltator mediu care este valoarea codului semantic, probabil veți auzi ceva în conformitate cu:
Ambele sunt, din nefericire, foarte ușor de neglijat. "Oamenii orbi și roboții nu sunt publicul țintă" este prea simplu de răspuns, indiferent de cât de greșit sau ignorant ar putea fi.
În alte cazuri, s-ar putea să auziți și raționamente ciclice, cum ar fi "codul non-semantic este rău, pentru că nu este semnificativ". Este o noțiune atât de populară încât parodiile pe ea au apărut deja în jurul web-ului!
Există, totuși, motive mult mai practice pentru a ne îngriji de semantică: contracte.
De fiecare dată când utilizați anumite funcții oferite de furnizorii de browsere, limba dvs. de programare sau un API, vă bazați pe un contract.
Pe o parte a contractului există un furnizor de funcționalitate. De exemplu, atunci când utilizați un tag, dezvoltatorii de browsere vă promit că vă vor oferi o modalitate ușoară pentru utilizatorul aplicației dvs. de a naviga la adresa URL specificată.
Ca întotdeauna, totuși, există și cealaltă parte a contractului respectiv. Implementatorul funcționalității promite să utilizeze funcționalitatea specificată. Imediat ce abuzează de această funcționalitate, toate pariurile sunt dezactivate - ceea ce duce la potențialul eșec.
Să revenim la "Vezi mai mult"Exemplu de mai devreme. În primele zile de JavaScript, dezvoltatorii ar scrie JavaScript folosind un pseudo protocol, JavaScript
:
Vezi mai mult
Relativ repede, au început să realizeze că această abordare are cel puțin un defect practic: codul JavaScript este afișat în bara de stare a browserului, care nu arată profesional. Răspunsul la această dilemă a fost acela de a muta codul la un onclick
handler, și înlocuiți href
atribut cu un identificator hash goală, după cum urmează:
Vezi mai mult
Desigur, asta nu a rezolvat totul. Dacă Afișați mai multe
are o eroare, return false
nu este chemată niciodată, iar pagina este derulată în partea de sus - cu siguranță nu este dorită comportament.
Astăzi, dezvoltatorii își separă codurile HTML și JavaScript și utilizează tehnici adecvate de prevenire a evenimentelor:
Vezi mai mult
$ ('a.show-more') pe ('click', functie (eveniment) event.preventDefault (); ShowMore (););
Dar ghicește ce? Există încă multe probleme cu această abordare: deschiderea într-o filă nouă, marcarea sau copierea link-ului nu funcționează așa cum s-ar putea aștepta utilizatorul (mai ales dacă există
etichetă pe pagină), ceea ce duce la confuzie și, eventual, la pierderea unui client.
Observați cum toate problemele descrise până acum au apărut dintr-un singur fapt. Dezvoltatorii au încălcat partea lor din contract cu producătorii de browsere: href
atributul trebuie să conțină o adresă URL corectă, dar, în schimb, dezvoltatorii au introdus tot felul de gunoi.
Dacă încercăm să ne conformăm contractului, trebuie să ne întrebăm: "De ce contractul nu ne permite să facem ceea ce avem nevoie?" Răspunsul este simplu: ne folosim în mod greșit etichetă. Noi o folosim doar pentru că vrem ca textul "Vezi mai mult"Să apară și să se comporte ca o legătură. Cu toate acestea, atunci când folosim cuvinte, cum ar fi "arăta" și "apare", nu este acesta domeniul CSS? Nu este aceasta "Vezi mai mult"link-ul, în realitate, doar un buton? Acest lucru este ușor de implementat:
$ ("button.show-more") pe ("clic", ShowMore);
a, .link-style culoare: @ albastru-albastru; text-decorare: subliniere; . stil de legătură font: inherit; fundal: nici unul; frontieră: nici una; cursor: pointer;
Indiferent de câte noi modalități de a interacționa cu linkurile sunt adăugate la viitoarele iterații ale browserelor, această abordare va continua să funcționeze, deoarece nu încălcăm niciun contract cu browserul. Folosim elemente pentru a le transmite sensul și, în loc să ne ocupăm constant de noi probleme, știm că browserul va trata acest lucru în mod corect, deoarece înțelege ceea ce vrem.
Sigur, s-ar putea să fie nevoie de câteva linii suplimentare de CSS pentru a reinițializa unele dintre stilul implicit al nasturilor. Se merită! Nu fi leneș.
... cei care cunoscuseră semantica și ignorau cu bună știință.
În 2005, o mare parte din comunitatea de dezvoltare web a învățat modul greu că ignorarea cerințelor HTTP este rău. Google Web Accelerator nou lansat pre-introduce URL-uri pe o pagină pentru a minimiza timpul de așteptare al utilizatorului cu un clic.
Acest lucru a distrus haosul în aplicațiile care au ignorat HTTP și au pus operații distructive în spatele legăturilor simple. Și au existat multe astfel de aplicații.
Problema nu a rămas în mâinile dezvoltatorilor care nu înțelegeau semantica metodelor HTTP. Nu, problema a venit de la cei care au cunoscut semantica, ignorându-i cu bună știință și nu au împărtășit cunoștințele.
Codul confuz este rău!
De asemenea, există contracte între dezvoltatori. De fiecare dată când scrieți o linie de cod, faceți o promisiune dezvoltatorilor viitori că face exact ceea ce pare să facă. Cu alte cuvinte, codul derutant este rău!
De exemplu, utilizând o funcție de filtrare (cum ar fi filtru
în Python) pentru a bifa peste elemente este incorectă, deoarece există un contract implicit că funcțiile de filtrare modifică numai lista fără a avea efecte secundare:
Definiție def (element): imprimare (element) fructe = ['portocaliu', 'mere', 'lămâie'] filtru (spectacol, fructe)
În schimb, utilizați o buclă explicită pe o listă:
(fruct) = ['portocaliu', 'măr', 'lămâie'] pentru fructe în fructe: spectacol (fructe)
Pe de altă parte, dacă vă puteți baza pe un contract, acesta vă va permite să vă clarificați codul. De exemplu, folosind array_filter
în loc de a pentru
buclă în PHP pentru a filtra elementele permite altor dezvoltatori să înțeleagă ce se întâmplă după o singură privire:
$ venituri = [20, 15, -7, 19]; $ profit = array_filter ($ venituri, funcție ($ i) retur $ i> 0;);
Comparați fragmentul de mai sus cu utilizarea a pentru
buclă:
$ venituri = [20, 15, -7, 19]; $ profituri = []; foreach ($ venituri ca $ i) if ($ i> 0) $ profit [] = $ i;
A doua versiune este mai rău, nu numai pentru că este mai lungă, ci și pentru că array_filter
oferă o așteptare. Este clar că $ profit
este un subset de $ venituri
. Nu există o astfel de convenție cu generic pentru
buclă, ceea ce explică de ce nu putem face nici o ipoteză, fără a descifra mai întâi interiorul buclei.
Cum distingeți între codul care este și nu este semantic? Cum observați aceste contracte? În cea mai mare parte, simpla întrebare a întrebărilor ar trebui să fie suficientă.
"Eu folosesc un
etichetă și trebuie să pun ceva într-un
href
atribut.href
stochează destinația țintă a unui link. Deci, unde este minetag link-ul? "Nicăieri? Păi, pot să concluzionez că probabil am folosit această etichetă.
"Trebuie să tipăresc conținutul listei mele într-un
filtru
funcţie. Este imprimarea elementelor parte a procesului de filtrare? "Nu într-adevăr. Asta înseamnă că abuzfiltru
.
"Eu scriu a
getFoo
și trebuie să adăugați un cod de modificare în cadrul acestuia. Modifică starea de spirit ca parte a obținerii foo? Ar fi cineva care vrea pur și simplu să se aștepte ca altceva să se întâmple? "Probabil că nu!
"Vreau să adaug câteva JavaScript în cadrul unui cod HTML
onclick
atribut. Este corect? "Fișierul pe care îl modificați este.html
, dreapta? În schimb, plasați-vă JavaScript și CSS în cadrul acestuia.js
și.css
fișiere, respectiv. Mereu.
Desigur, în multe cazuri, pot fi necesare anumite cunoștințe suplimentare pentru a evalua în mod corespunzător situația. Ceea ce contează cel mai mult este să începeți să vă gândiți la aceste lucruri și să evitați principiul "aceasta (oarecum) funcționează, deci este suficient de fină."În schimb, întotdeauna întrebați-vă:" Ce înseamnă în realitate codul pe care îl scriu? "
Încălcarea unui contract garantează că se va sparge cooperarea.
Cooperarea depinde mereu de efortul ambelor părți. Majoritatea dezvoltării de software se reduce la cooperare: cooperarea dintre producătorii de hardware, programatorii de sistem, dezvoltatorii de browsere, autorii bibliotecii, dezvoltatorii de site-uri web și mulți alții. Încălcarea unui contract garantează că se va sparge cooperarea.
Semantica codului este un astfel de contract. Ai grijă de asta pentru binele tău!
Semantic: Termenul "semantic" este deseori înțeles greșit. În contextul acestui articol, folosesc termenul pentru a distinge sensul codului de la rezultatele pe care le produce codul. De exemplu, sensul semantic al unui eticheta este reprezentarea unei legături, în timp ce sensul simplu, practic este clicuri, text subliniat.
Strict vorbind, un identificator de fragment gol #
poate fi considerată valabilă în acest context. Această tehnicitate, totuși, ratează punctul pe care îl fac în articol.