Share
În ultimii ani, JavaScript a câștigat din ce în ce mai mult popularitate, parțial din cauza bibliotecilor care sunt dezvoltate pentru a face aplicațiile / efectele JavaScript mai ușor de creat pentru cei care nu au reușit să înțeleagă încă limba de bază.
În timp ce în trecut a fost un argument comun că JavaScript a fost un limbaj de bază și a fost foarte "slap dash", fără o bază reală; acest lucru nu mai este cazul, mai ales prin introducerea unor aplicații web de mare amploare și a unor "adaptări" precum JSON (JavaScript Object Notation).
JavaScript poate avea tot ceea ce o limbă orientată pe obiecte are de oferit, deși cu un efort suplimentar în afara domeniului de aplicare al acestui articol.
funcția myObject () ;
Felicitări, tocmai ați creat un obiect. Există două moduri de a crea un obiect JavaScript: ele sunt "Funcții constructor" și "Notă literară". Cel de mai sus este o funcție Constructor, voi explica ce este diferența în scurt timp, dar înainte de a face, iată ce arată o definiție de obiect folosind notarea literală.
var myObject = ;
Literal este o opțiune preferată pentru spațierea denumirilor astfel încât codul dvs. JavaScript să nu interfereze (sau invers) cu alte script-uri care rulează pe pagină și, de asemenea, dacă utilizați acest obiect ca un singur obiect și nu necesită mai mult de o instanță a obiect, în timp ce este preferată notarea tipului de funcții Constructor dacă trebuie să faceți o lucrare inițială înainte ca obiectul să fie creat sau să necesite mai multe instanțe ale obiectului în care fiecare instanță poate fi schimbată pe parcursul duratei de viață a scriptului. Să continuăm să construim simultan ambele obiecte, astfel încât să putem observa diferențele.
Accentsconagua
funcția myObject () this.iAm = 'un obiect'; this.whatAmI = funcția () alertă ("Eu sunt" + this.iAm); ; ; var myObject = iAm: 'un obiect', ceAmI: function () alert ('Eu sunt' + this.iAm); Pentru fiecare dintre obiectele create am proprietatea 'iAm' care conține o valoare de șir care este folosită în metoda obiectelor noastre 'whatAmI' care avertizează un mesaj.
Proprietățile sunt variabile create în interiorul unui obiect și metodele sunt funcții create în interiorul unui obiect.
Acum este, probabil, la fel de bun ca orice pentru a explica cum să utilizați proprietățile și metodele (deși ați fi făcut deja acest lucru dacă sunteți familiarizat cu o bibliotecă).
Pentru a folosi o proprietate mai întâi introduceți obiectul în care aparține - deci în acest caz este myObject - și apoi pentru a face referire la proprietățile sale interne, puneți o oprire completă și apoi numele proprietății astfel încât în final va arăta ca myObject.iAm ( aceasta va reveni "un obiect").
Pentru metode, este aceeași cu excepția executării metodei, ca și în cazul oricărei funcții, trebuie să introduceți paranteze după aceasta; altfel veți reveni doar la o referință la funcție și nu la ceea ce se întoarce de fapt. Deci, va arata ca myObject.whatAmI () (aceasta va alerta 'Sunt un obiect').
Există, de asemenea, o diferență între modul în care sunt utilizate aceste două tipuri de declarații de obiect.
Pentru a utiliza un obiect notat literal, pur și simplu îl folosiți referindu-i numele variabilei, deci ori de câte ori este necesar să-l numiți tastând;
myObject.whatAmI ();
Cu funcțiile constructorului trebuie să instanțiați mai întâi (creați o nouă instanță) a obiectului; faceți acest lucru tastând;
var myNewObject = noul myObject (); myNewObject.whatAmI ();
Să folosim funcția anterioară a constructorului și să construim pe acesta, astfel încât să realizeze unele operații de bază (dar dinamice) atunci când îl instanțiăm.
funcția myObject () this.iAm = 'un obiect'; this.whatAmI = funcția () alertă ("Eu sunt" + this.iAm); ; ; La fel ca orice funcție JavaScript, putem folosi argumentele cu funcția constructorului nostru;
funcția myObject (ce) this.iAm = ce; this.whatAmI = funcția (limbă) alert ('Sunt' + this.iAm + 'din' + limba + 'limba'); ; ; Acum, hai să instanțializăm obiectul nostru și să-i numim metoda "whatAmI", completând câmpurile obligatorii pe măsură ce facem acest lucru.
var myNewObject = noul myObject ('un obiect'); myNewObject.whatAmI ( 'JavaScript'); Aceasta va avertiza "Sunt un obiect al limbajului JavaScript".
Am menționat mai devreme despre diferențele dintre constructorii de obiecte și literalul obiectelor și că atunci când se face o modificare a unui obiect literar, acesta afectează acest obiect în întregul scenariu, în timp ce atunci când o funcție Constructor este instanțiată și apoi se face o schimbare la acel exemplu, nu va afecta alte instanțe ale obiectului respectiv. Să încercăm un exemplu;
Mai întâi vom crea un obiect literal;
var myObjectLiteral = myProperty: 'aceasta este o proprietate' // alert curent myProperty alert (myObjectLiteral.myProperty); // aceasta va avertiza 'aceasta este o proprietate' // change myProperty myObjectLiteral.myProperty = 'aceasta este o proprietate nouă'; // alerta alertă curentă myProperty (myObjectLiteral.myProperty); // aceasta va avertiza "aceasta este o proprietate nouă", cum era de așteptat
Chiar dacă creați o nouă variabilă și o orientați spre obiect, va avea același efect.
var myObjectLiteral = myProperty: 'aceasta este o proprietate' // alert curent myProperty alert (myObjectLiteral.myProperty); // aceasta va avertiza 'aceasta este o proprietate' // defini noua variabila cu obiect ca valoare var sameObject = myObjectLiteral; // change myProperty myObjectLiteral.myProperty = 'aceasta este o proprietate nouă'; // alerta alertă curentă myProperty (sameObject.myProperty); // aceasta va avertiza încă "aceasta este o proprietate nouă"
Acum, să încercăm un exercițiu similar cu o funcție Constructor.
// aceasta este o altă modalitate de a crea o funcție Constructor var myObjectConstructor = funcția () this.myProperty = 'aceasta este o proprietate' // instanțiate constructorul nostru constructorOrgin = new myObjectConstructor (); // instanțiați oa doua instanță a constructorului nostru constructor varTwo = new myObjectConstructor (); // alerte curente myProperty of constructorOnea stare de alertă (constructorOne.myProperty); // aceasta va avertiza 'aceasta este o proprietate' // alert current myProperty of constructorDouă instanță alert (constructorTwo.myProperty); // aceasta va avertiza "aceasta este o proprietate"
Asa cum era de asteptat, amandoua returneaza valoarea corecta, dar sa schimbam myProperty pentru unul dintre instante.
// aceasta este o altă modalitate de a crea o funcție Constructor var myObjectConstructor = funcția () this.myProperty = 'aceasta este o proprietate' // instanțiate constructorul nostru constructorOrgin = new myObjectConstructor (); // modificați myProperty din primul exemplu constructorOne.myProperty = 'aceasta este o proprietate nouă'; // instanțiați oa doua instanță a constructorului nostru constructor varTwo = new myObjectConstructor (); // alerte curente myProperty of constructorOnea stare de alertă (constructorOne.myProperty); // aceasta va avertiza 'aceasta este o proprietate nouă' // alert current myProperty of constructorDouă instanță alert (constructorTwo.myProperty); // aceasta va avertiza în continuare "aceasta este o proprietate"
După cum puteți vedea din acest exemplu, chiar dacă am schimbat proprietatea constructorului, acesta nu a afectat myObjectConstructor și, prin urmare, nu a afectat constructorTwo. Chiar dacă constructorul TWo a fost instanțiat înainte de a schimba proprietatea myProperty a constructorOne, acesta nu va afecta încă proprietatea myProperty a constructorTwo, deoarece este o instanță complet diferită a obiectului din memoria JavaScript.
Deci, care ar trebui să o utilizați? Ei bine, depinde de situație, dacă aveți nevoie doar de un obiect de acest fel pentru scriptul dvs. (după cum veți vedea în exemplul nostru la sfârșitul acestui articol), atunci utilizați un obiect literal, dar dacă aveți nevoie de mai multe instanțe ale unui obiect , în care fiecare instanță este independentă de cealaltă și poate avea proprietăți sau metode diferite în funcție de modul în care este construită, atunci folosiți o funcție a constructorului.
În timp ce explica funcțiile constructorului, au fost aruncate multe "cuvinte cheie" în această privință și îmi imaginez ce moment mai bun să vorbim despre domeniul de aplicare!
Acum s-ar putea să vă întrebați "despre ce se referă acest domeniu"? Domeniul de aplicare în JavaScript este bazat pe funcție / obiect, deci înseamnă că, dacă sunteți în afara unei funcții, nu puteți utiliza o variabilă care este definită în interiorul unei funcții (dacă nu utilizați o închidere).
Există totuși un lanț de domeniu, ceea ce înseamnă că o funcție din interiorul unei alte funcții poate accesa o variabilă definită în funcția sa parentală. Să aruncăm o privire la un exemplu de cod.
După cum puteți vedea în acest exemplu, var1 este definită în obiectul global și este disponibilă pentru toate funcțiile și obiectul, var2 este definită în interiorul funcției1 și este disponibilă pentru funcția1 și funcția2, dar dacă încercați să o referiți la obiectul global, vă va da eroarea "var2 este nedefinită", var3 este accesibil numai funcției2.
Deci, ce face referința? Într-un browser, "acest" se referă la obiectul ferestrei, astfel încât din punct de vedere tehnic fereastra este obiectul nostru global. Dacă suntem în interiorul unui obiect, "acest" se va referi la obiectul propriu-zis, totuși dacă sunteți în interiorul unei funcții, aceasta se va referi în continuare la obiectul ferestrei și, de asemenea, dacă sunteți într-o metodă care se află într-un obiect, aceasta se va referi la obiect.
Datorită lanțului nostru de aplicații, dacă suntem în interiorul unui sub-obiect (un obiect în interiorul unui obiect), "aceasta" se va referi la sub-obiect și nu la obiectul-mamă.
Ca o notă laterală, merită să adăugăm că atunci când folosiți funcții precum setInterval, setTimeout și eval, atunci când executați o funcție sau o metodă prin intermediul uneia dintre acestea, 'this' se referă la obiectul ferestrei, deoarece acestea sunt metode de fereastră, deci setInterval ) și window.setInterval () sunt aceleași.
Bine, acum că am depășit acest lucru, să facem un exemplu real al lumii și să creăm un obiect de validare a formularului!
Mai intai trebuie sa va prezint functia addEvent pe care o vom crea si este o combinatie a functiei addEventListener () Firefox, Safari, etc ...) si a functiei attachEvent () a Microsoft ActiveX Script.
funcția addEvent (la, tip, fn) if (document.addEventListener) to.addEventListener (type, fn, false); altfel dacă (document.attachEvent) to.attachEvent ('on' + type, fn); altceva to ['on' + type] = fn; ; Aceasta creează o nouă funcție cu trei argumente, la fiind obiectul DOM pe care îl atașăm la eveniment, tip fiind tipul de eveniment și fn fiind funcția executată atunci când evenimentul este declanșat. Mai întâi verifică dacă addEventListener este suportat, dacă nu, va verifica atașarea și dacă toate celelalte nu reușesc, probabil că folosiți IE5 sau ceva învechit, astfel încât vom adăuga evenimentul direct pe proprietatea evenimentului său (notă: a treia opțiune va suprascrie orice funcție existentă care poate fi atașată la proprietatea evenimentului, în timp ce primele două vor adăuga aceasta ca o funcție suplimentară proprietății evenimentului său).
Acum, să ne pregătim documentul, astfel încât să fie similar cu ceea ce ați putea vedea când dezvoltați chestii jQuery.
În jQuery ai fi;
$ (document) .ready (funcția () // tot codul nostru care rulează după ce pagina este gata merge aici);
Folosind funcția addEvent avem;
addEvent (fereastra, 'load', function () // tot codul nostru care ruleaza dupa ce pagina este gata merge aici);
Acum, pentru obiectul Formular.
var Formă = validClass: 'valid', fname: minLength: 1, maxLength: 15, fieldName: 'First Name', lname: minLength: 1, maxLength: 25, fieldName: funcția (formEl, type) if (formEl.value.length> type.maxLength || formEl.value.length < type.minLength ) formEl.className = formEl.className.replace("+Form.validClass,"); return false; else if(formEl.className.indexOf("+Form.validClass) == -1) formEl.className +="+Form.validClass; return true; , validateEmail : function(formEl) var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]2,9)$/; var emailTest = regEx.test(formEl.value); if (emailTest) if(formEl.className.indexOf("+Form.validClass) == -1) formEl.className +="+Form.validClass; return true; else formEl.className = formEl.className.replace("+Form.validClass,"); return false; , getSubmit : function(formID) var inputs = document.getElementById(formID).getElementsByTagName('input'); for(var i = 0; i < inputs.length; i++) if(inputs[i].type == 'submit') return inputs[i]; return false; ; Deci, acest lucru este destul de fundamental, dar poate fi ușor extins.
Pentru a rupe acest lucru în primul rând, vom crea o nouă proprietate, care este doar numele șirului clasei noastre css "valabile" care, atunci când este aplicat câmpului de formular, adaugă efecte valide, cum ar fi o margine verde. De asemenea, definim cele două sub-obiecte, fname și lname, astfel încât să putem defini propriile proprietăți care pot fi folosite prin metode în altă parte, aceste proprietăți fiind MINLENGTH care este cantitatea minimă de caractere pe care aceste câmpuri le pot avea, lungime maxima care este caracterele maxime pe care câmpul le poate avea și numele domeniului care nu se obișnuiesc de fapt, dar ar putea fi apucat de lucruri precum identificarea câmpului cu un șir ușor de utilizat într-un mesaj de eroare (de ex..
Apoi vom crea o metodă validateLength care acceptă două argumente: Formel elementul DOM pentru a valida și tip care se referă la unul dintre sub-obiectul de utilizat (adică fname sau lname). Această funcție verifică dacă lungimea câmpului este între intervalul minLength și maxLength, dacă nu este atunci atunci când eliminăm clasa validă (dacă există) din element și return false, în caz contrar, atunci adăugăm clasa valabilă și retur Adevărat.
Apoi avem o metodă validateEmail care acceptă un element DOM ca argument, apoi testarea acestei valori a elementelor DOM față de o expresie regulată de tip e-mail; din nou, dacă trece, adăugăm clasa noastră și ne întoarcem adevărat și invers.
În cele din urmă avem o metodă getSubmit. Această metodă este dată id-ului formei și apoi buclele prin toate elementele de intrare din interiorul formularului specificat pentru a afla care dintre ele are un tip de trimitere (tip = "trimite"). Motivul pentru această metodă este de a returna butonul de trimitere, astfel încât să îl putem dezactiva până când formularul este gata să se trimită.
Să punem acest obiect validator să lucreze într-o formă reală. Mai întâi avem nevoie de codul nostru HTML.
Acum, să accesăm aceste obiecte de intrare folosind JavaScript și să le validăm atunci când formularul se prezintă.
addEvent (fereastra, 'load', function () var ourForm = document.getElementById ('ourForm'); var submit_button = Form.getSubmit ('ourForm' (Forms.validateLength (inputs [0], Form.fname)) if (Form.validateLength (intrări [1], Form.lname)) if (Form.validateEmail (input) [)] submit_button.disabled = false; return true; submit_button.disabled = 'dezactivat'; return false;; ourForm, 'submit', checkForm);); Să defalcăm acest cod.
Ne înfășurăm codul în funcția addEvent astfel încât atunci când fereastra este încărcată acest script rulează. În primul rând, luăm forma folosind ID-ul său și îl plasăm într-o variabilă numită ourForm, apoi apucam butonul nostru de trimitere (folosind metoda getSubmit a obiectelor Formulare) și pune-o într-o variabilă numită buton de trimitere, și apoi setați atributul dezactivat atributele dezactivate la "dezactivat".
Apoi definim o funcție checkForm. Aceasta stochează toate intrările din câmpul de formular ca un tablou și îl atașăm la o variabilă numită ... ați ghicit-o ... intrări! Apoi definește câteva declarații imbricate dacă testează fiecare dintre câmpurile din interiorul matricei de intrări în raport cu metodele noastre Form. Acesta este motivul pentru care ne-am întors adevărat sau fals în metodele noastre, deci dacă se întoarce adevărat, vom trece acea instrucțiune if și vom continua în următorul, dar dacă se întoarce fals, vom ieși din instrucțiunile if.
Urmând definiția funcției noastre, executăm funcția checkForm atunci când pagina se încarcă inițial și atașați funcția de asemenea la un eveniment keyup și la un eveniment de prezentare.
S-ar putea să vă întrebați, de ce atașați să trimiteți dacă am dezactivat butonul de trimitere. Dacă sunteți concentrat pe un câmp de intrare și ați apăsat tasta enter, acesta va încerca să trimită formularul și trebuie să încercăm acest lucru, de aceea motivul pentru care funcția checkForm returnează true (transmite formularul) sau false (nu trimite formă).
Deci am învățat cum să definim diferitele tipuri de obiecte în cadrul JavaScript și să creăm proprietăți și metode în cadrul acestora. De asemenea, am învățat o funcție addEvent minunată și am reușit să folosim obiectul nostru într-un exemplu de bază reală.
Aceasta conchide principiile de bază ale orientării obiectului JavaScript. Sperăm că acest lucru vă poate începe pe drumul spre construirea propriei dvs. biblioteci JavaScript! Dacă v-ați plăcut acest articol și sunteți interesat de alte subiecte legate de JavaScript, postați-le în comentarii deoarece aș fi bucuros să le continuu să le scriu. Vă mulțumim pentru lectură.
De ce să nu verificați, de asemenea, gama de articole JavaScript pe CodeCanyon. Puteți găsi scripturi pentru crearea de glisoare, numărătoare inversă, încărcătoare și încărcătoare și multe altele.
Articolele JavaScript populare pe Envato Market
