Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des js-Bridge-Entwurfsmusters
Das Brückenentwurfsmuster ist die Grundlage vieler anderer Entwurfsmuster, wie zum Beispiel des dekorativen Musters und des Proxy-Musters, die mehr oder weniger in seinem Schatten zu sehen sind. Eines der wichtigsten Merkmale im objektorientierten Design ist die Vererbung Als Funktion zum Erweitern einer Klasse gibt es jedoch zwei Möglichkeiten: Vererbung und Überbrückung. Nach meinem einfachen Verständnis besteht Überbrückung darin, die Verwendung der Vererbung zur Erweiterung der Klasse aufzugeben, die Klasse jedoch durch das Einschließen eines anderen Objekts mit bestimmten Funktionen zu erweitern Schauen wir uns die beiden Strukturen an.
Zuerst gehen wir davon aus, dass es eine Anforderung gibt, es gibt eine Grafikschnittstelle und dann gibt es Grafikklassen wie Rechteck, Quadrat, Kreis usw. Wir benötigen Grafiken in verschiedenen Farben Erkennen Sie diese Anforderung 🎜>Implementierung
Grafik-Abstraktklasse
let Shape = function(color) { this.color = color; }; Shape.prototype.setColor = function(color) { this.color = color; }; Shape.prototype.draw = function() { new Error(); }
let Rectangle = function (color) { Shape.call(this, color); }; extend(Rectangle, Shape); Rectangle.prototype.draw = function () { color.bepaint("长方形"); }; let Square = function (color) { Shape.call(this, color); }; extend(Square, Shape); Square.prototype.draw = function () { color.bepaint("正方形"); } let Circle = function (color) { Shape.call(this, color); }; extend(Circle, Shape); Circle.prototype.draw = function () { color.bepaint("圆型"); };
let Color = function() { }; Shape.prototype.bepaint = function() { new Error(); };Der Brückenmodus erreicht die Entkopplung von Abstraktion und Implementierung. Die beiden sind unabhängig voneinander und beeinflussen sich nicht gegenseitig. Für zwei sich unabhängig voneinander ändernde Dimensionen ist der Brückenmodus perfekt.
let Red = function () { Color.call(this); }; extend(Red, Color); Red.prototype.bepaint = function(shape) { console.log("白色的" + shape); }; let Green = function () { Color.call(this); }; extend(Green, Color); Green.prototype.bepaint = function(shape) { console.log("绿色的" + shape); }; let Blue = function () { Color.call(this); }; extend(Blue, Color); Blue.prototype.bepaint = function(shape) { console.log("蓝色的" + shape); };Eine kurze Einführung in das strukturelle Fliegengewichtsmuster des js-Entwurfsmusters
let red = new Red(); //正方形 let square = new Square(); //红色的正方形 square.setColor(red); square.draw(); //长方形 let rectange = new Rectangle(); //红色长方形 rectange.setColor(red); rectange.draw();
Detaillierte Erklärung des Delegationsmusters von PHP-Designmustern
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des js-Bridge-Entwurfsmusters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!