Wie man anfängt, ‘komplexen’ Code zu schreiben

In diesem Beitrag geht es darum, über den Code nachzudenken, den Sie schreiben. Alles, was hierin enthalten ist, ist meine Meinung und Sie sollten immer die Gültigkeit meiner Meinungen berücksichtigen, indem Sie sie mit besseren vergleichen! Die Sprache, die ich verwenden werde, ist Javascript. Voraussetzung für das Verständnis dieses Artikels ist die Kenntnis von intermediärem Javascript und die Vertrautheit mit einigen objektorientierten Konzepten. Dieser Beitrag ist inspiriert von Kapitel 9 von Cristina Lopes ‘exzellentem Buch “Übungen im Programmierstil”.

Ein wirklich häufiges Muster im Code ist —

1. Definieren Sie ein einfaches Objekt

var store_item = {
name : 'wonderball'
}

2. Um es dann für die Anzeige auf einer Webseite vorzubereiten, führen wir jede Eigenschaft durch einige Funktionen.

addExclamationPoint(store_item);
capitalizeName(store_item);function addExclamationPoint(item) {
item.name = item.name + '!';
}function capitalizeName(item) {
// some code to capitalize item.name, cut out for brevity.
}

Und so bereiten wir oft Daten zur Anzeige vor. Jetzt, da unser store_item einen großgeschriebenen Namen und ein Ausrufezeichen hat, können wir es problemlos auf unserer Webseite anzeigen. Wenn es eine dritte Sache gibt, die wir tun müssen, schreiben wir einfach eine dritte Funktion, um die Daten zu transformieren, und übergeben das Element wie gewohnt.

Das größere, große Bildmuster, das wir hier erstellt haben, ist:

Es gibt ein paar ausgefallene Begriffe für diese Art der Programmierung wie ‘prozedural’ oder ‘Imperativ’, aber ich würde es einen anderen Begriff nennen: ‘einfach’. Es ist sehr einfache Programmierung. Es ist die Art der Programmierung, die jeder zuerst lernt. Für Programme von kleinem Maßstab ist es absolut die beste Art zu programmieren, weil Menschen gut darin sind, 1 bis 10 logische Schritte ziemlich gut zu befolgen.

Wenn Ihr Programm ausreichend groß wird (über 10 Transformationen, bevor die Daten angezeigt werden) oder eine Funktion viele Datenobjekte ändert (mehr als 2) oder wenn viele IF-Anweisungen Verzweigungslogik verursachen, wird diese ‘einfache’ Programmierung stattdessen zu ‘einem Durcheinander’.

Fast jedes Projekt oder Stück Code wird chaotisch. Der größte Teil der Programmierung besteht darin, dass Programmierer Wege finden, um ein Durcheinander zu vermeiden, und keine Lösungen für das eigentliche Problem der Anzeige der Daten. Die Arbeit der Programmierung besteht darin, zu lernen, Code so zu schreiben, dass wir 100 Transformationen auf 100 Daten anwenden und es nicht durcheinander bringen können.

Lassen Sie mich Ihnen nun eine große Änderung des obigen Musters vorstellen und bedenken, dass das, was ich Ihnen zeigen werde, der erste Schritt ist, um ein fortgeschrittener Programmierer zu werden, da er Sie aus der ‘einfachen’ Codierung herausbricht. Es führt Sie in neue Denkweisen ein, wie Sie einfach einige Daten für eine Webseite ändern können. Das Objekt hat jetzt eine eigene Funktion namens ‘bind’, und diese Funktion ist für die Transformation der Daten verantwortlich.

var store_item = {
name: 'wonderball',
bind: function(func) {
this.name = func(this.name);
return this;
}
}// Here are two functions I'll use to transform the store_item.name, each one now just takes a name and modifies it, neither function has any clue what properties it's changing in store_item anymore.function capitalize(name) {
return name.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() +
txt.substr(1).toLowerCase();
});
}function addExclamationPoint(name) {
return name + '!';
}store_item.bind(addExclamationPoint).bind(capitalize);

Diese Lösung verhält sich genau wie der ursprüngliche ‘einfache’ Code oben, aber es scheint komplexer, warum? Denn für die einfache Aufgabe, die wir haben, ist es übertrieben, aber was sind die Kompromisse dieser Komplexität?

Um das zu beantworten, lassen Sie uns darüber sprechen, was anders ist:

1. Wir haben diese verrückte, seltsame ‘Bind’ -Funktion, die als Argument keinen neuen Wert für den Namen verwendet, sondern eine andere Funktion, sag was jetzt?
2. die Funktionen capitalize und addExclamationPoint sind unterschiedlich, jetzt rufen sie nicht mehr auf item.name direkt mehr.
3. Wir setzen den Namen nicht mehr mit einem ‘=’ , sondern verwenden stattdessen dieses seltsame store_item .bind(function_name), Syntax stattdessen.

Mit diesen drei Unterschieden müssen wir uns jetzt fragen, ist diese Änderung besser? Vielleicht nicht, wenn das Projekt so klein bleibt. Vielleicht ja, wenn das Projekt viel größer wird.

Die wichtigste Änderung ist, dass das store_item-Objekt jetzt für die Behandlung seines Status über die Bind-Funktion verantwortlich ist. Natürlich, wenn Sie wollten, könnten Sie direkt ändern store_item.name , aber das Objekt schreit praktisch: “Hey, benutze meine Bindungsfunktion, um mich zu ändern!”.

Aber jetzt ist es einfach, ein Muster zu sehen, bei dem mehrere store_items jeweils ihren eigenen Status mit ihrem eigenen verwalten .bind-Funktion:

// Three store items, each one with a different state.store_item1.bind(addExclamationPoint).bind(capitalize); //Wonderball!store_item2.bind(capitalize);
//Wonderballstore_item3.bind(addExclamationPoint);
//wonderball!

Wir können 100 store_items erstellen und deren Status ziemlich einfach verwalten. Alles, was wir tun müssen, ist eine Funktion zu schreiben, die nur einen Rückgabewert hat, und die unseres Objekts zu verwenden.bind-Funktion.

Die Magie dieses Musters liegt in der Bind-Funktion, also lasst uns das jetzt ein bisschen mehr erforschen.

// 1. First define the function, and have it take as an argument another function. Taking a function as an argument, instead of data is the core change here. bind: function(func) { // 2. This second line is the secret sauce, it will run the function you passed in with 'this.name' as an argument, and then assign whatever value is returned to this.name. Mull this over. this.name = func(this.name);// 3. Finally, return 'this'. You don't have to have this step in here, but returning 'this' is what allows .bind chainging to happen (.e.g. doing .bind().bind() vs .bind(); .bind();) return this;
}

Da haben Sie es also, wir haben unseren Code komplexer gemacht, aber jetzt haben wir ein paar neue Vorteile:

1. Ein Objekt ändert jetzt seinen eigenen Status und kann dies in nur einer Zeile erheblich tun.
2. Die Funktionen, die wir geschrieben haben, sind reiner, sie ändern nicht die Eigenschaften eines Objekts wie im obigen Beispiel, sie nehmen nur eine Eingabe und geben eine Ausgabe zurück.
3. Wir wissen, dass die Funktionen, die wir verwenden, wenn wir den Status eines Objekts ändern, wahrscheinlich nicht den Status eines anderen Objekts ändern.

Aber wir haben auch ein paar Nachteile:

1. Ihr Code ist jetzt definitiv weniger intuitiv für einen Neuankömmling.
2. Für eine kleine Site ist dieser Code zu komplex.

Also, was ist das endgültige Urteil, ist das besser? Schlimmer? Verwirrender? (Zuerst ja.) All diese Fragen sind offen, aber eines kann ich mit Sicherheit sagen: Das Betrachten und Verstehen solcher Muster ist Teil des Lernens von Javascript und des Wachsens als Programmierer. Die kontinuierliche Verwendung der ‘einfachen’ Art der Codierung zur Lösung von Problemen wird nach einer Weile nicht mehr nachhaltig. Wenn Sie sich die Zeit nehmen, mehr ‘komplexe’ Wege zu lernen, Dinge zu tun, passieren viele großartige Dinge: Ihre Fähigkeit, seitlich zu denken, öffnet sich, Sie können vielfältigere Arten von Code lesen, und Sie erhöhen die Möglichkeiten, über die Lösung von Problemen nachzudenken. Vielleicht ist das der eigentliche Vorteil, dieses und andere Muster zu lernen.