Cum să separați JavaScript în pagina dvs. web

Când scrieți pentru prima dată un nou JavaScript, cel mai simplu mod de configurare este să încorporați codul JavaScript direct pe pagina web, astfel încât totul să fie într-un singur loc în timp ce îl testați pentru a-l funcționa dreapta. În mod similar, dacă inserați un script pre-scris în site-ul dvs. web, instrucțiunile vă pot spune să încorporați părți sau toate scripturile în pagina web în sine.

Acest lucru este în regulă pentru a configura pagina și a face ca aceasta să funcționeze corect în primul rând, dar odată ce pagina dvs. va funcționa așa cum doriți, veți putea îmbunătățiți pagina prin extragerea JavaScript într-un fișier extern, astfel încât conținutul paginii dvs. în HTML să nu fie atât de aglomerat cu elemente care nu conțin, cum ar fi JavaScript.

Dacă copiați și utilizați JavaScript-uri scrise de alți oameni, atunci instrucțiunile lor despre cum să-și adauge scriptul pe pagina dvs. s-ar putea să fi avut una sau mai multe secțiuni importante din JavaScript de fapt încorporat în pagina web în sine și instrucțiunile lor nu vă spun cum puteți muta acest cod din pagina dvs. într-un fișier separat și mai aveți JavaScript muncă. Nu vă faceți griji, însă, indiferent de codul pe care îl utilizați în pagina dvs., puteți muta cu ușurință JavaScript din pagina dvs. și setați-l ca fișier separat (sau fișiere dacă aveți mai multe piese de JavaScript încorporate în pagină). Procesul pentru a face acest lucru este întotdeauna același și este ilustrat cel mai bine cu un exemplu.

Să analizăm cum ar putea arăta o bucată de JavaScript atunci când este încorporată în pagina ta. Codul dvs. JavaScript real va fi diferit de cel prezentat în următoarele exemple, dar procesul este același în fiecare caz.

JavaScript încorporat ar trebui să semene cu unul dintre cele trei exemple de mai sus. Desigur, codul dvs. JavaScript real va fi diferit de cel arătat, dar JavaScript va fi încorporat în pagină utilizând una dintre cele trei metode de mai sus. În unele cazuri, codul dvs. poate utiliza învechit limba = "javascript" in loc de type = "text / javascript" caz în care este posibil să doriți să aduceți codul mai actualizat pentru a începe cu înlocuirea atributului de limbă cu unul de tip.

Înainte de a putea extrage JavaScript în propriul fișier, trebuie mai întâi să identificați codul care trebuie extras. În toate cele trei exemple de mai sus, există două linii de cod JavaScript real care trebuie extras. Scriptul dvs. va avea probabil multe mai multe linii, dar poate fi identificat cu ușurință, deoarece va ocupa același loc în cadrul paginii dvs. ca și cele două linii de JavaScript pe care noi au evidențiat în cele trei exemple de mai sus (toate cele trei exemple conțin aceleași două linii de JavaScript, doar containerul din jurul lor este ușor diferit).

1. Primul lucru pe care trebuie să îl faceți pentru a extrage de fapt JavaScript într-un fișier separat este să deschideți un editor de text simplu și să accesați conținutul paginii dvs. web. Apoi, trebuie să localizați JavaScript încorporat care va fi înconjurat de una dintre variațiile de cod prezentate în exemplele de mai sus.
2. După ce ați localizat codul JavaScript, trebuie să-l selectați și să-l copiați în clipboard. Cu exemplul de mai sus, codul care urmează să fie selectat este evidențiat, nu este necesar să selectați etichetele de script sau comentariile opționale care pot apărea în jurul codului JavaScript.
3. Deschideți o altă copie a editorului de text simplu (sau o altă filă dacă editorul acceptă deschiderea mai multor fișiere simultan) și treceți conținutul JavaScript acolo.
4. Selectați un nume de fișier descriptiv de utilizat pentru noul fișier și salvați noul conținut folosind acel nume de fișier. Cu ajutorul codului de exemplu, scriptul este să se despartă de cadre, astfel încât să poată fi un nume adecvat framebreak.js.
5. Așadar, acum avem JavaScript într-un fișier separat, revenim la editor unde avem conținutul paginii originale pentru a face modificările de acolo pentru a face legătura cu copia externă a scriptului.
6. Deoarece acum avem scriptul într-un fișier separat, putem elimina totul între etichetele script din conținutul nostru original, astfel încât etichetă.
7. Ultimul pas este să adăugați un atribut suplimentar la eticheta de script identificând unde poate găsi JavaScript extern. Facem acest lucru folosind un src = "filename" atribut. Cu scriptul nostru de exemplu, am specifica src = "framebreak.js".
8. Singura complicație în acest sens este dacă am decis să stocăm JavaScript-urile externe într-un folder separat de paginile web care le folosesc. Dacă faceți acest lucru, atunci trebuie să adăugați calea din folderul paginii web în folderul JavaScript din fața numelui fișierului. De exemplu, dacă JavaScript sunt stocate într-un js folder în folderul care conține paginile noastre web de care am avea nevoie src = "js / framebreak.js"

Cum arată codul nostru după ce am separat separarea JavaScript într-un fișier separat? În cazul exemplului nostru JavaScript (presupunând că JavaScript și HTML sunt în același dosar) HTML-ul nostru din pagina web citește acum:

Avem, de asemenea, un fișier separat numit framebreak.js care conține:

if (top.location! = self.location) top.location = self.location;

Numele de fișier și conținutul fișierului vor fi mult diferite de acesta, deoarece veți fi extras orice JavaScript a fost încorporat în pagina dvs. web și a dat fișierului un nume descriptiv bazat pe ce o face. Procesul real de extragere va fi același, deși indiferent de liniile pe care le conține.

Cum rămâne cu celelalte două rânduri din fiecare dintre exemplele două și trei? Ei bine, scopul acestor rânduri din exemplul doi este să ascundă JavaScript de Netscape 1 și Internet Explorer 2, de care nimeni nu mai folosește, astfel încât aceste linii nu sunt cu adevărat necesare în prima loc. Plasarea codului într-un fișier extern ascunde codul în browserele care nu înțeleg mai eficient eticheta script decât îl înconjoară într-un comentariu HTML. Al treilea exemplu este folosit pentru paginile XHTML pentru a spune validatorilor că JavaScript trebuie tratat ca conținut al paginii și nu pentru validarea acesteia ca HTML (dacă utilizați un doctype HTML, mai degrabă decât unul XHTML, atunci validatorul cunoaște acest lucru și deci aceste etichete nu sunt Necesar). Cu JavaScript într-un fișier separat, nu mai există niciun JavaScript în pagină pentru a fi omis de către validatori și astfel liniile respective nu mai sunt necesare.

Una dintre cele mai utile metode prin care JavaScript poate fi folosit pentru a adăuga funcționalitate pe o pagină web este de a efectua un fel de procesare ca răspuns la o acțiune a vizitatorului tău. Cea mai frecventă acțiune la care doriți să răspunde va fi atunci când acel vizitator face clic pe ceva. Gestorul de evenimente care vă permite să răspundeți vizitatorilor care fac clic pe ceva este apelat onclick.

Când majoritatea oamenilor se gândesc mai întâi la adăugarea unui instrument de gestionare a evenimentelor onclick pe pagina lor web, se gândesc imediat să îl adauge la un etichetă. Aceasta oferă o bucată de cod care arată adesea:

Acesta este gresit mod de a utiliza onclick dacă nu aveți o adresă reală semnificativă în atributul href, astfel încât cei fără JavaScript să fie transferați undeva când fac clic pe link. De asemenea, o mulțime de oameni lasă „returnarea falsă” din acest cod și apoi se întreabă de ce partea de sus a paginii curente este întotdeauna încărcată după ce scriptul a rulat (ceea ce href = "#" spune paginii să facă, cu excepția faptului că falsul este returnat de la toți gestionarii de evenimente. Desigur, dacă aveți ceva semnificativ ca destinația linkului, atunci puteți dori să mergeți acolo după rularea codului onclick și nu veți avea nevoie de „return false”.

Ceea ce mulți nu își dau seama este că poate fi adăugat gestionarul de evenimente onclick orice Etichetă HTML în pagina web pentru a interacționa atunci când vizitatorul face clic pe acel conținut. Deci, dacă doriți să fie difuzat ceva când oamenii fac clic pe o imagine, puteți utiliza:

Dacă doriți să rulați ceva când oamenii fac clic pe un text, puteți utiliza:

unele text

Desigur, acestea nu oferă indicii vizuale automate că va exista un răspuns dacă vizitatorul dvs. face clic pe ele felul în care face o legătură, dar puteți adăuga acel indiciu vizual suficient de ușor prin stilarea imaginii sau a intervalului în mod corespunzător.

Celălalt lucru de remarcat cu privire la aceste modalități de atașare a instrumentului de gestionare a evenimentelor onclick este faptul că acestea nu necesită „return false”, deoarece nu există nicio acțiune implicită care se va întâmpla când elementul este dat clic pe care trebuie să fie dezactivat.

Aceste modalități de atașare a onclick reprezintă o mare îmbunătățire a metodei slabe pe care o folosesc multe persoane, dar este încă departe de a fi cel mai bun mod de a-l codifica. O problemă cu adăugarea onclick folosind oricare dintre metodele de mai sus este aceea că încă mai amestecă JavaScript cu HTML-ul tău. onclick este nu un atribut HTML, este un manager de evenimente JavaScript. Ca atare, pentru a separa JavaScript de HTML-ul nostru pentru a face pagina mai ușor de întreținut, trebuie să obținem acea referință onclick din fișierul HTML într-un fișier JavaScript separat, unde aparține.

Cel mai simplu mod de a face acest lucru este să înlocuiți onclick în HTML cu un id asta va facilita atașarea gestionarului de evenimente la locul corespunzător din HTML. Deci, HTML-ul nostru ar putea conține acum una dintre aceste afirmații:

 unele text

Putem apoi codifica JavaScript într-un fișier JavaScript separat, care este fie legat în partea de jos a corpului paginii sau care se află în capul paginii și unde codul nostru se află în interiorul unei funcții care se numește ea însăși după ce pagina finalizează încărcarea. JavaScript nostru pentru a atașa gestionarii de evenimente arată acum astfel:

document.getElementById ('img1'). onclick = dosomething; document.getElementById ('sp1'). onclick = dosomething;

Un lucru de remarcat. Veți observa că întotdeauna am scris onclick în întregime cu minuscule. Când codificați declarația în HTML-ul lor, veți vedea că unii o scriu ca onClick. Acest lucru este greșit, deoarece numele gestionarilor de evenimente JavaScript sunt toate minuscule și nu există nici un astfel de handler ca onClick. Vă puteți îndepărta de el atunci când includeți JavaScript în eticheta HTML direct, deoarece HTML nu este sensibil la litere mari și majuscule, iar browserul îl va asocia cu numele corect pentru dvs. Nu puteți scăpa de majuscule greșite în JavaScript în sine, deoarece JavaScript este sensibil cu litere mari și mici și nu există în JavaScript așa cum este onClick.

Acest cod este o îmbunătățire uriașă față de versiunile anterioare, deoarece acum atașăm evenimentul la elementul corect din HTML-ul nostru și avem JavaScript complet separat de HTML. Cu toate acestea, putem îmbunătăți acest lucru.

Singura problemă care rămâne este că putem atașa un singur gestionar de eveniment onclick la un element specific. Dacă trebuie, oricând, să atașăm un alt instrument de gestionare a evenimentelor onclick la același element, atunci procesarea atașată anterior nu va mai fi atașată la acel element. Când adăugați o varietate de scripturi diferite pe pagina dvs. web în scopuri diferite, există cel puțin un posibilitatea ca doi sau mai mulți dintre ei să dorească să ofere unele prelucrări pentru a fi efectuate atunci când este același element a dat clic pe. Soluția dezordonată a acestei probleme este identificarea locului în care apare această situație și combinarea procesării care trebuie apelată la o funcție care îndeplinește toate procesările.

În timp ce ciocnirile de acest fel sunt mai puțin obișnuite cu onclick decât cele cu sarcină, trebuie să identificăm în prealabil ciocurile și să le combinăm nu este soluția ideală. Nu este deloc o soluție atunci când procesarea efectivă care trebuie atașată la element se schimbă în timp, astfel încât uneori există un lucru de făcut, alteori altul și alteori ambele.

Cea mai bună soluție este să încetați să utilizați complet un manager de evenimente și să utilizați în schimb un ascultător de evenimente JavaScript (alături) cu attachEvent corespunzător pentru Jscript- deoarece aceasta este una dintre acele situații în care JavaScript și JScript difera). Putem face acest lucru cel mai ușor creând mai întâi o funcție addEvent care va adăuga fie un ascultător de evenimente, fie un atașament în funcție de care dintre cele două pe care le suportă limba rulată;

function addEvent (el, eType, fn, uC) {if (el.addEventListener) {el.addEventListener (eType, fn, uC); întoarce-te adevărat; } else if (el.attachEvent) {return el.attachEvent ('on' + eType, fn); } }

Acum putem atașa procesarea pe care dorim să o aibă loc atunci când elementul nostru este dat clic pe folosind:

addEvent (document.getElementById ('spn1'), 'click', dosomething, false);

Utilizarea acestei metode de atașare a codului care urmează să fie procesat atunci când se face clic pe un element înseamnă că efectuarea unui alt apel addEvent pentru a adăuga o altă funcție rulat atunci când se face clic pe un element specific nu va înlocui procesarea anterioară cu noua procesare, ci va permite în schimb ambele funcții să fie alerga. Nu trebuie să știm când apelăm un addEvent dacă avem sau nu o funcție atașată la elementul care va fi executat atunci când este dat clic, noua funcție va fi rulată împreună cu funcțiile care au fost anterior atașat.

Dacă avem nevoie de capacitatea de a elimina funcțiile din ceea ce este executat atunci când este dat clic pe un element, atunci am putea crea un Funcția deleteEvent corespunzătoare care apelează funcția corespunzătoare pentru eliminarea unui ascultător sau a unui atașat eveniment?

Unul dezavantaj al acestui ultim mod de atașare a procesării este acela că browserele cu adevărat vechi nu acceptă aceste modalități relativ noi de atașare a procesării evenimentelor pe o pagină web. Ar trebui să fie destul de puțini oameni care folosesc astfel de browsere antichizate până acum pentru a-i ignora în ceea ce privește J (ava) Script-ul pe care îl scriem în afară de scrierea codului nostru în așa fel încât să nu provoace un număr mare de erori mesaje. Funcția de mai sus este scrisă astfel încât să nu facă nimic dacă niciunul dintre modurile pe care le folosește nu este acceptat. Cele mai multe dintre aceste browsere cu adevărat vechi nu acceptă metoda getElementById de a face referire la HTML și atât de simplu if (! document.getElementById) return fals; în partea de sus a oricăreia dintre funcțiile dvs. care efectuează astfel de apeluri ar fi de asemenea adecvat. Desigur, mulți oameni care scriu JavaScript nu sunt atât de atenți la cei care încă folosesc browsere antice și deci acei utilizatori trebuie să se obișnuiască să vadă erori JavaScript pe aproape fiecare pagină web pe care o vizitează.

Care dintre aceste moduri diferite utilizați pentru a atașa procesarea în pagina dvs. pentru a fi rulată atunci când vizitatorii dvs. fac clic pe ceva? Dacă modul în care o faceți este mai aproape de exemplele din partea de sus a paginii decât de acele exemple din partea de jos a paginii, atunci poate este timp în care v-ați gândit să îmbunătățiți modul de scriere a procesării onclick pentru a utiliza una dintre metodele mai bune prezentate mai jos în jos pagină.

Privind codul pentru ascultătorul de evenimente cu browserul, veți observa că există un al patrulea parametru pe care l-am apelat uC, a căror utilizare nu este evidentă din descrierea anterioară.

Navigatoarele au două ordine diferite în care pot prelucra evenimente atunci când evenimentul este declanșat. Pot lucra din exterior spre interior din interior

• uC = adevărat de procesat în faza de captare
• uC = fals de procesat în faza balonului.

Așadar, acolo unde există mai multe alte etichete înfășurate în jurul celei pe care evenimentul a fost declanșat pe faza de captare rulează mai întâi începând cu eticheta cea mai exterioară și mutându-se în spre cea care a declanșat evenimentul și apoi odată ce eticheta la care a fost atașat evenimentul a fost procesată, faza cu bule inversează procesul și revine din nou.

Internet Explorer și gestionatorii de evenimente tradiționale prelucrează întotdeauna faza de bule și niciodată faza de captare și astfel începe întotdeauna cu cea mai specifică etichetă și lucrează spre exterior.

Deci, cu gestionatorii de evenimente:

xx