Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der JavaScript-Strategiemusterprogrammierung_Grundkenntnisse
Ich mag das Strategieentwurfsmuster. Ich versuche, es so oft wie möglich zu nutzen. Im Kern verwendet das Strategiemuster Delegaten, um die Algorithmusklassen zu entkoppeln, die sie verwenden.
Dies hat mehrere Vorteile. Es verhindert die Verwendung umfangreicher bedingter Anweisungen zur Entscheidung, welche Algorithmen für bestimmte Objekttypen verwendet werden sollen. Durch die Trennung von Bedenken wird somit die Komplexität des Clients verringert und gleichzeitig die Unterklassifizierung erleichtert. Es verbessert die Modularität und Testbarkeit. Jeder Algorithmus kann einzeln getestet werden. Jeder Client kann Algorithmen simulieren. Jeder Client kann jeden Algorithmus verwenden. Sie können intermodulieren. Genau wie Legos.
Zur Umsetzung des Strategiemusters gibt es in der Regel zwei Teilnehmer:
Das Ziel dieser Strategie ist die Kapselung des Algorithmus.
Client-(Kontext-)Objekt, das jede Strategie per Plug-and-Play nutzen kann.
Hier ist eine Einführung, wie ich das Strategiemuster in Javascript verwende und wie ich es in einer chaotischen Umgebung verwende, um die Bibliothek in kleine Plug-Ins und Plug-and-Play-Pakete aufzuteilen.
Funktioniert als Strategien
Eine Funktion bietet eine hervorragende Möglichkeit, einen Algorithmus zu kapseln und kann als Strategie verwendet werden. Übergeben Sie einfach eine Funktion an den Client und stellen Sie sicher, dass Ihr Client die Richtlinie aufrufen kann.
Anhand eines Beispiels beweisen wir es. Angenommen, wir möchten eine Greeter-Klasse erstellen. Alles, was es tun muss, ist, den Leuten Hallo zu sagen. Wir möchten, dass die Greeter-Klasse die verschiedenen Arten der Begrüßung von Menschen kennt. Um diese Idee umzusetzen, erstellen wir unterschiedliche Strategien zur Begrüßung.
// Greeter is a class of object that can greet people. // It can learn different ways of greeting people through // 'Strategies.' // // This is the Greeter constructor. var Greeter = function(strategy) { this.strategy = strategy; }; // Greeter provides a greet function that is going to // greet people using the Strategy passed to the constructor. Greeter.prototype.greet = function() { return this.strategy(); }; // Since a function encapsulates an algorithm, it makes a perfect // candidate for a Strategy. // // Here are a couple of Strategies to use with our Greeter. var politeGreetingStrategy = function() { console.log("Hello."); }; var friendlyGreetingStrategy = function() { console.log("Hey!"); }; var boredGreetingStrategy = function() { console.log("sup."); }; // Let's use these strategies! var politeGreeter = new Greeter(politeGreetingStrategy); var friendlyGreeter = new Greeter(friendlyGreetingStrategy); var boredGreeter = new Greeter(boredGreetingStrategy); console.log(politeGreeter.greet()); //=> Hello. console.log(friendlyGreeter.greet()); //=> Hey! console.log(boredGreeter.greet()); //=> sup.
Im obigen Beispiel ist Greeter der Kunde und hat drei Strategien. Wie Sie sehen, weiß Greeter, wie man den Algorithmus verwendet, hat aber keine Ahnung von den Details des Algorithmus.
Bei komplexen Algorithmen kann eine einfache Funktion oft nicht zufriedenstellend sein. In diesem Fall besteht der beste Ansatz darin, es anhand von Objekten zu definieren.
Klassen als Strategien
Strategien können auch Klassen sein, insbesondere wenn die Berechnung komplexer ist als die künstliche (Richtlinie/Algorithmus), die im obigen Beispiel verwendet wird. Mithilfe von Klassen können Sie für jede Strategie eine Schnittstelle definieren.
Im folgenden Beispiel wird dies bestätigt.
// We can also leverage the power of Prototypes in Javascript to create // classes that act as strategies. // // Here, we create an abstract class that will serve as the interface // for all our strategies. It isn't needed, but it's good for documenting // purposes. var Strategy = function() {}; Strategy.prototype.execute = function() { throw new Error('Strategy#execute needs to be overridden.') }; // Like above, we want to create Greeting strategies. Let's subclass // our Strategy class to define them. Notice that the parent class // requires its children to override the execute method. var GreetingStrategy = function() {}; GreetingStrategy.prototype = Object.create(Strategy.prototype); // Here is the `execute` method, which is part of the public interface of // our Strategy-based objects. Notice how I implemented this method in term of // of other methods. This pattern is called a Template Method, and you'll see // the benefits later on. GreetingStrategy.prototype.execute = function() { return this.sayHi() + this.sayBye(); }; GreetingStrategy.prototype.sayHi = function() { return "Hello, "; }; GreetingStrategy.prototype.sayBye = function() { return "Goodbye."; }; // We can already try out our Strategy. It requires a little tweak in the // Greeter class before, though. Greeter.prototype.greet = function() { return this.strategy.execute(); }; var greeter = new Greeter(new GreetingStrategy()); greeter.greet() //=> 'Hello, Goodbye.'
Durch die Verwendung einer Klasse definieren wir eine Strategie mit einemexecutemethod-Objekt. Kunden können diese Schnittstelle mit jeder beliebigen Strategie implementieren.
Beachten Sie auch, wie ich die GreetingStrategy erstellt habe. Der interessante Teil ist die Überladung von methodexecute. Es wird in Form anderer Funktionen definiert. Nun können nachfolgende Unterklassen der Klasse bestimmte Verhaltensweisen ändern, z. B. diesayHiorsayBye-Methode, ohne den allgemeinen Algorithmus zu ändern. Dieses Muster wird als Vorlagenmethode bezeichnet und eignet sich sehr gut für das Strategiemuster.
Mal sehen, was passiert.
// Since the GreetingStrategy#execute method uses methods to define its algorithm, // the Template Method pattern, we can subclass it and simply override one of those // methods to alter the behavior without changing the algorithm. var PoliteGreetingStrategy = function() {}; PoliteGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype); PoliteGreetingStrategy.prototype.sayHi = function() { return "Welcome sir, "; }; var FriendlyGreetingStrategy = function() {}; FriendlyGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype); FriendlyGreetingStrategy.prototype.sayHi = function() { return "Hey, "; }; var BoredGreetingStrategy = function() {}; BoredGreetingStrategy.prototype = Object.create(GreetingStrategy.prototype); BoredGreetingStrategy.prototype.sayHi = function() { return "sup, "; }; var politeGreeter = new Greeter(new PoliteGreetingStrategy()); var friendlyGreeter = new Greeter(new FriendlyGreetingStrategy()); var boredGreeter = new Greeter(new BoredGreetingStrategy()); politeGreeter.greet(); //=> 'Welcome sir, Goodbye.' friendlyGreeter.greet(); //=> 'Hey, Goodbye.' boredGreeter.greet(); //=> 'sup, Goodbye.'
GreetingStrategy erstellt einen Klassenalgorithmus, indem es die Schritte der Ausführungsmethode angibt. Im obigen Codeausschnitt machen wir uns dies zunutze, indem wir einen speziellen Algorithmus erstellen.
Ohne Unterklassen zeigt unser Greeter immer noch polymorphes Verhalten. Es ist nicht erforderlich, zwischen verschiedenen Greeter-Typen zu wechseln, um den richtigen Algorithmus auszulösen. Dies alles ist an jedes Greeter-Objekt gebunden.
var greeters = [ new Greeter(new BoredGreetingStrategy()), new Greeter(new PoliteGreetingStrategy()), new Greeter(new FriendlyGreetingStrategy()), ]; greeters.forEach(function(greeter) { // Since each greeter knows its strategy, there's no need // to do any type checking. We just greet, and the object // knows how to handle it. greeter.greet(); });
Strategiemodus in mehreren Umgebungen
Eines meiner Lieblingsbeispiele für das Strategiemuster befindet sich in der Passport.js-Bibliothek. Passport.js bietet eine einfache Möglichkeit, die Authentifizierung in Node zu handhaben. Es wird von einer Vielzahl von Anbietern unterstützt (Facebook, Twitter, Google usw.), die jeweils als Richtlinie implementiert sind.
Die Bibliothek ist wie alle ihre Strategien als npm-Paket verfügbar. Benutzer der Bibliothek können entscheiden, welches npm-Paket sie für ihre individuellen Anwendungsfälle installieren möchten. Hier ist ein Codeausschnitt, der zeigt, wie das geht:
// Taken from http://passportjs.org var passport = require('passport') // Each authentication mechanism is provided as an npm package. // These packages expose a Strategy object. , LocalStrategy = require('passport-local').Strategy , FacebookStrategy = require('passport-facebook').Strategy; // Passport can be instanciated using any Strategy. passport.use(new LocalStrategy( function(username, password, done) { User.findOne({ username: username }, function (err, user) { if (err) { return done(err); } if (!user) { return done(null, false, { message: 'Incorrect username.' }); } if (!user.validPassword(password)) { return done(null, false, { message: 'Incorrect password.' }); } return done(null, user); }); } )); // In this case, we instanciate a Facebook Strategy passport.use(new FacebookStrategy({ clientID: FACEBOOK_APP_ID, clientSecret: FACEBOOK_APP_SECRET, callbackURL: "http://www.example.com/auth/facebook/callback" }, function(accessToken, refreshToken, profile, done) { User.findOrCreate(..., function(err, user) { if (err) { return done(err); } done(null, user); }); } ));
Die Passport.js-Bibliothek verfügt nur über ein oder zwei einfache Authentifizierungsmechanismen. Abgesehen davon verfügt es über keine Schnittstelle außer einer Richtlinienklasse, die dem Kontextobjekt entspricht. Dieser Mechanismus ermöglicht seinen Benutzern die einfache Implementierung ihrer eigenen Authentifizierungsmechanismen, ohne das Projekt zu beeinträchtigen.
Reflexion
Das Strategiemuster bietet eine Möglichkeit, die Modularität und Testbarkeit Ihres Codes zu erhöhen. Das bedeutet nicht, dass (Strategiemuster) immer funktioniert. Mixins können auch verwendet werden, um zur Laufzeit Funktionalität, beispielsweise Algorithmen, in ein Objekt einzufügen. Der Flat-Old-Duck-Typing-Polymorphismus kann manchmal ganz einfach sein.
Durch die Verwendung des Strategiemusters können Sie jedoch Ihren Code skalieren, wenn Ihre Arbeitslast wächst, ohne zu Beginn eine große Architektur einführen zu müssen. Wie wir am Passport.js-Beispiel gesehen haben, wird es für Betreuer in Zukunft einfacher, zusätzliche Strategien hinzuzufügen.