Share
I de senere årene har JavaScript blitt stadig mer populært, delvis på grunn av biblioteker som er utviklet for å gjøre JavaScript-apps / -ffekter enklere å lage for de som kanskje ikke har forstått kjernespråket ennå.
I det siste var det et vanlig argument at JavaScript var et grunnleggende språk og var veldig "slap dash" uten egentlig grunnlag; dette er ikke lenger tilfelle, spesielt med innføring av websøk i store skalaer og "tilpasninger" som JSON (JavaScript Object Notation).
JavaScript kan ha alt det objektorienterte språket har å tilby, om enn med litt ekstra innsats utenfor rammen av denne artikkelen.
funksjon myObject () ;
Gratulerer, du har nettopp opprettet et objekt. Det er to måter å opprette et JavaScript-objekt på: de er 'Constructor-funksjoner' og 'Literal notation'. Den ene over er en Constructor-funksjon, jeg skal forklare hva forskjellen er kort, men før jeg gjør det, her er det en Objektdefinisjon ser ut som å bruke bokstavelig notasjon.
var myObject = ;
Literal er et foretrukket alternativ for navnavstand, slik at JavaScript-koden din ikke forstyrrer (eller omvendt) med andre skript som kjører på siden, og også hvis du bruker dette objektet som et enkelt objekt og ikke krever mer enn en forekomst av objekt, mens konstruktørfunksjonstype notasjon er foretrukket hvis du trenger å gjøre noe opprinnelig arbeid før objektet er opprettet eller krever flere forekomster av objektet der hver forekomst kan endres i løpet av scriptets levetid. La oss fortsette å bygge på begge våre objekter samtidig, slik at vi kan observere hva forskjellene er.
Accentsconagua
funksjon myObject () this.iAm = 'et objekt'; this.whatAmI = function () alert ('jeg er' + this.iAm); ; ; var myObject = iAm: 'et objekt', whatAmI: function () alert ('Jeg er' + this.iAm); For hver av objektene har vi opprettet en egenskap 'iAm' som inneholder en strengverdi som brukes i vår objekts metode 'whatAmI' som varsler en melding.
Egenskaper er variabler opprettet i et objekt, og metoder er funksjoner som er opprettet i et objekt.
Nå er det nok så god tid som noen å forklare hvordan man bruker egenskaper og metoder (selv om du allerede har gjort det hvis du er kjent med et bibliotek).
For å bruke en eiendom først skriver du hvilket objekt det tilhører - så i dette tilfellet er det myObject - og deretter for å referere til sine interne egenskaper, setter du et stopp og deretter navnet på eiendommen slik at det til slutt vil se ut som myObject.iAm ( dette vil returnere "et objekt").
For metoder er det det samme unntatt å utføre metoden, som med hvilken som helst funksjon, må du sette parentes etter det; ellers vil du bare returnere en referanse til funksjonen og ikke hva funksjonen faktisk returnerer. Så det vil se ut som myObject.whatAmI () (dette vil varsle 'Jeg er et objekt').
Det er også en forskjell mellom måten disse to typer objektdeklarasjoner brukes på.
For å bruke et bokstavelig notert objekt, bruker du det bare ved å referere til variabelenavnet, så det er nødvendig, kaller du det ved å skrive;
myObject.whatAmI ();
Med konstruktørfunksjoner må du instantiere (lage en ny forekomst av) objektet først; du gjør dette ved å skrive;
var myNewObject = ny myObject (); myNewObject.whatAmI ();
La oss bruke vår tidligere konstruktørfunksjon og bygge videre på den, slik at den utfører noen grunnleggende (men dynamiske) operasjoner når vi ordner det.
funksjon myObject () this.iAm = 'et objekt'; this.whatAmI = function () alert ('jeg er' + this.iAm); ; ; På samme måte som enhver JavaScript-funksjon, kan vi bruke argumenter med vår konstruktørfunksjon;
funksjon myObject (hva) this.iAm = what; this.whatAmI = funksjon (språk) alert ('jeg er' + this.iAm + 'av' + språk + 'språk'); ; ; La oss nå instantiere vårt objekt og ringe sin whatAmI-metode, og fylle ut de nødvendige feltene slik vi gjør det.
var myNewObject = nytt myObject ('et objekt'); myNewObject.whatAmI (Script-); Dette vil varsle: "Jeg er et objekt av JavaScript-språket."
Jeg nevnte tidligere om forskjellene mellom Objektkonstruksjoner og Objekt Literals, og at når en endring er gjort til et Objekt Literal, påvirker det objektet over hele skriptet, mens når en Constructor-funksjon er instansiert og deretter endres til det forekomsten, blir det vil ikke påvirke andre forekomster av objektet. La oss prøve et eksempel;
Først vil vi skape et objekt bokstavelig;
var myObjectLiteral = myProperty: 'dette er en eiendom' // varsel nåværende myProperty-varsel (myObjectLiteral.myProperty); // dette vil varsle 'dette er en eiendom' // endre myProperty myObjectLiteral.myProperty = 'dette er en ny eiendom'; // varsel nåværende myProperty-varsel (myObjectLiteral.myProperty); // dette vil varsle 'dette er en ny eiendom', som forventet
Selv om du lager en ny variabel og peker den mot objektet, har den samme effekt.
var myObjectLiteral = myProperty: 'dette er en eiendom' // varsel nåværende myProperty-varsel (myObjectLiteral.myProperty); // dette vil varsle 'dette er en eiendom' // definere ny variabel med objekt som verdi var sameObject = myObjectLiteral; // endre myProperty myObjectLiteral.myProperty = 'dette er en ny eiendom'; // varsel nåværende myProperty alert (sameObject.myProperty); // dette vil fortsatt varsle 'dette er en ny eiendom'
La oss nå prøve en lignende øvelse med en Constructor-funksjon.
// dette er en annen måte å skape en Constructor-funksjon var myObjectConstructor = funksjon () this.myProperty = 'dette er en eiendom' // instantiate vår Constructor var constructorOne = new myObjectConstructor (); // Installer en andre forekomst av vår Constructor var constructorTwo = ny myObjectConstructor (); // varsel nåværende myProperty of constructorOne eksempelvarsel (constructorOne.myProperty); // dette vil varsle 'dette er en eiendom' // varsel nåværende myProperty of constructorTwo eksempelvarsling (constructorTwo.myProperty); // dette vil varsle 'dette er en eiendom'
Så som forventet, returnerer begge den riktige verdien, men la oss endre myProperty for en av tilfellene.
// dette er en annen måte å skape en Constructor-funksjon var myObjectConstructor = funksjon () this.myProperty = 'dette er en eiendom' // instantiate vår Constructor var constructorOne = new myObjectConstructor (); // endre myProperty of the first instance constructorOne.myProperty = 'dette er en ny eiendom'; // Installer en andre forekomst av vår Constructor var constructorTwo = ny myObjectConstructor (); // varsel nåværende myProperty of constructorOne eksempelvarsel (constructorOne.myProperty); // dette vil varsle 'dette er en ny eiendom' // varsel nåværende myProperty of constructorTwo eksempelvarsling (constructorTwo.myProperty); // dette vil fortsatt varsle 'dette er en eiendom'
Som du kan se fra dette eksempelet, selv om vi endret egenskapen til constructorOne, har det ikke påvirket myObjectConstructor og påvirket derfor ikke constructorTwo. Selv om constructorTwo ble instantiated før vi endret egenskapen myProperty til constructorOne, ville det fortsatt ikke påvirke myProperty-egenskapen til constructorTwo, da det er en helt annen forekomst av objektet i JavaScript-minnet.
Så hvilken skal du bruke? Vel, det avhenger av situasjonen, hvis du bare trenger ett objekt av sitt slag for skriptet ditt (som du vil se i vårt eksempel i slutten av denne artikkelen), bruk deretter et objekt bokstavelig, men hvis du trenger flere forekomster av en gjenstand , hvor hver forekomst er uavhengig av den andre og kan ha forskjellige egenskaper eller metoder avhengig av måten den er konstruert på, bruk deretter en konstruktørfunksjon.
Mens du forklarte konstruktørfunksjoner, var det mange "dette" søkeordene som ble kastet rundt, og jeg regner med hvilken bedre tid å snakke om omfanget!
Nå kan du spørre 'hva er dette omfanget du snakker om'? ' Omfanget i JavaScript er funksjon / objekt basert, så det betyr at hvis du er utenfor en funksjon, kan du ikke bruke en variabel som er definert inne i en funksjon (med mindre du bruker en nedleggelse).
Det er imidlertid en omfangskæde, som betyr at en funksjon i en annen funksjon kan få tilgang til en variabel som er definert i sin overordnede funksjon. La oss ta en titt på noen eksempler kode.
Som du kan se i dette eksemplet, Var1 er definert i det globale objektet og er tilgjengelig for alle funksjoner og objekt, var2 er definert i funksjon1 og er tilgjengelig for funksjon1 og funksjon2, men hvis du prøver å referere den fra det globale objektet, vil det gi deg feilen 'var2 er udefinert', var3 er kun tilgjengelig for funksjon2.
Så hva gjør 'denne' referansen? Vel i en nettleser, refererer dette til vinduet objektet, så teknisk er vinduet vårt globale objekt. Hvis vi er inne i et objekt, vil "dette" referere til selve objektet, men hvis du er inne i en funksjon, vil dette fortsatt referere til vinduet objektet og på samme måte hvis du er innenfor en metode som er innenfor et objekt, dette vil referere til objektet.
På grunn av omfangskjeden vår, hvis vi er inne i et underobjekt (et objekt inne i et objekt), vil "dette" referere til underobjektet og ikke overordnet objekt.
Som sidenotat er det også verdt å legge til at når du bruker funksjoner som setInterval, setTimeout og eval, når du utfører en funksjon eller metode via en av disse, refererer "dette" til vinduobjektet da disse er metoder for vindu, så settInterval ( ) og window.setInterval () er de samme.
Ok nå, når vi har det ute av veien, la oss gjøre et ekte verdenseksempel og opprette et formvalideringsobjekt!
Først må jeg presentere deg til addEvent-funksjonen som vi vil opprette og er en kombinasjon av ECMAScripts (Firefox, Safari, etc ...) addEventListener () -funksjonen og Microsoft ActiveX Script's attachEvent () -funksjonen.
funksjon addEvent (til, type, fn) if (document.addEventListener) to.addEventListener (type, fn, false); annet hvis (document.attachEvent) to.attachEvent ('on' + type, fn); ellers til ['on' + type] = fn; ; Dette skaper en ny funksjon med tre argumenter, til å være DOM-objektet vi knytter arrangementet til, type å være type arrangement og fn å være funksjonen som kjøres når hendelsen utløses. Det kontrollerer først om addEventListener støttes, hvis det vil det vil det, hvis ikke, vil det sjekke for attachEvent, og hvis alt annet mislykkes, bruker du sannsynligvis IE5 eller noe like foreldet, så vi vil legge hendelsen direkte inn på hendelsesegenskapen (notat: det tredje alternativet vil overskrive noen eksisterende funksjon som kan ha vært knyttet til hendelsesegenskapen, mens de to første vil legge den til som en tilleggsfunksjon til dens arrangementseiendom).
La oss nå sette opp dokumentet vårt slik at det ligner på det du ser når du utvikler jQuery-ting.
I jQuery ville du ha;
$ (dokument) .ready (funksjon () // all vår kode som kjører etter at siden er klar, går her);
Ved hjelp av vår addEvent-funksjon har vi;
addEvent (vindu, 'last', funksjon () // all vår kode som kjører etter at siden er klar går her);
Nå for vårt Form-objekt.
Var Form = validClass: 'valid', fname: minLength: 1, maxLength: 15, fieldName: 'Fornavn', lname: minLength: 1, maxLength: 25, fieldName: 'Etternavn', validereLengde: funksjon (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; ; Så dette er ganske grunnleggende, men kan lett bli utvidet på.
For å bryte ned dette først oppretter vi en ny eiendom som bare er strengenavnet til vår «gyldige» css-klasse som legger til gyldige effekter som en grønn ramme når den brukes på skjemafeltet. Vi definerer også våre to delobjekter, fname og lname, slik at vi kan definere egne egenskaper som kan brukes av metoder andre steder, disse egenskapene er MINLENGTH som er minimum antall tegn disse feltene kan ha, maks lengde hvilke er de maksimale tegnene feltet kan ha og feltnavn som egentlig ikke blir brukt, men kan bli fanget for ting som å identifisere feltet med en brukervennlig streng i en feilmelding (f.eks. "Fornavn felt er påkrevd.").
Deretter oppretter vi en validateLength-metode som aksepterer to argumenter: Formel DOM-elementet som skal valideres og type som refererer til et av underobjektet som skal brukes (dvs. fname eller lname). Denne funksjonen sjekker om lengden på feltet er mellom minLength og maxLength-området, hvis det ikke er så fjerner vi vår gyldige klasse (hvis den eksisterer) fra elementet og returnerer falsk, ellers hvis det er så legger vi til gyldig klasse og returnerer ekte.
Da har vi en validateEmail-metode som aksepterer et DOM-element som en argumentasjon, og vi tester da denne DOM-elementverdien mot et vanlig e-posttype igjen hvis det går, legger vi til klassen vår og returnerer sann og omvendt.
Endelig har vi en getSubmit-metode. Denne metoden er gitt id av skjemaet og deretter sløyfer gjennom alle inngangselementene i det angitte skjemaet for å finne hvilken som har en type innlevering (type = "send"). Årsaken til denne metoden er å returnere send-knappen, slik at vi kan deaktivere den til skjemaet er klar til å sende inn.
La oss sette dette validatorobjektet til å fungere på en ekte form. Først trenger vi vår HTML.
La oss nå få tilgang til disse inngangsobjektene ved å bruke JavaScript og validere dem når skjemaet sender inn.
addEvent (vindu, last), funksjon () var ourForm = document.getElementById ('ourForm'); var submit_button = Form.getSubmit ('ourForm'); submit_button.disabled = 'deaktivert'; funksjonskontrollForm () var input = (Form.validateLength) (if (inntastinger [2])) submit_button.disabled = false; return true; submit_button.disabled = 'deaktivert'; return false;; checkForm (); addEvent (ourForm, 'keyup', checkForm); addEvent ourForm, 'submit', checkForm);); La oss bryte ned denne koden.
Vi pakker inn koden vår i addEvent-funksjonen, så når vinduet er lastet, kjører dette skriptet. Først tar vi tak i vårt skjema ved hjelp av ID og legger det i en variabel som heter ourForm, så tar vi tak i vår sende-knapp (ved hjelp av våre Form objects getSubmit-metoden) og legger den i en variabel som heter submit_button, og sett deretter inn sende knappene deaktivert attributt til 'deaktivert'.
Deretter definerer vi en checkForm-funksjon. Dette lagrer alle innganger i formfeltet som en matrise, og vi legger den til en variabel som heter ... du gjettet det ... innganger! Deretter definerer det noen nestede hvis setninger som tester hver av feltene i inngangsargumentet mot våre Form-metoder. Dette er grunnen til at vi returnerte sann eller falsk i våre metoder, så hvis det returnerer sant, sender vi det hvis erklæring og fortsetter til det neste, men hvis det returnerer falsk, avslutter vi if-setningene.
Etter vår funkjonsdefinisjon utfører vi sjekkformsfunksjonen når siden først laster inn og også legger funksjonen til en nøkkelfunksjon og en sendehendelse.
Du kan spørre, hvorfor legge ved å sende inn hvis vi deaktiverte send-knappen. Vel, hvis du er fokusert på et inntastingsfelt og trykker på enter-tasten, vil det forsøke å sende inn skjemaet, og vi må teste for dette, derfor grunnen til at vår checkForm-funksjon returnerer sann (sender skjemaet) eller falsk (sender ikke inn form).
Så lærte vi å definere de ulike objekttypene i JavaScript og opprette egenskaper og metoder innenfor dem. Vi lærte også en nifty addEvent-funksjon og fikk bruke vårt objekt i et grunnleggende virkelighetseksempel.
Dette avsluttes grunnleggende for JavaScript Object Orientation. Forhåpentligvis kan dette starte deg på vei til å bygge ditt eget JavaScript-bibliotek! Hvis du likte denne artikkelen og er interessert i andre JavaScript-relaterte emner, legg dem inn i kommentarene som jeg vil gjerne fortsette å skrive dem. Takk for at du leste.
Hvorfor ikke også sjekke utvalget av JavaScript-elementer på CodeCanyon. Du kan finne skript for å lage skyveknapper, nedtellingene, lastere og opplastere, og mye mer.
Populære JavaScript-elementer på Envato Market
