Share
JavaScript is in de afgelopen jaren steeds populairder geworden, mede dankzij bibliotheken die zijn ontwikkeld om JavaScript-apps / effecten eenvoudiger te maken voor diegenen die de kerntaal nog niet volledig hebben begrepen.
In het verleden was het een veel voorkomend argument dat JavaScript een basistaal was en zeer 'klapstreepje' was zonder echte basis; dit is niet langer het geval, vooral met de introductie van grootschalige webapplicaties en 'aanpassingen' zoals JSON (JavaScript Object Notation).
JavaScript kan alles hebben wat een object-georiënteerde taal te bieden heeft, zij het met wat extra moeite buiten het bereik van dit artikel.
function myObject () ;
Gefeliciteerd, je hebt zojuist een object gemaakt. Er zijn twee manieren om een JavaScript-object te maken: het zijn 'Constructorfuncties' en 'Letterlijke notatie'. De bovenstaande is een Constructorfunctie, ik zal uitleggen wat het verschil kort is, maar voordat ik dit doe, is hier wat een Objectdefinitie eruit ziet met behulp van letterlijke notatie.
var myObject = ;
Letterlijk is een voorkeursoptie voor naamspatiëring, zodat uw JavaScript-code niet interfereert (of andersom) met andere scripts die op de pagina worden uitgevoerd en ook als u dit object als één object gebruikt en niet meer dan één instantie van de object, terwijl Constructor functietype notatie de voorkeur heeft als u eerst wat werk moet doen voordat het object wordt gemaakt of als u meerdere exemplaren van het object nodig hebt waarbij elke instantie tijdens de levensduur van het script kan worden gewijzigd. Laten we doorgaan om tegelijkertijd op onze beide objecten te bouwen, zodat we kunnen waarnemen wat de verschillen zijn.
Accentsconagua
function myObject () this.iAm = 'een object'; this.whatAmI = function () alert ('I am' + this.iAm); ; ; var myObject = iAm: 'een object', whatAmI: function () alert ('I am' + this.iAm); Voor elk van de objecten hebben we een eigenschap 'iAm' gemaakt die een tekenreekswaarde bevat die wordt gebruikt in onze objectmethode 'whatAmI' die een bericht meldt.
Eigenschappen zijn variabelen die in een object zijn gemaakt en methoden zijn functies die in een object zijn gemaakt.
Nu is waarschijnlijk net zo'n goede tijd om uit te leggen hoe je eigenschappen en methoden moet gebruiken (hoewel je dat al gedaan zou hebben als je bekend bent met een bibliotheek).
Als u een eigenschap wilt gebruiken, typt u eerst tot welk object het behoort - in dit geval dus myObject - en vervolgens om naar de interne eigenschappen te verwijzen, voert u een punt in en vervolgens de naam van de eigenschap zodat deze er uiteindelijk uit ziet als myObject.iAm ( dit levert 'een object' op).
Voor methoden is het hetzelfde, behalve voor het uitvoeren van de methode, zoals bij elke functie moet u er haakjes achter zetten; anders zal je gewoon een verwijzing naar de functie teruggeven en niet wat de functie eigenlijk teruggeeft. Het ziet er dus uit als myObject.whatAmI () (dit waarschuwt 'Ik ben een object').
Er is ook een verschil tussen de manier waarop deze twee soorten objectverklaringen worden gebruikt.
Om een letterlijk genoteerd object te gebruiken, gebruik je het eenvoudig door naar de naam van de variabele te verwijzen, dus waar je het ook nodig hebt, noem je het door te typen;
myObject.whatAmI ();
Met constructorfuncties moet u eerst het object instantiëren (een nieuwe instantie van maken); je doet dit door te typen;
var myNewObject = nieuw myObject (); myNewObject.whatAmI ();
Laten we onze vorige constructorfunctie gebruiken en erop bouwen, zodat het enkele basale (maar dynamische) bewerkingen uitvoert wanneer we het instantiëren.
function myObject () this.iAm = 'een object'; this.whatAmI = function () alert ('I am' + this.iAm); ; ; Net als elke JavaScript-functie kunnen we argumenten gebruiken met onze constructorfunctie;
function myObject (wat) this.iAm = what; this.whatAmI = function (language) alert ('I am' + this.iAm + 'van de' + taal + 'taal'); ; ; Laten we nu ons object instantiëren en de whatAmI-methode noemen, waarbij we de vereiste velden invullen terwijl we dit doen.
var myNewObject = nieuw myObject ('een object'); myNewObject.whatAmI ( 'JavaScript'); Dit waarschuwt 'Ik ben een object van de JavaScript-taal.'
Ik noemde eerder over de verschillen tussen Object Constructors en Object Literals en dat wanneer een wijziging in een Object Literal wordt aangebracht, het dat object door het hele script heen beïnvloedt, terwijl wanneer een Constructor-functie wordt geïnstantieerd en dan een wijziging in die instantie wordt aangebracht, heeft geen invloed op andere instanties van dat object. Laten we een voorbeeld proberen;
Eerst zullen we een Object letterlijk maken;
var myObjectLiteral = myProperty: 'dit is een eigenschap' // alert huidige myProperty waarschuwing (myObjectLiteral.myProperty); // dit waarschuwt 'dit is een eigenschap' // wijzig myProperty myObjectLiteral.myProperty = 'dit is een nieuwe eigenschap'; // alert huidige myProperty alert (myObjectLiteral.myProperty); // dit waarschuwt 'dit is een nieuwe eigenschap', zoals verwacht
Zelfs als u een nieuwe variabele maakt en naar het object richt, heeft dit hetzelfde effect.
var myObjectLiteral = myProperty: 'dit is een eigenschap' // alert huidige myProperty waarschuwing (myObjectLiteral.myProperty); // dit waarschuwt 'dit is een eigenschap' // definieer nieuwe variabele met object als waarde var sameObject = myObjectLiteral; // verander myProperty myObjectLiteral.myProperty = 'dit is een nieuwe eigenschap'; // alert huidige myProperty alert (sameObject.myProperty); // dit zal nog steeds alarmeren 'dit is een nieuw pand'
Laten we nu een soortgelijke oefening proberen met een Constructorfunctie.
// dit is een andere manier om een Constructor-functie te maken var myObjectConstructor = function () this.myProperty = 'dit is een eigenschap' // instantiate onze Constructor var constructorOne = new myObjectConstructor (); // instantiate een tweede exemplaar van onze Constructor var constructorTwo = new myObjectConstructor (); // alert current myProperty of constructorOne instance alert (constructorOne.myProperty); // dit waarschuwt 'dit is een eigenschap' // alert current myProperty of constructorTwo instance alert (constructorTwo.myProperty); // dit waarschuwt 'dit is een eigenschap'
Zoals verwacht, retourneren beide de juiste waarde, maar laten we de myProperty voor een van de exemplaren wijzigen.
// dit is een andere manier om een Constructor-functie te maken var myObjectConstructor = function () this.myProperty = 'dit is een eigenschap' // instantiate onze Constructor var constructorOne = new myObjectConstructor (); // wijzig mijnProperty van de constructor in eerste instantieOne.myProperty = 'dit is een nieuwe eigenschap'; // instantiate een tweede exemplaar van onze Constructor var constructorTwo = new myObjectConstructor (); // alert current myProperty of constructorOne instance alert (constructorOne.myProperty); // dit zal waarschuwen 'dit is een nieuwe eigenschap' // alert current myProperty of constructorTwo instance alert (constructorTwo.myProperty); // dit zal nog steeds alarmeren 'dit is een eigenschap'
Zoals u in dit voorbeeld kunt zien, hebben we de eigenschap van constructor One gewijzigd, maar dit heeft myObjectConstructor niet beïnvloed en heeft daarom constructorTwo niet beïnvloed. Zelfs als constructorTwo is geïnstantieerd voordat we de eigenschap myProperty van constructorOne hebben gewijzigd, heeft dit nog steeds geen invloed op de eigenschap myProperty van constructorTwo omdat het een volledig ander exemplaar van het object in het geheugen van JavaScript is.
Dus welke moet je gebruiken? Wel, het hangt af van de situatie, als je maar één object in zijn soort nodig hebt voor je script (zoals je in ons voorbeeld aan het einde van dit artikel zult zien), gebruik dan een object letterlijk, maar als je meerdere exemplaren van een object nodig hebt , waarbij elke instantie onafhankelijk is van de andere en verschillende eigenschappen of methoden kan hebben, afhankelijk van de manier waarop deze is geconstrueerd, gebruik dan een constructorfunctie.
Bij het uitleggen van constructorfuncties, er waren veel 'deze' trefwoorden gegooid en ik bedenk wat een betere tijd om te praten over het bereik!
Nu vraag je je misschien af 'waarover spreek je?' Scope in JavaScript is gebaseerd op functie / object, dus dat betekent dat als u zich buiten een functie bevindt, u geen variabele kunt gebruiken die in een functie is gedefinieerd (tenzij u een afsluiting gebruikt).
Er is echter een scopeketen, wat betekent dat een functie binnen een andere functie toegang heeft tot een variabele die is gedefinieerd in de bovenliggende functie. Laten we een voorbeeldcode bekijken.
Zoals je in dit voorbeeld kunt zien, var1 is gedefinieerd in het globale object en is beschikbaar voor alle functies en objecten, var2 is gedefinieerd in functie1 en is beschikbaar voor functie1 en functie2, maar als u ernaar probeert te verwijzen vanuit het globale object, krijgt u de fout 'var2 is undefined', var3 is alleen toegankelijk voor functie2.
Dus wat betekent 'deze' referentie? Welnu, in een browser verwijst 'dit' naar het vensterobject, dus technisch gezien is het venster ons globale object. Als we ons in een object bevinden, verwijst 'dit' naar het object zelf, maar als u zich binnen een functie bevindt, zal dit nog steeds verwijzen naar het vensterobject en eveneens als u zich binnen een methode bevindt die zich binnen een object bevindt. ' dit 'verwijst naar het object.
Vanwege onze scopeketen, als we ons in een subobject bevinden (een object in een object), verwijst 'this' naar het subobject en niet naar het bovenliggende object.
Als een kanttekening, is het ook de moeite waard om toe te voegen dat wanneer u functies zoals setInterval, setTimeout en eval gebruikt, wanneer u een functie of methode uitvoert via een van deze, 'this' verwijst naar het vensterobject, omdat dit de venstermethoden zijn, dus setInterval ( ) en window.setInterval () zijn hetzelfde.
Ok nu dat we dat uit de weg hebben, laten we een voorbeeld uit de echte wereld doen en een formuliervalidatieobject maken!
Eerst moet ik je voorstellen aan de addEvent-functie die we zullen maken en is een combinatie van de addEventListener () -functie van ECMAScript (Firefox, Safari, enz ...) en de attachEvent () -functie van Microsoft ActiveX Script.
functie addEvent (to, type, fn) if (document.addEventListener) to.addEventListener (type, fn, false); else if (document.attachEvent) to.attachEvent ('on' + type, fn); else naar ['on' + type] = fn; ; Hiermee wordt een nieuwe functie met drie argumenten gemaakt, naar zijnde het DOM-object waaraan we de gebeurtenis koppelen, type het type evenement zijn en fn als de functierun wanneer de gebeurtenis wordt geactiveerd. Eerst wordt gecontroleerd of addEventListener wordt ondersteund, zo ja, dan zal het worden gebruikt, zo niet dan zal het controleren op attachEvent en als al het andere faalt, gebruikt u waarschijnlijk IE5 of iets dat even verouderd is, dus we zullen de gebeurtenis rechtstreeks aan zijn gebeurteniseigenschap toevoegen (let op: de derde optie overschrijft elke bestaande functie die mogelijk aan de eigenschap event is gekoppeld, terwijl de eerste twee deze als een extra functie toevoegt aan de eigenschap event ervan).
Laten we nu ons document zo instellen dat het vergelijkbaar is met wat u zou kunnen zien als u jQuery-dingen ontwikkelt.
In jQuery zou je hebben;
$ (document) .ready (function () // al onze code die loopt nadat de pagina gereed is, gaat hier);
Met behulp van onze addEvent-functie die we hebben;
addEvent (venster, 'laden', functie () // al onze code die wordt uitgevoerd nadat de pagina gereed is, gaat hier);
Nu voor ons Form-object.
var Form = validClass: 'valid', fname: minLength: 1, maxLength: 15, fieldName: 'First Name', lname: minLength: 1, maxLength: 25, fieldName: 'Last Name', validateLength: functie (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; ; Dit is dus vrij eenvoudig maar kan eenvoudig worden uitgebreid.
Om dit op te splitsen, maken we eerst een nieuwe eigenschap aan, die slechts de tekenreeksnaam is van onze 'geldige' css-klasse die, wanneer toegepast op het formulierveld, geldige effecten toevoegt, zoals een groene rand. We definiëren ook onze twee subobjecten, fname en lname, dus we kunnen hun eigen eigenschappen definiëren die kunnen worden gebruikt door methoden elders, deze eigenschappen zijn minimale lengte wat het minimum aantal tekens is dat deze velden kunnen hebben, maximale lengte wat de max karakters is die het veld kan hebben en veldnaam die niet echt wennen, maar kan worden gepakt voor zaken als het identificeren van het veld met een gebruikersvriendelijke reeks in een foutmelding (bijv. 'Voornaam veld is verplicht').
Vervolgens maken we een methode validateLength die twee argumenten accepteert: Formel het DOM-element dat moet worden gevalideerd en het type die verwijst naar een van het subobject dat moet worden gebruikt (d.w.z. fname of lname). Deze functie controleert of de lengte van het veld tussen het bereik van de lengte en max. Lengte ligt, als dit niet het geval is, verwijderen we onze geldige klasse (als deze bestaat) van het element en retourneren false, anders als het dan is voegen we de geldige klasse toe en keren terug waar.
Dan hebben we een validateEmail-methode die een DOM-element accepteert als een argument, we testen vervolgens deze DOM-elementenwaarde tegen een reguliere expressie van het e-mailtype; opnieuw als het slaagt voegen wij onze klasse toe en terugkeren waar en vice versa.
Eindelijk hebben we een methode getSubmit. Deze methode krijgt de id van het formulier en doorloopt vervolgens alle invoerelementen binnen het opgegeven formulier om te bepalen welk type een type heeft (type = "submit"). De reden voor deze methode is om de knop Verzenden te retourneren, zodat we deze kunnen uitschakelen totdat het formulier klaar is om te verzenden.
Laten we dit validatieobject op een echt formulier zetten. Eerst hebben we onze HTML nodig.
Laten we nu toegang hebben tot deze invoerobjecten met behulp van JavaScript en deze valideren wanneer het formulier wordt verzonden.
addEvent (venster, 'load', function () var ourForm = document.getElementById ('ourForm'); var submit_button = Form.getSubmit ('ourForm'); submit_button.disabled = 'disabled'; function checkForm () var inputs = ourForm.getElementsByTagName ('input'); if (Form.validateLength (inputs [0], Form.fname)) if (Form.validateLength (inputs [1], Form.lname)) if (Form.validateEmail (ingangen [2])) submit_button.disabled = false; return true; submit_button.disabled = 'disabled'; return false;; checkForm (); addEvent (ourForm, 'keyup', checkForm); addEvent ( ourForm, 'submit', checkForm);); Laten we deze code opsplitsen.
We verpakken onze code in de addEvent-functie, dus wanneer het venster is geladen, wordt dit script uitgevoerd. Ten eerste pakken we ons formulier met behulp van de ID en plaatsen in een variabele met de naam ourForm, dan pakken we onze submit-knop (met behulp van onze Form-objecten getSubmit-methode) en plaatsen deze in een variabele met de naam verzendknop, en stel vervolgens het inschakelknoppen uitgeschakeld kenmerk in op 'uitgeschakeld'.
Vervolgens definiëren we een checkForm-functie. Hiermee worden alle ingangen in het formulierveld als een array opgeslagen en we koppelen deze aan een variabele met de naam ... u raadt het al ... input! Vervolgens worden enkele geneste if-instructies gedefinieerd die elk van de velden binnen de array van ingangen testen met onze formuliermethoden. Dit is de reden waarom we true of false hebben geretourneerd in onze methoden, dus als het true retourneert, geven we dat als statement door en gaan we verder naar de volgende, maar als het false retourneert, sluiten we de if-statements af.
Na onze functiedefinitie voeren we de checkForm-functie uit wanneer de pagina voor het eerst wordt geladen en koppelen we de functie ook aan een key-upgebeurtenis en een verzendgebeurtenis.
U vraagt mogelijk waarom er een bijlage wordt toegevoegd om in te dienen als we de knop Verzenden hebben uitgeschakeld. Als u gefocust bent op een invoerveld en op Enter drukt, zal het proberen het formulier in te dienen en moeten we dit testen. Vandaar de reden waarom onze checkForm-functie true retourneert (het formulier verzendt) of false (verzendt niet het formulier).
We hebben dus geleerd om de verschillende objecttypen in JavaScript te definiëren en eigenschappen en methoden daarin te maken. We hebben ook een handige addEvent-functie geleerd en ons object in een standaardvoorbeeld van de echte wereld kunnen gebruiken.
Dit concludeert de basisbeginselen van JavaScript-objectoriëntatie. Hopelijk kan dit u op weg helpen om uw eigen JavaScript-bibliotheek te bouwen! Als je dit artikel leuk vond en geïnteresseerd bent in andere aan Javascript gerelateerde onderwerpen, plaats deze dan in de reacties, want ik blijf ze graag verder schrijven. Bedankt voor het lezen.
Bekijk ook het bereik van JavaScript-items op CodeCanyon. U kunt scripts vinden voor het maken van schuifregelaars, countdowns, loaders en uploaders en nog veel meer.
Populaire JavaScript-items op Envato Market
