js设计模式（下）

引用：(23条消息) 《Javascript设计模式与开发实践》关于设计模式典型代码的整理（下）：模板方法模式、享元模式、职责链模式、中介者模式、装饰模式、状态模式、适配器模式_QQsilhonette的博客-CSDN博客

8、模板方法模式：一种基于继承的设计模式。

// 模板方法模式
var Beverage = function (param) {

var boilWater = function () {
console.log('把水煮沸');
};

var brew = param.brew || function () {
throw new Error('必须传递brew方法');
};

var pourInCup = param.pourInCup || function () {
throw new Error( '必须传递 pourInCup 方法' );
};
var addCondiments = param.addCondiments || function () {
throw new Error( '必须传递 addCondiments 方法' );
};

var F = function(){};
F.prototype.init = function(){ boilWater();
brew();
pourInCup();
addCondiments();
};
return F;
};

var Coffee = Beverage({ brew: function(){
console.log( '用沸水冲泡咖啡' ); },
pourInCup: function(){
console.log( '把咖啡倒进杯子' );
},
addCondiments: function(){
console.log( '加糖和牛奶' ); }
});

var Tea = Beverage({
brew: function(){
console.log( '用沸水浸泡茶叶' ); },
pourInCup: function(){
console.log( '把茶倒进杯子' );
},
addCondiments: function(){
console.log( '加柠檬' );
}
});
// 测试
var coffee = new Coffee();
coffee.init();

var tea = new Tea();
tea.init();
9、享元模式：运用共享技术来有效支持大量细粒度的对象。

内部状态与外部状态：
 内部状态存储于对象内部。
 内部状态可以被一些对象共享。
 内部状态独立于具体的场景，通常不会改变。
 外部状态取决于具体的场景，并根据场景而变化，外部状态不能被共享。

// 享元模式
var Model = function (sex) {
this.sex = sex; // 性别为内部状态
};

Model.prototype.takePhoto = function () {
console.log('sex=' + this.sex + ' underwear=' + this.underwear); // 内衣为外部状态
};
// 测试
var maleModel = new Model('male');
femaleModel = new Model('female');

for (var i = 1; i <= 50; i++) {
maleModel.underwear = 'underwear' + i;
maleModel.takePhoto();
};

for ( var j = 1; j <= 50; j++ ){
femaleModel.underwear = 'underwear' + j;
femaleModel.takePhoto();
};

10、职责链模式：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。

// 职责链模式
var order500 = function( orderType, pay, stock ){
if ( orderType === 1 && pay === true ){
console.log( '500 元定金预购，得到 100 优惠券' );
}else{
return 'nextSuccessor'; // 我不知道下一个节点是谁，反正把请求往后面传递
}
};

var order200 = function( orderType, pay, stock ){
if ( orderType === 2 && pay === true ){
console.log( '200 元定金预购，得到 50 优惠券' );
}else{
return 'nextSuccessor'; // 我不知道下一个节点是谁，反正把请求往后面传递
}
};

var orderNormal = function( orderType, pay, stock ){
if ( stock > 0 ){
console.log( '普通购买，无优惠券' );
}else{
console.log( '手机库存不足' );
}
};
// Chain.prototype.setNextSuccessor 指定在链中的下一个节点
// Chain.prototype.passRequest 传递请求给某个节点
var Chain = function (fn) {
this.fn = fn;
this.successor = null;
};

Chain.prototype.setNextSuccessor = function (successor) {
return this.successor = successor;
};

Chain.prototype.passRequest = function () {
var ret = this.fn.apply(this, arguments);

if(ret === 'nextSuccessor') {
return this.successor && this.successor.passRequest.apply(this.successor, arguments);
}

return ret;
};
// 测试
var chainOrder500 = new Chain( order500 );
var chainOrder200 = new Chain( order200 );
var chainOrderNormal = new Chain( orderNormal );

chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal);

chainOrder500.passRequest( 1, true, 500 );
chainOrder500.passRequest( 2, true, 500 );
chainOrder500.passRequest( 3, true, 500 );
chainOrder500.passRequest( 1, false, 0 );

11、中介者模式：增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可。

// 中介者模式
var goods = { // 手机库存
"red|32G": 3,
"red|16G": 0,
"blue|32G": 1,
"blue|16G": 6
};

var mediator = (function(){
var colorSelect = document.getElementById( 'colorSelect' ),
memorySelect = document.getElementById( 'memorySelect' ),
numberInput = document.getElementById( 'numberInput' ),
colorInfo = document.getElementById( 'colorInfo' ),
memoryInfo = document.getElementById( 'memoryInfo' ),
numberInfo = document.getElementById( 'numberInfo' ),
nextBtn = document.getElementById( 'nextBtn' );
return {
changed: function( obj ){
var color = colorSelect.value, // 颜色
memory = memorySelect.value,// 内存
number = numberInput.value, // 数量
stock = goods[ color + '|' + memory ]; // 颜色和内存对应的手机库存数量
if ( obj === colorSelect ){ // 如果改变的是选择颜色下拉框
colorInfo.innerHTML = color;
}else if ( obj === memorySelect ){
memoryInfo.innerHTML = memory;
}else if ( obj === numberInput ){
numberInfo.innerHTML = number;
}
if ( !color ){
nextBtn.disabled = true; nextBtn.innerHTML = '请选择手机颜色'; return;
}
if ( !memory ){
nextBtn.disabled = true; nextBtn.innerHTML = '请选择内存大小'; return;
}
if ( ( ( number - 0 ) | 0 ) !== number - 0 ){ // 输入购买数量是否为正整数
nextBtn.disabled = true;
nextBtn.innerHTML = '请输入正确的购买数量'; return;
}
nextBtn.disabled = false;
nextBtn.innerHTML = '放入购物车';
}
}
})();

// 事件函数:
colorSelect.onchange = function(){
mediator.changed( this );
};
memorySelect.onchange = function(){
mediator.changed( this );
};
numberInput.oninput = function(){
mediator.changed( this );
};

12、装饰者模式：在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责。

装饰者模式和代理模式：装饰者模式是实实在在的为对象增加新的职责和行为，而代理做的事情还是跟本体 一样。
// 用AOP装饰模式
Function.prototype.before = function(beforefn) {
var _self = this; // 保存原函数的引用
return function () {
beforefn.apply(this, arguments);
return _self.apply(this, arguments);
}
}

Function.prototype.after = function (afterfn) {
var _self = this;
return function () {
var ret = _self.apply(this, arguments);
afterfn.apply(this, arguments);
return ret;
}
}

13、状态模式：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。

// 状态模式
var delegate = function (client, delegation) {
return {
buttonWasPressed: function () {
return delegation.buttonWasPressed.apply(client, arguments);
}
}
};

var FSM = {
off: {
buttonWasPressed: function() {
console.log('关灯');
this.button.innerHTML = '下一次按我是开灯';
this.currState = this.onState;
}
},
on: {
buttonWasPressed: function(){
console.log( '开灯' );
this.button.innerHTML = '下一次按我是关灯';
this.currState = this.offState;
}
}
};

var Light = function () {
this.offState = delegate(this, FSM.off);
this.onState = delegate(this, FSM.on);
this.currState = this.offState;
this.button = null;
};

Light.prototype.init = function () {
var button = document.createElement('button');
self = this;
button.innerHTML = '已关灯';
this.button = document.body.appendChild(button);
this.button.onclick = function () {
self.currState.buttonWasPressed();
}
};
// 测试
var light = new Light();
light.init();

14、适配器模式：解决两个软件实体间的接口不兼容的问题。

// 适配器模式
var renderMap = function( map ){
if ( map.show instanceof Function ){
map.show();
}
};

var googleMap = {
show: function(){
console.log( '开始渲染谷歌地图' );
}
};
var baiduMap = {
display: function(){
console.log( '开始渲染百度地图' );
}
};
var baiduMapAdapter = {
show: function(){
return baiduMap.display();
}
};
renderMap( googleMap ); // 输出:开始渲染谷歌地图
renderMap( baiduMapAdapter ); // 输出:开始渲染百度地图

 

 

 

QQsilhonette
关注
————————————————
版权声明：本文为CSDN博主「QQsilhonette」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/QQsilhonette/article/details/84954376