装饰者模式
1.
//需要装饰的类(函数) function Macbook() { this.cost = function () { return 1000; }; } function Memory(macbook) { this.cost = function () { return macbook.cost() + 75; }; } function BlurayDrive(macbook) { this.cost = function () { return macbook.cost() + 300; }; } function Insurance(macbook) { this.cost = function () { return macbook.cost() + 250; }; } // 用法 var myMacbook = new Insurance(new BlurayDrive(new Memory(new Macbook()))); console.log(myMacbook.cost());
2.
function ConcreteClass() { this.performTask = function () { this.preTask(); console.log('doing something'); this.postTask(); }; } function AbstractDecorator(decorated) { this.performTask = function () { decorated.performTask(); }; } function ConcreteDecoratorClass(decorated) { this.base = AbstractDecorator; this.base(decorated); decorated.preTask = function () { console.log('pre-calling..'); }; decorated.postTask = function () { console.log('post-calling..'); }; } var concrete = new ConcreteClass(); var decorator1 = new ConcreteDecoratorClass(concrete); var decorator2 = new ConcreteDecoratorClass(decorator1); decorator2.performTask();
3.
var tree = {}; tree.decorate = function () { console.log('Make sure the tree won\'t fall'); }; tree.getDecorator = function (deco) { tree[deco].prototype = this; return new tree[deco]; }; tree.RedBalls = function () { this.decorate = function () { this.RedBalls.prototype.decorate(); // 第7步:先执行原型(这时候是Angel了)的decorate方法 console.log('Put on some red balls'); // 第8步 再输出 red // 将这2步作为RedBalls的decorate方法 } }; tree.BlueBalls = function () { this.decorate = function () { this.BlueBalls.prototype.decorate(); // 第1步:先执行原型的decorate方法,也就是tree.decorate() console.log('Add blue balls'); // 第2步 再输出blue // 将这2步作为BlueBalls的decorate方法 } }; tree.Angel = function () { this.decorate = function () { this.Angel.prototype.decorate(); // 第4步:先执行原型(这时候是BlueBalls了)的decorate方法 console.log('An angel on the top'); // 第5步 再输出angel // 将这2步作为Angel的decorate方法 } }; tree = tree.getDecorator('BlueBalls'); // 第3步:将BlueBalls对象赋给tree,这时候父原型里的getDecorator依然可用 tree = tree.getDecorator('Angel'); // 第6步:将Angel对象赋给tree,这时候父原型的父原型里的getDecorator依然可用 tree = tree.getDecorator('RedBalls'); // 第9步:将RedBalls对象赋给tree tree.decorate(); // 第10步:执行RedBalls对象的decorate方法
4.
/* The Bicycle interface. */ var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'ride', 'repair', 'getPrice']); /* The AcmeComfortCruiser class. */ var AcmeComfortCruiser = function() { // implements Bicycle ... }; AcmeComfortCruiser.prototype = { assemble: function() { ... }, wash: function() { ... }, ride: function() { ... }, repair: function() { ... }, getPrice: function() { return 399.00; } }; /* The BicycleDecorator abstract decorator class. */ var BicycleDecorator = function(bicycle) { // implements Bicycle Interface.ensureImplements(bicycle, Bicycle); this.bicycle = bicycle; } BicycleDecorator.prototype = { assemble: function() { return this.bicycle.assemble(); }, wash: function() { return this.bicycle.wash(); }, ride: function() { return this.bicycle.ride(); }, repair: function() { return this.bicycle.repair(); }, getPrice: function() { return this.bicycle.getPrice(); } }; /* HeadlightDecorator class. */ var HeadlightDecorator = function(bicycle) { // implements Bicycle this.superclass.constructor(bicycle); // Call the superclass's constructor. } extend(HeadlightDecorator, BicycleDecorator); // Extend the superclass. HeadlightDecorator.prototype.assemble = function() { return this.bicycle.assemble() + ' Attach headlight to handlebars.'; }; HeadlightDecorator.prototype.getPrice = function() { return this.bicycle.getPrice() + 15.00; }; /* TaillightDecorator class. */ var TaillightDecorator = function(bicycle) { // implements Bicycle this.superclass.constructor(bicycle); // Call the superclass's constructor. } extend(TaillightDecorator, BicycleDecorator); // Extend the superclass. TaillightDecorator.prototype.assemble = function() { return this.bicycle.assemble() + ' Attach taillight to the seat post.'; }; TaillightDecorator.prototype.getPrice = function() { return this.bicycle.getPrice() + 9.00; }; /* Usage. */ var myBicycle = new AcmeComfortCruiser(); // Instantiate the bicycle. alert(myBicycle.getPrice()); // Returns 399.00 myBicycle = new TaillightDecorator(myBicycle); // Decorate the bicycle object // with a taillight. alert(myBicycle.getPrice()); // Now returns 408.00 myBicycle = new HeadlightDecorator(myBicycle); // Decorate the bicycle object // again, now with a headlight. alert(myBicycle.getPrice()); // Now returns 423.00