So schreiben Sie wartbaren objektorientierten JavaScript-Code

Die Fähigkeit, wartbaren objektorientierten JavaScript-Code zu schreiben, wird Ihnen nicht nur Geld sparen, sondern Sie auch beliebt machen. Glauben Sie es nicht? Es ist möglich, dass Sie oder jemand anderes eines Tages zurückkommt und Ihren Code wiederverwendet. Wenn Sie diese Erfahrung so schmerzlos wie möglich gestalten können, können Sie viel Zeit sparen. Jeder auf der Erde weiß, dass Zeit Geld ist. Ebenso können Sie sich die Gunst einer anderen Person verdienen, indem Sie ihr Kopfschmerzen ersparen. Aber bevor wir damit beginnen, zu untersuchen, wie man wartbaren objektorientierten JavaScript-Code schreibt, werfen wir einen kurzen Blick darauf, was objektorientiert ist. Wenn Sie bereits objektorientierte Konzepte verstehen, können Sie den nächsten Abschnitt direkt überspringen.
Was ist objektorientiert?
Objektorientierte Programmierung stellt hauptsächlich physische Objekte in der realen Welt durch Code dar. Um ein Objekt zu erstellen, müssen Sie zunächst eine „Klasse“ schreiben, um es zu definieren. Klassen können fast alles repräsentieren: Konten, Mitarbeiter, Navigationsmenüs, Autos, Pflanzen, Anzeigen, Getränke usw. Und jedes Mal, wenn Sie ein Objekt erstellen möchten, instanziieren Sie ein Objekt aus der Klasse. Mit anderen Worten: Eine Instanz einer Klasse wird als Objekt erstellt. Tatsächlich werden Objekte normalerweise verwendet, wenn es um mehr als eine Sache desselben Typs geht. Außerdem können einfache funktionale Programme einen tollen Job machen. Objekte sind im Wesentlichen Container für Daten. Daher möchten Sie möglicherweise in einem Mitarbeiterobjekt die Mitarbeiternummer, den Namen, das Eintrittsdatum, den Titel, das Gehalt, das Dienstalter usw. speichern. Objekte enthalten auch Funktionen (auch „Methoden“ genannt), die Daten verarbeiten. Methoden werden als Vermittler eingesetzt, um die Datenintegrität sicherzustellen und Daten vor der Speicherung zu transformieren. Beispielsweise kann eine Methode ein Datum in einem beliebigen Format akzeptieren und es vor dem Speichern in ein standardisiertes Format konvertieren. Schließlich können Klassen auch von anderen Klassen erben. Durch Vererbung können Sie denselben Code in verschiedenen Klassen wiederverwenden. Beispielsweise können sowohl Bankkonten als auch Videothekenkonten eine grundlegende Kontoklasse erben, die persönliche Informationen, Kontoeröffnungsdatum, Filialinformationen usw. umfasst. Anschließend kann jeder seine eigenen Datenstrukturen und Methoden für die Transaktions- oder Kreditabwicklung definieren.
Warnung: Objektorientiertes JavaScript ist nicht dasselbe.
Im vorherigen Abschnitt wurden die Grundlagen der klassischen objektorientierten Programmierung erläutert. Ich sage klassisch, weil JavaScript diesen Regeln nicht folgt. Im Gegensatz dazu werden JavaScript-Klassen als Funktionen geschrieben und die Vererbung wird durch Prototypen implementiert. Bei der prototypischen Vererbung handelt es sich grundsätzlich um die Verwendung von Prototypeigenschaften zur Implementierung der Vererbung von Objekten, anstatt Klassen von Klassen zu erben.
Objektinstanziierung
Das Folgende ist ein Beispiel für die Objektinstanziierung in JavaScript:
// Mitarbeiterklasse definieren
　function Employee(num, fname, lname) {
　　this.getFullName = function ( ) {
                                                                                                                                                                              ​, "Doe");
warning("Der vollständige Name des Mitarbeiters ist " + john.getFullName());
Hier sind drei wichtige Punkte zu beachten:
1 Das erste Zeichen der Buchstaben des Funktionsnamens „Klasse“ sollte großgeschrieben werden. Dies weist darauf hin, dass die Funktion instanziiert werden soll und nicht wie eine normale Funktion aufgerufen werden soll.
2 Der neue Operator wird während der Instanziierung verwendet. Wenn Sie new weglassen und nur die Funktion aufrufen, treten viele Probleme auf.
3 Da getFullName diesem Operator zugewiesen ist, ist es öffentlich verfügbar, fname und lname jedoch nicht. Der von der Employee-Funktion generierte Abschluss gewährt getFullName Zugriff auf fname und lname, bleibt jedoch für andere Klassen privat.
Prototypische Vererbung
Das Folgende ist ein Beispiel für prototypische Vererbung in JavaScript:
// Definieren Sie die Human-Klasse
function Human() {
this.setName = function (fname, lname) {
this.fname = fname;
this.lname = lname;
}
this.getFullName = function () {
return this.fname + " " + this.lname;
🎜 > };
//Mitarbeiter die Human-Klasse erben lassen
Employee.prototype = new Human();

// Das Employee-Objekt instanziieren
var john = new Employee("4815162342") ;
john.setName("John", "Doe");
alert(john.getFullName() + "'s Mitarbeiternummer ist " + john.getNum());
Diesmal die Die erstellte Human-Klasse enthält alle Attribute, die Menschen gemeinsam haben – ich habe dort auch fname und lname eingefügt, weil nicht nur Mitarbeiter Namen haben, sondern jeder. Weisen Sie dann das Human-Objekt seiner Prototypeigenschaft zu.
Code-Wiederverwendung durch Vererbung
Im vorherigen Beispiel wurde die ursprüngliche Employee-Klasse in zwei Teile aufgeteilt. Alle allgemeinen menschlichen Attribute wurden in die Klasse „Mensch“ verschoben, und dann wurde „Mitarbeiter“ von „Mensch“ übernommen. In diesem Fall können die Eigenschaften in Human von anderen Objekten wie Student, Client, Citizen, Visitor usw. verwendet werden. Jetzt haben Sie vielleicht bemerkt, dass dies eine großartige Möglichkeit ist, Code aufzuteilen und wiederzuverwenden. Wenn Sie mit Human-Objekten arbeiten, müssen Sie Human nur erben, um die vorhandenen Eigenschaften zu verwenden, anstatt jedes einzelne Objekt einzeln neu zu erstellen. Wenn Sie außerdem ein Attribut „zweiter Vorname“ hinzufügen möchten, müssen Sie es nur einmal hinzufügen, und diejenigen, die die Human-Klasse erben, können es sofort verwenden. Im Gegenteil, wenn wir nur das Attribut „zweiter Vorname“ zu einem Objekt hinzufügen möchten, können wir es direkt zu diesem Objekt hinzufügen, ohne es der Human-Klasse hinzuzufügen.
1. Öffentlich und privat
Im nächsten Thema möchte ich über öffentliche und private Variablen in Klassen sprechen. Abhängig davon, wie die Daten im Objekt behandelt werden, werden die Daten als privat oder öffentlich behandelt. Privateigentümer bedeuten nicht zwangsläufig, dass andere keinen Zugriff darauf haben. Möglicherweise muss nur eine bestimmte Methode verwendet werden.
● Schreibgeschützt
Manchmal möchten Sie einfach nur einen Wert, wenn Sie ein Objekt erstellen. Nach der Erstellung möchten Sie nicht, dass andere diesen Wert ändern. Erstellen Sie dazu eine private Variable und weisen Sie ihr bei der Instanziierung einen Wert zu.
function Animal(type) {
var data = [];
data['type'] = type;
this.getType = function () {
return data['type' ];
}
}

var Fluffy = new Animal('dog');
fluffy.getType(); // Gibt 'dog' zurück
In diesem Beispiel A Lokale Array-Daten werden in der Animal-Klasse erstellt. Wenn das Animal-Objekt instanziiert wird, wird ein Wert vom Typ übergeben und dieser Wert im Datenarray platziert. Da es privat ist, kann der Wert nicht überschrieben werden (die Animal-Funktion definiert seinen Gültigkeitsbereich). Sobald das Objekt instanziiert ist, besteht die einzige Möglichkeit, den Typwert zu lesen, darin, die getType-Methode aufzurufen. Da getType in Animal definiert ist, kann getType Daten mit dem von Animal generierten Abschluss eingeben. In diesem Fall kann der Typ des Objekts zwar gelesen, aber nicht geändert werden.
Ein sehr wichtiger Punkt ist, dass bei der Vererbung des Objekts die „schreibgeschützte“ Technologie nicht verwendet werden kann. Nachdem die Vererbung durchgeführt wurde, teilt jedes instanziierte Objekt diese schreibgeschützten Variablen und überschreibt deren Werte. Die einfachste Lösung besteht darin, die schreibgeschützten Variablen in der Klasse in öffentliche Variablen umzuwandeln. Aber Sie müssen sie privat halten, Sie können die Technik verwenden, die Philippe in den Kommentaren erwähnt hat.
● Öffentlich
Natürlich gibt es Zeiten, in denen Sie den Wert eines bestimmten Attributs nach Belieben lesen und schreiben möchten. Um dies zu erreichen, müssen Sie den Operator this verwenden.
function Animal() {
this.mood = '';
}

var Fluffy = new Animal();
Fluffy.mood = 'happy';
Fluffy.mood; // Return 'happy'
Diesmal stellt die Animal-Klasse eine Eigenschaft namens „mood“ zur Verfügung, die nach Belieben gelesen und geschrieben werden kann. Ebenso können Sie öffentlichen Eigenschaften Funktionen zuweisen, beispielsweise die getType-Funktion im vorherigen Beispiel. Achten Sie nur darauf, getType keinen Wert zuzuweisen, sonst wird es zerstört.
Völlig privat
Schließlich stellen Sie möglicherweise fest, dass Sie eine vollständig private lokale Variable benötigen. Auf diese Weise können Sie dasselbe Muster wie im ersten Beispiel verwenden, ohne öffentliche Methoden zu erstellen.
function Animal() {
var secret = "Du wirst es nie erfahren!"
}

var Fluffy = new Animal();
2. Schreibe eine flexible API
Da wir nun über die Erstellung von Klassen gesprochen haben, müssen wir den Code aktuell halten, um mit Änderungen der Produktanforderungen Schritt zu halten. Wenn Sie bereits einige Projekte durchgeführt oder ein Produkt über einen längeren Zeitraum gepflegt haben, dann sollten Sie wissen, dass sich die Anforderungen ändern. Dies ist eine unbestreitbare Tatsache. Wenn Sie das nicht glauben, wird Ihr Code zum Scheitern verurteilt sein, bevor er überhaupt geschrieben ist. Möglicherweise müssen Sie plötzlich den Inhalt einer Registerkarte animieren oder Daten über einen Ajax-Aufruf abrufen. Obwohl es unmöglich ist, die Zukunft genau vorherzusagen, ist es möglich, flexiblen Code zu schreiben, um sich auf zukünftige Notfälle vorzubereiten.
● Saner-Parameterliste
Beim Entwerfen der Parameterliste kann der Code zukunftsorientiert sein. Die Parameterliste ist der Hauptanlaufpunkt für andere bei der Implementierung Ihres Codes und kann sehr problematisch sein, wenn sie nicht gut gestaltet ist. Sie sollten Parameterlisten wie diese vermeiden:
function Person(employeeId, fname, lname, tel, fax, email, email2, dob) {
};
Diese Klasse ist sehr fragil. Wenn Sie nach der Veröffentlichung des Codes einen Zweitnamen-Parameter hinzufügen möchten, müssen Sie ihn aufgrund von Bestellproblemen am Ende der Liste hinzufügen. Das macht die Arbeit umständlich. Es wäre sehr schwierig, wenn Sie nicht jedem Parameter einen Wert zuweisen würden. Zum Beispiel:
var ara = new Person(1234, „Ara“, „Pehlivanian“, „514-555-1234“, null, null, null, „1976-05-17“);
Eine übersichtlichere und flexiblere Möglichkeit, Parameterlisten zu bearbeiten, ist die Verwendung dieses Musters:
function Person(employeeId, data) {
};
hat den ersten Parameter, weil er erforderlich ist. Der Rest wird dem Objekt beigemischt, so dass es flexibel einsetzbar ist.
var ara = new Person(1234, {
fname: „Ara“,
lname: „Pehlivanian“,
Tel.: „514-555-1234“,
Geburtsdatum: „1976 -05-17"
});
Das Schöne an diesem Modus ist, dass er sowohl leicht zu lesen als auch äußerst flexibel ist. Beachten Sie, dass Fax, E-Mail und E-Mail2 vollständig ignoriert werden. Darüber hinaus liegen die Objekte in keiner bestimmten Reihenfolge vor, sodass es sehr einfach ist, an beliebiger Stelle einen Parameter für den zweiten Vornamen hinzuzufügen:
var ara = new Person(1234, {
fname: "Ara",
mname: „Chris“,
lname: „Pehlivanian“,
Tel.: „514-555-1234“,
Geburtsdatum: „1976-05-17“
});
Klasse Der Code inside ist nicht wichtig, da auf den darin enthaltenen Wert über den Index zugegriffen werden kann:
function Person(employeeId, data) {
this.fname = data['fname'];
};
if data ['fname'] gibt einen Wert zurück und wird dann festgelegt. Andernfalls entsteht bei unsachgemäßer Einstellung kein Verlust.
● Code einbettbar machen
Im Laufe der Zeit erfordern Produktanforderungen möglicherweise mehr Verhalten von Ihren Klassen. Dieses Verhalten hat jedoch nichts mit der Kernfunktionalität Ihrer Klasse zu tun. Es kann auch die einzige Implementierung der Klasse sein, z. B. das Ausgrauen des Inhalts im Bereich einer Registerkarte, wenn externe Daten von einer anderen Registerkarte abgerufen werden. Vielleicht möchten Sie diese Funktionen in die Klasse einfügen, aber sie gehören nicht dorthin. Die Aufgabe des Tabstrips liegt in der Verwaltung der Tabs. Animieren und Abrufen von Daten sind zwei völlig verschiedene Dinge und müssen vom Code des Tab-Strips getrennt werden. Die einzige Möglichkeit, Ihren Tabstrip zukunftssicher zu machen, ohne zusätzliche Funktionalität auszuschließen, besteht darin, die Einbettung von Verhalten in den Code zu ermöglichen. Mit anderen Worten: Erstellen Sie Ereignisse und verknüpfen Sie sie mit Schlüsselmomenten in Ihrem Code, z. B. onTabChange, afterTabChange, onShowPanel, afterShowPanel usw. Auf diese Weise können sie sich problemlos in Ihr onShowPanel-Ereignis einbinden, einen Handler schreiben, der den Inhalt des Panels ausgraut, und alle sind zufrieden. JavaScript-Bibliotheken machen es Ihnen leicht, dies zu tun, aber es ist nicht so schwer, selbst zu schreiben. Unten finden Sie ein Beispiel mit YUI 3.


Dieses Beispiel verfügt über eine einfache TabStrip-Klasse mit einer showPanel-Methode. Diese Methode löst zwei Ereignisse aus: onShowPanel und afterShowPanel. Diese Fähigkeit wird durch die Erweiterung der Klasse um Y.EventTarget erreicht. Sobald dies erledigt ist, instanziieren wir ein TabStrip-Objekt und weisen ihm eine Reihe von Handlern zu. Dies ist allgemeiner Code, der das einzige Verhalten einer Instanz behandelt, ohne die aktuelle Klasse zu überladen.
Zusammenfassung
Wenn Sie planen, Code wiederzuverwenden, sei es auf derselben Seite, innerhalb derselben Website oder projektübergreifend, sollten Sie erwägen, ihn innerhalb von Klassen zu packen und zu organisieren. Objektorientiertes JavaScript erleichtert natürlich eine bessere Codeorganisation und Codewiederverwendung. Darüber hinaus können Sie mit ein wenig Voraussicht sicherstellen, dass Ihr Code flexibel genug ist, um noch lange nach dem Schreiben zu funktionieren. Das Schreiben von wiederverwendbarem, zukunftssicherem JavaScript-Code spart Ihnen, Ihrem Team und Ihrem Unternehmen Zeit und Geld. Damit werden Sie auf jeden Fall ein Volltreffer.