Share
In den letzten Jahren hat JavaScript zunehmend an Popularität gewonnen, was zum Teil auf Bibliotheken zurückzuführen ist, die entwickelt wurden, um die Erstellung von JavaScript-Apps / -Effekten für diejenigen zu erleichtern, die die Kernsprache noch nicht vollständig verstanden haben.
Während es in der Vergangenheit ein allgemeines Argument war, dass JavaScript eine Basissprache war und sehr "Schlag" ohne wirkliche Grundlage war; Dies ist nicht mehr der Fall, insbesondere bei der Einführung von Webanwendungen mit großem Umfang und Anpassungen wie JSON (JavaScript Object Notation)..
JavaScript kann alles bieten, was eine objektorientierte Sprache zu bieten hat, allerdings mit zusätzlichem Aufwand außerhalb des Umfangs dieses Artikels.
function myObject () ;
Glückwunsch, Sie haben gerade ein Objekt erstellt. Es gibt zwei Möglichkeiten, ein JavaScript-Objekt zu erstellen: Es handelt sich um 'Konstruktorfunktionen' und 'Literalnotation'. Die obige Funktion ist eine Constructor-Funktion. Ich werde kurz erklären, was der Unterschied ist. Bevor ich dies jedoch tue, wird im Folgenden eine Objektdefinition mithilfe der Literalnotation dargestellt.
var meinObjekt = ;
Literal ist eine bevorzugte Option für den Namensabstand, damit Ihr JavaScript-Code nicht mit anderen auf der Seite ausgeführten Skripts interferiert (oder umgekehrt) und auch, wenn Sie dieses Objekt als einzelnes Objekt verwenden und nicht mehr als eine Instanz des object, während die Funktionstypennotation Constructor bevorzugt wird, wenn Sie vor der Erstellung des Objekts einige Vorarbeiten durchführen müssen oder mehrere Instanzen des Objekts benötigen, bei denen jede Instanz während der Laufzeit des Skripts geändert werden kann. Lassen Sie uns weiter auf beiden Objekten gleichzeitig aufbauen, damit wir die Unterschiede sehen können.
Accentsconagua
function myObject () this.iAm = 'ein Objekt'; this.whatAmI = function () alert ('ich bin' + this.iAm); ; ; var myObject = iAm: 'ein Objekt', whatAmI: function () alert ('ich bin' + this.iAm); Für jedes Objekt haben wir eine Eigenschaft 'iAm' erstellt, die einen Zeichenfolgewert enthält, der in unserer Objektmethode 'whatAmI' verwendet wird, die eine Nachricht warnt.
Eigenschaften sind Variablen, die in einem Objekt erstellt werden, und Methoden sind Funktionen, die in einem Objekt erstellt werden.
Jetzt ist wahrscheinlich eine gute Zeit, um die Verwendung von Eigenschaften und Methoden zu erklären (obwohl Sie dies bereits getan hätten, wenn Sie mit einer Bibliothek vertraut sind)..
Um eine Eigenschaft zuerst zu verwenden, geben Sie das Objekt ein, zu dem es gehört - also in diesem Fall myObject -, und um auf die internen Eigenschaften zu verweisen, setzen Sie einen Punkt und dann den Namen der Eigenschaft, so dass sie letztendlich wie myObject.iAm ( dies wird 'ein Objekt' zurückgeben).
Für Methoden ist es das Gleiche, außer dass die Methode ausgeführt wird. Wie bei jeder Funktion müssen Sie Klammern dahinter setzen. Andernfalls werden Sie nur einen Verweis auf die Funktion zurückgeben und nicht die tatsächliche Funktion der Funktion. So wird es aussehen wie myObject.whatAmI () (dies wird 'Ich bin ein Objekt' warnen).
Es gibt auch einen Unterschied zwischen der Verwendung dieser beiden Arten von Objektdeklarationen.
Um ein wörtlich notiertes Objekt zu verwenden, verwenden Sie es einfach, indem Sie auf den Variablennamen verweisen. Wo immer es erforderlich ist, rufen Sie es durch Eingabe auf.
myObject.whatAmI ();
Mit Konstruktorfunktionen müssen Sie zuerst das Objekt instanziieren (eine neue Instanz davon erstellen). Sie tun dies durch Tippen.
var myNewObject = neues myObject (); myNewObject.whatAmI ();
Verwenden Sie unsere vorherige Konstruktorfunktion und bauen Sie darauf auf, sodass sie einige grundlegende (aber dynamische) Operationen ausführt, wenn wir sie instanziieren.
function myObject () this.iAm = 'ein Objekt'; this.whatAmI = function () alert ('ich bin' + this.iAm); ; ; Genau wie jede JavaScript-Funktion können wir mit unserer Konstruktorfunktion Argumente verwenden.
function myObject (was) this.iAm = was; this.whatAmI = Funktion (Sprache) Warnung ('Ich bin' + this.iAm + 'der' + Sprache + 'Sprache'); ; ; Lassen Sie uns nun unser Objekt instanziieren und seine whatAmI-Methode aufrufen, wobei wir die erforderlichen Felder ausfüllen.
var myNewObject = neues myObject ('ein Objekt'); myNewObject.whatAmI ('JavaScript'); Dies meldet "Ich bin ein Objekt der JavaScript-Sprache".
Ich habe bereits erwähnt, dass es Unterschiede zwischen Objektkonstruktoren und Objektliteralen gibt und dass eine Änderung an einem Objektliteral dieses Objekt im gesamten Skript beeinflusst. Wenn eine Konstruktorfunktion instanziiert wird und dann eine Änderung an dieser Instanz vorgenommen wird, ist dies der Fall wirkt sich nicht auf andere Instanzen dieses Objekts aus. Versuchen wir es mit einem Beispiel.
Zuerst erstellen wir ein Objekt-Literal.
var myObjectLiteral = myProperty: 'Dies ist eine Eigenschaft' // Warnung zur aktuellen Warnung für myProperty (myObjectLiteral.myProperty); // Dies gibt eine Warnung aus. "Dies ist eine Eigenschaft". // myProperty ändern myObjectLiteral.myProperty = 'Dies ist eine neue Eigenschaft'; // Warnung der aktuellen myProperty-Warnung (myObjectLiteral.myProperty); // Dies wird wie erwartet den Hinweis "Dies ist eine neue Eigenschaft" anzeigen
Selbst wenn Sie eine neue Variable erstellen und auf das Objekt richten, hat dies den gleichen Effekt.
var myObjectLiteral = myProperty: 'Dies ist eine Eigenschaft' // Warnung zur aktuellen Warnung für myProperty (myObjectLiteral.myProperty); // Dies gibt die Warnung 'Dies ist eine Eigenschaft' aus. // Neue Variable mit dem Objekt als Wert definieren var sameObject = myObjectLiteral; // myProperty ändern myObjectLiteral.myProperty = 'Dies ist eine neue Eigenschaft'; // Alert aktuelle myProperty-Warnung (sameObject.myProperty); // Dies wird immer noch die Warnung "Dies ist eine neue Eigenschaft"
Versuchen wir nun eine ähnliche Übung mit einer Konstruktorfunktion.
// Dies ist eine andere Möglichkeit, eine Constructor-Funktion zu erstellen. var myObjectConstructor = function () this.myProperty = 'this ist eine Eigenschaft' // instantiiert unseren Constructor var constructorOne = new myObjectConstructor (); // Instanziieren einer zweiten Instanz unseres Konstruktors var constructorTwo = new myObjectConstructor (); // Alert aktuelle myProperty der KonstruktorOne-Instanzalarm (constructorOne.myProperty); // Dies gibt die Warnung 'Dies ist eine Eigenschaft' aus. // Warnung Aktuelle myProperty von constructorTwo-Instanzalarm (constructorTwo.myProperty); // Dies gibt die Warnung "Dies ist eine Eigenschaft"
Wie erwartet, geben beide den korrekten Wert zurück, aber ändern wir die myProperty für eine der Instanzen.
// Dies ist eine andere Möglichkeit, eine Constructor-Funktion zu erstellen. var myObjectConstructor = function () this.myProperty = 'this ist eine Eigenschaft' // instantiiert unseren Constructor var constructorOne = new myObjectConstructor (); // myProperty der ersten Instanz ändern constructorOne.myProperty = 'Dies ist eine neue Eigenschaft'; // Instanziieren einer zweiten Instanz unseres Konstruktors var constructorTwo = new myObjectConstructor (); // Alert aktuelle myProperty der KonstruktorOne-Instanzalarm (constructorOne.myProperty); // Dies gibt die Warnung 'Dies ist eine neue Eigenschaft' aus. // Warnung Aktuelle myProperty von constructorTwo-Instanzalarm (constructorTwo.myProperty); // Dies wird immer noch die Warnung "Dies ist eine Eigenschaft"
Wie Sie in diesem Beispiel sehen können, wirkte sich dies nicht auf myObjectConstructor aus, obwohl wir die Eigenschaft von constructorOne geändert haben. Selbst wenn constructorTwo instanziiert wurde, bevor wir die myProperty-Eigenschaft von constructorOne geändert haben, hat dies immer noch keine Auswirkungen auf die myProperty-Eigenschaft von constructorTwo, da dies eine völlig andere Instanz des Objekts im Speicher von JavaScript ist.
Welches sollte man verwenden? Das hängt von der Situation ab. Wenn Sie nur ein Objekt seiner Art für Ihr Skript benötigen (wie Sie in unserem Beispiel am Ende dieses Artikels sehen werden), verwenden Sie ein Objektliteral, wenn Sie jedoch mehrere Instanzen eines Objekts benötigen Wenn jede Instanz unabhängig von der anderen ist und je nach Konstruktionsweise unterschiedliche Eigenschaften oder Methoden haben kann, verwenden Sie eine Konstruktorfunktion.
Beim Erläutern der Konstruktorfunktionen wurden viele "dieses" Schlüsselwörter herumgeworfen, und ich denke, was für ein besserer Zeitpunkt es ist, über den Umfang zu sprechen!
Nun fragen Sie vielleicht, von was für einem Bereich sprechen Sie? Der Gültigkeitsbereich in JavaScript basiert auf Funktionen / Objekten. Wenn Sie sich also außerhalb einer Funktion befinden, können Sie keine Variable verwenden, die in einer Funktion definiert ist (es sei denn, Sie verwenden einen Abschluss)..
Es gibt jedoch eine Bereichskette, dh eine Funktion innerhalb einer anderen Funktion kann auf eine in ihrer übergeordneten Funktion definierte Variable zugreifen. Schauen wir uns einige Beispielcodes an.
Wie Sie in diesem Beispiel sehen können, var1 ist im globalen Objekt definiert und steht allen Funktionen und Objekten zur Verfügung, var2 ist in function1 definiert und steht für function1 und function2 zur Verfügung. Wenn Sie jedoch versuchen, auf das globale Objekt zu verweisen, wird der Fehler "var2 ist undefined" angezeigt., var3 ist nur für function2 zugänglich.
Worauf bezieht sich "dieses"? In einem Browser referenziert 'this' das Fensterobjekt, also ist das Fenster technisch unser globales Objekt. Wenn wir uns in einem Objekt befinden, bezieht sich "this" auf das Objekt selbst. Wenn Sie sich jedoch in einer Funktion befinden, bezieht sich dies immer noch auf das Fensterobjekt und ebenso auf eine Methode innerhalb eines Objekts. " dieses 'bezieht sich auf das Objekt.
Wenn wir uns innerhalb eines Unterobjekts (eines Objekts innerhalb eines Objekts) befinden, bezieht sich 'this' aufgrund unserer Gültigkeitsbereichskette auf das Unterobjekt und nicht auf das übergeordnete Objekt.
Als Randbemerkung lohnt es sich hinzuzufügen, dass bei der Verwendung von Funktionen wie setInterval, setTimeout und eval, wenn Sie eine Funktion oder Methode über eine dieser Funktionen ausführen, 'this' auf das Fensterobjekt verweist, da es sich um Methoden von window handelt, also setInterval ( ) und window.setInterval () sind gleich.
Ok, jetzt, da wir das aus dem Weg geräumt haben, lassen Sie uns ein reales Beispiel machen und ein Formularvalidierungsobjekt erstellen!
Zuerst muss ich Ihnen die addEvent-Funktion vorstellen, die wir erstellen werden. Sie ist eine Kombination aus ECMAScript-Funktionen (Firefox, Safari usw.), addEventListener () - Funktion und der Microsoft ActiveX Script-Funktion attachEvent ().
function addEvent (to, type, fn) if (document.addEventListener) to.addEventListener (type, fn, false); else if (document.attachEvent) to.attachEvent ('on' + type, fn); else bis ['on' + type] = fn; ; Dadurch wird eine neue Funktion mit drei Argumenten erstellt, zu Dies ist das DOM-Objekt, an das das Ereignis angehängt wird, Art die Art der Veranstaltung und fn Die Funktion wird ausgeführt, wenn das Ereignis ausgelöst wird. Zuerst wird geprüft, ob addEventListener unterstützt wird. Wenn dies der Fall ist, wird dies auf eventEvent überprüft. Wenn dies nicht der Fall ist, verwenden Sie wahrscheinlich IE5 oder etwas gleich Veraltetes, sodass das Ereignis direkt in die Event-Eigenschaft eingefügt wird (Hinweis: Die dritte Option überschreibt alle vorhandenen Funktionen, die möglicherweise an die Ereigniseigenschaft angehängt wurden, während die ersten beiden Funktionen sie als zusätzliche Funktionen zur Ereigniseigenschaft hinzufügen..
Lassen Sie uns nun unser Dokument so einrichten, dass es dem ähnelt, was Sie vielleicht bei der Entwicklung von jQuery-Produkten sehen.
In jQuery hättest du;
$ (document) .ready (function () // Der gesamte Code, der ausgeführt wird, nachdem die Seite fertig ist, geht hier hin);
Mit unserer addEvent-Funktion haben wir;
addEvent (window, 'load', function () // der gesamte Code, der läuft, wenn die Seite fertig ist, geht hier hin);
Nun zu unserem Formularobjekt.
var Form = validClass: 'gültig', fname: minLength: 1, maxLength: 15, fieldName: 'Vorname', lname: minLength: 1, maxLength: 25, fieldName: 'Nachname', validateLength: function (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; ; Dies ist also ziemlich einfach, kann aber leicht erweitert werden.
Um dies zunächst aufzuschlüsseln, erstellen wir eine neue Eigenschaft, die nur aus dem String-Namen unserer 'gültigen' css-Klasse besteht, die bei Anwendung auf das Formularfeld gültige Effekte hinzufügt, beispielsweise einen grünen Rahmen. Wir definieren auch unsere beiden Unterobjekte, fname und lname, So können wir ihre eigenen Eigenschaften definieren, die von anderen Methoden verwendet werden können minimale Länge Dies ist die Mindestanzahl an Zeichen, die diese Felder enthalten können, maximale Länge Welches sind die maximalen Zeichen, die das Feld haben darf und Feldname was nicht wirklich gewöhnt ist, aber für Dinge wie das Identifizieren des Feldes mit einer benutzerfreundlichen Zeichenfolge in einer Fehlermeldung ergriffen werden kann (z. B. 'Vorname-Feld ist erforderlich.').
Als Nächstes erstellen wir eine validateLength-Methode, die zwei Argumente akzeptiert: formEl das zu überprüfende DOM-Element und das Art welches sich auf eines der zu verwendenden Unterobjekte bezieht (d. h. fname oder lname). Diese Funktion prüft, ob die Länge des Felds zwischen minLength und maxLength liegt. Wenn dies nicht der Fall ist, entfernen wir unsere gültige Klasse (sofern vorhanden) aus dem Element und geben false zurück. Andernfalls fügen wir die gültige Klasse hinzu und geben zurück wahr.
Dann haben wir eine validateEmail-Methode, die ein DOM-Element als Argument akzeptiert. Dann testen wir diesen DOM-Elementwert anhand eines regulären Ausdrucks des E-Mail-Typs. Wenn es weitergeht, fügen wir unsere Klasse hinzu und kehren zurück und umgekehrt.
Schließlich haben wir eine getSubmit-Methode. Diese Methode erhält die ID des Formulars und durchläuft dann alle Eingabeelemente innerhalb des angegebenen Formulars, um herauszufinden, welcher über einen Typ von submit verfügt (type = "submit"). Der Grund für diese Methode besteht darin, die Schaltfläche "Senden" zurückzugeben, damit wir sie deaktivieren können, bis das Formular zum Senden bereit ist.
Lassen Sie uns dieses Prüferobjekt auf ein reales Formular setzen. Zuerst brauchen wir unser HTML.
Lassen Sie uns nun mit JavaScript auf diese Eingabeobjekte zugreifen und sie beim Senden des Formulars überprüfen.
addEvent (window, 'load', function ()) var ourForm = document.getElementById ('ourForm'); var submit_button = Form.getSubmit ('ourForm'); submit_button.disabled = 'disabled'; Funktion checkForm () var Eingaben = OurForm.getElementsByTagName ('Eingabe'); if (Form.validateLength (Eingaben [0], Form.fname)) if (Form.validateLength (Eingaben [1], Form.lname)) if (Form.validateEmail) (input [2])) submit_button.disabled = false; return true; submit_button.disabled = 'disabled'; return false;; checkForm (); addEvent (unsereForm, 'keyup', checkForm); addEvent ( ourForm, 'submit', checkForm);); Lassen Sie uns diesen Code aufschlüsseln.
Wir packen unseren Code in die addEvent-Funktion, damit das Skript ausgeführt wird, wenn das Fenster geladen ist. Zuerst greifen wir unser Formular mit seiner ID in eine Variable namens unserFormular, Dann greifen wir unseren Submit-Button (mit unserer Methode FormSets getSubmit) in eine Variable namens submit_button, und dann das deaktivierte Attribut "Submit-Buttons" auf "disabled" setzen.
Als nächstes definieren wir eine checkForm-Funktion. Dies speichert alle Eingaben innerhalb des Formularfelds als Array und wir hängen es an eine Variable mit dem Namen… Sie haben es erraten… Eingänge! Dann werden einige verschachtelte if-Anweisungen definiert, die jedes der Felder innerhalb des input-Arrays anhand unserer Form-Methoden testen. Dies ist der Grund, warum wir in unseren Methoden true oder false zurückgegeben haben. Wenn also true zurückgegeben wird, übergeben wir die if -Anweisung und fahren mit der nächsten fort. Wenn sie jedoch false zurückgibt, beenden wir die if-Anweisungen.
Im Anschluss an unsere Funktionsdefinition führen wir die checkForm-Funktion aus, wenn die Seite zum ersten Mal geladen wird, und hängen die Funktion auch an ein Keyup-Ereignis und ein Submit-Ereignis an.
Sie werden möglicherweise gefragt, warum Sie die Option zum Senden verwenden, wenn Sie die Schaltfläche "Senden" deaktiviert haben. Wenn Sie sich auf ein Eingabefeld konzentrieren und die Eingabetaste drücken, wird versucht, das Formular zu senden, und wir müssen dies testen. Daher gibt unsere checkForm-Funktion den Wert true (sendet das Formular) oder false (wird nicht gesendet bilden).
Wir haben also gelernt, die verschiedenen Objekttypen in JavaScript zu definieren und Eigenschaften und Methoden innerhalb von JavaScript zu erstellen. Wir lernten auch eine nette addEvent-Funktion und konnten unser Objekt in einem grundlegenden Beispiel aus der realen Welt verwenden.
Damit sind die Grundlagen der JavaScript-Objektorientierung abgeschlossen. Hoffentlich kann dies dazu führen, dass Sie Ihre eigene JavaScript-Bibliothek erstellen! Wenn Ihnen dieser Artikel gefallen hat und Sie an anderen JavaScript-Themen interessiert sind, posten Sie diese in den Kommentaren, da ich sie gerne weiter schreiben möchte. Danke fürs Lesen.
Schauen Sie sich auch die JavaScript-Artikel auf CodeCanyon an. Sie können Skripte zum Erstellen von Schiebereglern, Countdowns, Ladern und Uploadern und vieles mehr finden.
Beliebte JavaScript-Artikel auf dem Envato-Markt
