文中示例代码引用自《Javascript设计模式》一书
var BicycleShop = function () { }; BicycleShop.prototype = { sellBicycle: function (model) { var bicycle; switch (model) { case 'The Speedster': bicycle = new Speedster(); break; case 'The Lowrider': bicycle = new Lowrider(); break; case 'The Comfort Cruiser': default: bicycle = new ComfortCruiser(); } Interface.ensureImplements(bicycle, Bicycle); bicycle.assemble(); bicycle.wash(); return bicycle; } };无论哪家自行车店,都具有该服务,即各类自行车店都实现了该自行车接口。
var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'ride', 'repair']); var Speedster = function () { ...}; Speedster.prototype={ assemble:function(){ ... }, wash:function(){ ... }, ride:function(){ ...}, repair:function(){ ... } };有某种自行车,要卖掉
var californiaCruisers = new BicycleShop(); var yourNewBike = californiaCruisers.sellBicycle('The Speedster');若现在增加了某个新的种类的自行车店,则需要对BIcycleShop这一个大类进行更改,即代码的耦合性较高,牵一发而动全身
var BicycleShop = function () { }; BicycleShop.prototype = { sellBicycle: function (model) { var bicycle=this.createBicycle(model); bicycle.assemble(); bicycle.wash(); return bicycle; }, createBicycle: function (model) { var bicycle; switch (model) { case 'The Speedster': bicycle = new Speedster(); break; case 'The Lowrider': bicycle = new Lowrider(); break; case 'The Comfort Cruiser': default: bicycle = new ComfortCruiser(); } Interface.ensureImplements(bicycle, Bicycle); return bicycle; } };
BicycleShop.createBicycle=function (model) { var bicycle; switch (model) { case 'The Speedster': bicycle = new Speedster(); break; case 'The Lowrider': bicycle = new Lowrider(); break; case 'The FlatLander': bicycle = new Flatlander(); break; case 'The Comfort Cruiser': default: bicycle = new ComfortCruiser(); } Interface.ensureImplements(bicycle, Bicycle); return bicycle; }
var AcmeBicycleShop = function () { }; extend(AcmeBicycleShop, BicycleShop); AcmeBicycleShop.prototype.createBicycle = function (model) { var bicycle; switch (model) { case 'The Speedster': bicycle = new AcmeSpeedster(); break; case 'The Lowrider': bicycle = new AcmeLowrider(); break; case 'The FlatLander': bicycle = new AcmeFlatlander(); break; case 'The Comfort Cruiser': default: bicycle = new AcmeComfortCruiser(); } Interface.ensureImplements(bicycle, Bicycle); return bicycle; }
var GeneralProductsBicycleShop = function () { }; extend(GeneralProductsBicycleShop, BicycleShop); GeneralProductsBicycleShop.prototype.createBicycle = function (model) { var bicycle; switch (model) { case 'The Speedster': bicycle = new GeneralProductsSpeedster(); break; case 'The Lowrider': bicycle = new GeneralProductsLowrider(); break; case 'The FlatLander': bicycle = new GeneralProductsFlatlander(); break; case 'The Comfort Cruiser': default: bicycle = new GeneralProductsComfortCruiser(); } Interface.ensureImplements(bicycle, Bicycle); return bicycle; }
var AjaxHandler = new Interface('AjaxHandler', ['request', 'createXhrObject']); var SimpleHandler = function () {}; SimpleHandler.prototype={ request:function(method,url,callback,postVars){ var xhr=this.createXhrObject(); xhr.onreadystatechange=function(){ ... }; xhr.open(method,rul,true) }, createXhrObject:function(){ var methods=[ function(){return new XMLHttpRequest();}, function(){return new ActiveXObject('Msxml2.XMLHTTP');}, function(){return new ActiveXObject('Microsoft.XMLHTTP');} ]; for(var i=0,len=methods.length;i<len;i++){ try{ methods[i](); } catch(e){ continue; } this.createXhrObject=methods[i]//memoize the method。 //运行过一次该位置后,实例化对象.createXhrObject就根据其首次运行的浏览器环境被指向对应的方法了 //再次执行request函数时,其调用的createXhrObject函数就是这个被赋值的函数,而不用再重新判断一遍 //即动态定义函数 return methods[i]; throw new Error('SimpleHandler:Could not create an XHR object') } } }