JavaScript pārvietošana no tīmekļa lapas
Pārvietojamā skripta satura atrašana
Getty Images/erminguts
Pirmoreiz rakstot jaunu JavaScript, vienkāršākais veids, kā to iestatīt, ir iegult JavaScript kodu tieši tīmekļa lapā, lai viss būtu vienuviet, kamēr jūs to pārbaudāt, lai tas darbotos pareizi. Tāpat, ja savā vietnē ievietojat iepriekš uzrakstītu skriptu, instrukcijās var būt norādīts iegult skripta daļas vai visu skriptu pašā tīmekļa lapā.
Tas ir pareizi, lai vispirms iestatītu lapu un nodrošinātu tās pareizu darbību, taču, tiklīdz jūsu lapa darbosies tā, kā vēlaties, varēsiet uzlabot lapu, izvelkot JavaScript ārējā failā, lai jūsu lapa HTML saturs nav tik pārblīvēts ar vienumiem, kas nav saturs, piemēram, JavaScript.
Ja jūs vienkārši kopējat un izmantojat citu cilvēku rakstītus JavaScript, viņu norādījumi par to, kā jūsu lapai pievienot savu skriptu, iespējams, ir noveduši pie tā, ka viena vai vairākas lielas JavaScript sadaļas faktiski ir iegultas jūsu tīmekļa lapā, un viņu norādījumi to nesniedz. kā jūs varat pārvietot šo kodu no savas lapas atsevišķā failā, lai joprojām darbotos JavaScript. Tomēr neuztraucieties, jo neatkarīgi no tā, kādu JavaScript kodu izmantojat savā lapā, varat viegli pārvietot JavaScript no savas lapas un iestatīt to kā atsevišķu failu (vai failus, ja jums ir iegults vairāk nekā viens JavaScript fragments lapa). Šīs darbības veikšanas process vienmēr ir vienāds, un to vislabāk ilustrē piemērs.
Apskatīsim, kā JavaScript fragments varētu izskatīties, kad tas ir iegults jūsu lapā. Jūsu faktiskais JavaScript kods atšķirsies no tā, kas parādīts turpmākajos piemēros, taču process ir vienāds visos gadījumos.
Pirmais piemērs
|_+_|Otrais piemērs
|_+_|Trešais piemērs
|_+_|Jūsu iegultajam JavaScript vajadzētu izskatīties līdzīgi vienam no trim iepriekš minētajiem piemēriem. Protams, jūsu faktiskais JavaScript kods atšķirsies no parādītā, taču JavaScript, iespējams, tiks iegults lapā, izmantojot kādu no iepriekš minētajām trim metodēm. Dažos gadījumos jūsu kods var izmantot novecojušu language='javascript' tā vietā type='text/javascript' tādā gadījumā, iespējams, vēlēsities atjaunināt savu kodu, aizstājot valodas atribūtu ar atribūtu viens.
Lai varētu izvilkt JavaScript savā failā, vispirms ir jāidentificē izņemamais kods. Visos trijos iepriekš minētajos piemēros ir jāizvelk divas faktiskā JavaScript koda rindas. Jūsu skriptā, iespējams, būs daudz vairāk rindiņu, taču to var viegli identificēt, jo tas jūsu lapā ieņems tādu pašu vietu kā divas JavaScript rindiņas, kuras esam izcēluši iepriekš minētajos trīs piemēros (visos trīs piemēros ir vienas un tās pašas divas rindiņas JavaScript, tikai konteiners ap tiem ir nedaudz atšķirīgs).
- Pirmā lieta, kas jums jādara, lai faktiski izvilktu JavaScript atsevišķā failā, ir atvērt vienkārša teksta redaktoru un piekļūt savas tīmekļa lapas saturam. Pēc tam jums ir jāatrod iegultais JavaScript, ko ieskauj viens no koda variantiem, kas parādīti iepriekš minētajos piemēros.
- Kad esat atradis JavaScript kodu, tas ir jāatlasa un jāpārkopē starpliktuvē. Iepriekš minētajā piemērā atlasamais kods ir izcelts, jums nav jāatlasa skripta tagi vai papildu komentāri, kas var parādīties ap jūsu JavaScript kodu.
- Atveriet citu vienkāršā teksta redaktora kopiju (vai citu cilni, ja jūsu redaktors atbalsta vairāku failu atvēršanu vienlaikus) un pārlaidiet tajā JavaScript saturu.
- Atlasiet aprakstošu faila nosaukumu, ko izmantot jaunajam failam, un saglabājiet jauno saturu, izmantojot šo faila nosaukumu. Izmantojot piemēra kodu, skripta mērķis ir izkļūt no rāmjiem, lai varētu būt atbilstošs nosaukums framebreak.js .
- Tagad mums ir JavaScript atsevišķā failā, mēs atgriežamies redaktorā, kur mums ir sākotnējais lapas saturs, lai tajā veiktu izmaiņas, lai izveidotu saiti uz skripta ārējo kopiju.
- Tā kā tagad skripts ir atsevišķā failā, mēs varam noņemt visu, kas atrodas starp skripta tagiem mūsu sākotnējā saturā, lai
- Pēdējais solis ir skripta tagam pievienot papildu atribūtu, kas nosaka, kur tas var atrast ārējo JavaScript. Mēs to darām, izmantojot a src='faila nosaukums' atribūts. Izmantojot mūsu skripta piemēru, mēs norādītu src='framebreak.js'.
- Vienīgais sarežģījums ir tas, ja mēs esam nolēmuši saglabāt ārējos JavaScript atsevišķās mapēs no tīmekļa lapām, kurās tie tiek izmantoti. Ja to darāt, faila nosaukuma priekšā jāpievieno ceļš no tīmekļa lapas mapes uz JavaScript mapi. Piemēram, ja JavaScript tiek glabāti a js mapi mapē, kurā atrodas mūsu nepieciešamās tīmekļa lapas src='js/framebreak.js'
Tātad, kā izskatās mūsu kods pēc tam, kad esam atdalījuši JavaScript atsevišķā failā? Mūsu piemēra JavaScript gadījumā (pieņemot, ka JavaScript un HTML atrodas vienā mapē) mūsu HTML tīmekļa lapā tagad skan:
|_+_|Mums ir arī atsevišķs fails ar nosaukumu framebreak.js, kurā ir:
|_+_|
Jūsu faila nosaukums un faila saturs ievērojami atšķirsies no tā, jo jūs būsiet izvilcis visu JavaScript, kas tika iegults jūsu tīmekļa lapā, un failam piešķīris aprakstošu nosaukumu, pamatojoties uz tā darbību. Faktiskais tā ieguves process būs vienāds neatkarīgi no tā, kuras līnijas tas satur.
Kā ar tām pārējām divām rindām katrā no otrajā un trešajā piemēriem? Šo rindiņu mērķis otrajā piemērā ir paslēpt JavaScript no Netscape 1 un Internet Explorer 2, no kuriem neviens vairs neizmanto, un tāpēc šīs rindas patiesībā nav vajadzīgas. Ievietojot kodu ārējā failā, kods tiek paslēpts no pārlūkprogrammām, kuras neizprot skripta tagu, efektīvāk nekā tā ievietošana HTML komentārā. Trešais piemērs tiek izmantots XHTML lapām, lai norādītu pārbaudītājiem, ka JavaScript ir jāuzskata par lapas saturu, nevis lai apstiprinātu to kā HTML (ja izmantojat HTML doctype, nevis XHTML, tad pārbaudītājs to jau zina un tāpēc šos tagus nav nepieciešami). Ja JavaScript ir atsevišķā failā, lapā vairs nav JavaScript, ko pārbaudītāji varētu izlaist, tāpēc šīs rindiņas vairs nav vajadzīgas.
Viens no visnoderīgākajiem veidiem, kā JavaScript var izmantot, lai tīmekļa lapai pievienotu funkcionalitāti, ir sava veida apstrāde, reaģējot uz jūsu apmeklētāja darbību. Visizplatītākā darbība, uz kuru vēlaties reaģēt, ir tad, kad apmeklētājs uz kaut kā noklikšķina. Tiek saukts notikumu apstrādātājs, kas ļauj atbildēt uz apmeklētājiem, kuri noklikšķina uz kaut kā onclick .
Kad lielākā daļa cilvēku pirmo reizi domā par onclick notikumu apdarinātāja pievienošanu savai tīmekļa lapai, viņi nekavējoties domā par tā pievienošanu vietnei tagu. Tas dod koda daļu, kas bieži izskatās šādi:
|_+_|
Tas ir nepareizi veids, kā izmantot onclick, ja vien atribūtā href nav jēgpilnas adreses, lai tie, kuriem nav JavaScript, tiktu kaut kur pārsūtīti, noklikšķinot uz saites. Daudzi cilvēki no šī koda arī atstāj vārdu “return false” un brīnās, kāpēc pašreizējās lapas augšdaļa vienmēr tiek ielādēta pēc skripta palaišanas (tas ir tas, ko href='#' liek lapai darīt, ja vien false tiek atgriezts no visiem notikumu apstrādātājiem. Protams, ja jums ir kaut kas jēgpilns kā saites galamērķis, iespējams, vēlēsities tur doties pēc onclick koda palaišanas, un tad jums nebūs vajadzīgs 'return false'.
Daudzi cilvēki neapzinās, ka var pievienot onclick notikumu apstrādātāju jebkura HTML tagu tīmekļa lapā, lai mijiedarbotos, kad apmeklētājs noklikšķina uz šī satura. Tātad, ja vēlaties kaut ko palaist, kad cilvēki noklikšķina uz attēla, varat izmantot:
|_+_|
Ja vēlaties kaut ko palaist, kad cilvēki noklikšķina uz kāda teksta, varat izmantot:
|_+_|Protams, tie nesniedz automātisku vizuālu norādi, ka būs atbilde, ja apmeklētājs noklikšķinās uz tiem tā, kā to dara saite, taču jūs varat pietiekami vienkārši pievienot šo vizuālo norādi, atbilstoši veidojot attēla stilu vai diapazonu.
Otra lieta, kas jāņem vērā saistībā ar šiem onclick notikumu apdarinātāja pievienošanas veidiem, ir tāda, ka tiem nav nepieciešama atgriešana “false”, jo nav noklusējuma darbības, kas notiks, noklikšķinot uz elementa, kas ir jāatspējo.
Šie onclick pievienošanas veidi ir liels uzlabojums sliktajai metodei, ko izmanto daudzi cilvēki, taču tas joprojām ir tālu no tā, lai tas būtu labākais veids, kā to kodēt. Viena problēma, pievienojot onclick, izmantojot kādu no iepriekš minētajām metodēm, ir tā, ka tā joprojām sajauc jūsu JavaScript ar jūsu HTML. onclick ir nē HTML atribūts, tas ir JavaScript notikumu apstrādātājs. Tādējādi, lai atdalītu JavaScript no HTML, lai lapu būtu vieglāk uzturēt, mums šī onclick atsauce no HTML faila ir jāiegūst atsevišķā JavaScript failā, kurā tā ir.
Vienkāršākais veids, kā to izdarīt, ir aizstāt onclick HTML ar id kas atvieglos notikumu apdarinātāja pievienošanu atbilstošajai vietai HTML. Tātad mūsu HTML tagad var saturēt vienu no šiem apgalvojumiem:
|_+_|Pēc tam mēs varam kodēt JavaScript atsevišķā JavaScript failā, kas ir saistīts ar lapas pamatteksta apakšdaļu vai kas atrodas lapas galvā un kur mūsu kods atrodas funkcijā, kas pati tiek izsaukta pēc lapas ielādes pabeigšanas. . Mūsu JavaScript, lai pievienotu notikumu apstrādātājus, tagad izskatās šādi:
|_+_|Viena lieta, kas jāņem vērā. Jūs ievērosiet, ka onclick vienmēr esam rakstījuši tikai ar mazajiem burtiem. Kodējot paziņojumu savā HTML, jūs redzēsiet, ka daži cilvēki to raksta kā onClick. Tas ir nepareizi, jo JavaScript notikumu apdarinātāju nosaukumi ir visi ar mazajiem burtiem un nav tāda apdarinātāja kā onClick. Varat izvairīties no tā, iekļaujot JavaScript savā HTML tagā tieši, jo HTML nav reģistrjutīgs un pārlūkprogramma to savienos ar pareizo nosaukumu. Jūs nevarat izvairīties no nepareizas lielo burtu lietojuma savā JavaScript, jo JavaScript ir reģistrjutīgs un JavaScript nav tādas lietas kā onClick.
Šis kods ir milzīgs uzlabojums salīdzinājumā ar iepriekšējām versijām, jo tagad mēs gan pievienojam notikumu pareizajam elementam mūsu HTML, gan JavaScript ir pilnībā nošķirts no HTML. Tomēr mēs varam to uzlabot vēl vairāk.
Viena problēma, kas paliek, ir tāda, ka konkrētam elementam varam pievienot tikai vienu onclick notikumu apdarinātāju. Ja mums jebkurā brīdī tam pašam elementam jāpievieno cits onclick notikumu apdarinātājs, iepriekš pievienotā apstrāde šim elementam vairs netiks pievienota. Ja pievienojat savai tīmekļa lapai dažādus dažādus skriptus dažādiem mērķiem, pastāv vismaz iespēja, ka divi vai vairāki no tiem var vēlēties veikt apstrādi, kas jāveic, noklikšķinot uz tā paša elementa. Šīs problēmas netīrais risinājums ir noteikt, kur šī situācija rodas, un apvienot apstrādi, kas jāsasauc kopā, ar funkciju, kas veic visu apstrādi.
Lai gan šādas sadursmes ar onclick ir retāk sastopamas nekā ar ielādi, iepriekšēja sadursmju identificēšana un apvienošana nav ideāls risinājums. Tas nepavisam nav risinājums, ja faktiskā apstrāde, kas jāpievieno elementam, laika gaitā mainās tā, ka dažreiz ir jādara viena lieta, dažreiz cita, un dažreiz abas.
Labākais risinājums ir pilnībā pārtraukt notikumu apdarinātāja izmantošanu un tā vietā izmantot JavaScript notikumu uztvērēju (kopā ar atbilstošo JScript atvēršanas notikumu, jo šī ir viena no situācijām, kad JavaScript un JScript atšķiras). To var izdarīt visvieglāk, vispirms izveidojot funkciju addEvent, kas pievienos notikumu uztvērēju vai pielikumu atkarībā no tā, kuru no diviem atbalsta palaistā valoda;
|_+_|Tagad mēs varam pievienot apstrādi, kuru mēs vēlamies, lai notiktu, kad uz mūsu elementa tiek noklikšķināts, izmantojot:
|_+_|Šīs metodes izmantošana apstrādājamā koda pievienošanai, kad tiek noklikšķināts uz elementa, nozīmē, ka, veicot vēl vienu addEvent izsaukumu, lai pievienotu citu funkciju, kas tiks izpildīta, kad tiek noklikšķināts uz konkrēta elementa, iepriekšējā apstrāde neaizstās ar jauno apstrādi, bet gan ļaus abas izpildāmās funkcijas. Izsaucot addEvent, mums nav jāzina, vai elementam jau ir pievienota funkcija, kas jāpalaiž, kad uz tā tiek noklikšķināts, jaunā funkcija tiks darbināta kopā ar iepriekš pievienotajām funkcijām.
Vai mums ir nepieciešama iespēja noņemt funkcijas no tā, kas tiek palaists, noklikšķinot uz elementa, tad mēs varētu izveidot atbilstošu deleteEvent funkciju, kas izsauc atbilstošo funkciju notikumu uztvērēja vai pievienotā notikuma noņemšanai?
Viens no šī pēdējā apstrādes pievienošanas veida trūkumiem ir tas, ka patiešām vecās pārlūkprogrammas neatbalsta šos salīdzinoši jaunos notikumu apstrādes pievienošanas veidus tīmekļa lapai. Šobrīd vajadzētu būt pietiekami mazam cilvēku, kas izmanto šādas novecojušas pārlūkprogrammas, lai tās neņemtu vērā J(ava)Script, ko mēs rakstām, izņemot koda rakstīšanu tā, lai tas neradītu milzīgu skaitu kļūdu ziņojumu. Iepriekš minētā funkcija ir rakstīta tā, lai neko nedarītu, ja netiek atbalstīts neviens no tās izmantotajiem veidiem. Lielākā daļa no šīm patiešām vecajām pārlūkprogrammām neatbalsta arī metodi getElementById atsaucei uz HTML, tāpēc tas ir vienkāršs if (!document.getElementById) return false; būtu piemērota arī jebkuras jūsu funkcijas augšpusē, kas veic šādus zvanus. Protams, daudzi cilvēki, kas raksta JavaScript, nav tik vērīgi pret tiem, kas joprojām izmanto antīkas pārlūkprogrammas, un tāpēc šiem lietotājiem ir jāpierod, ka gandrīz katrā apmeklētajā tīmekļa lapā tiek rādītas JavaScript kļūdas.
Kuru no šiem dažādajiem veidiem jūs izmantojat, lai savai lapai pievienotu apstrādi, kas tiks izpildīta, kad apmeklētāji uz kaut kā noklikšķina? Ja veids, kā jūs to darāt, ir tuvāk piemēriem lapas augšdaļā, nevis piemēriem lapas apakšā, iespējams, ir pienācis laiks padomāt par to, kā uzlabot veidu, kā rakstīt onclick apstrādi, lai izmantotu kādu no labākajām metodēm. parādīts lapas apakšā.
Aplūkojot vairāku pārlūkprogrammu notikumu uztvērēja kodu, jūs pamanīsit, ka ir ceturtais parametrs, kuru mēs saucām uC , kuras lietošana nav acīmredzama no iepriekšējā apraksta.
Pārlūkprogrammām ir divas dažādas secības, kurās tās var apstrādāt notikumus, kad notikums tiek aktivizēts. Tie var darboties no ārpuses uz iekšu, sākot no taga uz tagu, kas aktivizēja notikumu, vai arī no iekšpuses uz āru, sākot ar visprecīzāko tagu. Šos divus sauc sagūstīt un burbulis attiecīgi un lielākā daļa pārlūkprogrammu ļauj izvēlēties, kurā pasūtījuma vairāku apstrādi vajadzētu palaist, iestatot šo papildu parametru.
- uC = patiess, lai apstrādātu uztveršanas fāzē
- uC = false, lai apstrādātu burbuļa fāzē.
Tātad, ja ir vairāki citi tagi, kas ir apvilkti ap to, kas tika aktivizēts notikuma tveršanas fāzē, vispirms tiek izpildīts, sākot ar attālāko tagu un virzās uz to, kas aktivizēja notikumu, un pēc tam, kad tags, kuram notikums tika pievienots, ir apstrādāts. burbuļa fāze apvērš procesu un atkal izdziest.
Internet Explorer un tradicionālie notikumu apstrādātāji vienmēr apstrādā burbuļa fāzi, nevis uztveršanas fāzi, tāpēc vienmēr sāciet ar visprecīzāko tagu un strādājiet uz āru.
Tātad ar notikumu apstrādātājiem:
|_+_|noklikšķinot uz xx izplūstu, vispirms aktivizējot brīdinājumu ('b') un pēc tam brīdinājumu ('a').
Ja šie brīdinājumi tika pievienoti, izmantojot notikumu uztvērējus ar uC true, tad visas mūsdienu pārlūkprogrammas, izņemot Internet Explorer, vispirms apstrādātu brīdinājumu ('a') un pēc tam brīdinājumu ('b').