可扩展型的设计模式（适配器模式-结构性；装饰者模式-结构性；命令模式-行为型；观察者模式-行为型；职责链模式-行为型；访问者模式-技巧型。）

最新推荐文章于 2022-10-27 22:07:56 发布

AnJesi

最新推荐文章于 2022-10-27 22:07:56 发布

阅读量512

点赞数

分类专栏：设计模式 JavaScript 文章标签： javascript 设计模式

本文链接：https://blog.csdn.net/shi_Avicii/article/details/105878070

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

设计模式

5 篇文章 0 订阅

订阅专栏

什么是好的可扩展性

需求发生变更时不需要重新改旧代码
代码修改不会引起大规模变动
方便加入新模块
低耦合

适配器模式

ps：结构性 (接口)

目的：通过写一个适配器，来代替替换

应用场景：面临接口不通用的问题

一：基本结构

用log代替console.log 

var log = (function(){
	return window.console.log
})()
ps:把原方法赋予新接口名(新方法)

二：示例

例子：框架的变更

需求：目前项目使用A框架,现在改成了B,两个框架十分类似,但是少数几个方法不同,

// 假设原框架的方法和新框架的方法是
A.c(); //$.css()
A.o(); //$.on()

window.A=$;
A.c = function(){
	return $.css.apply(this.arguments);
}
A.o = function(){
	return $.on.apply(this.arguments);
}

例子：参数适配

需求：为了避免参数不适配产生的问题,很多框架会有一个参数适配操作,

function f1(config){
	// 默认配置
	var _default={
		name:'xxx',
		color:'red'
	}
	// 用户不传就用默认配置
	for(var item in _default){
		_default[item] = config[item] || _default[item]
	}
}
ps:当你的方法传入的参数较为复杂,最好都加上参数适配器

装饰者模式

ps：结构性 (方法内容)

目的：不重写方法的扩展方法

应用场景：当一个方法需要扩展但又不好去修改他的方法

一：基本结构

假设有个人写了个a模块,内部有个b方法,模块为他人写好,不能修改,如何扩展b方法呢

var a = {
	b:function(){
		
	}
};
function myb(){
	a.b();
	// 然后继续书写扩展方法
}
ps:我们新建一个自己的方法,在内部调用b方法,并且再执行自己的方法,这样可不在修改原对象的情况下,去扩展

二：示例

例子：扩展已有的事件绑定

需求：现在项目改造，需要给input标签已有的事件增加操作

// 新建一个适配工厂,接受两个参数,一个是绑定的dom,一个是要扩展方法
var decorator = function(dom,fn){
	// 判断dom上是否已经绑定click事件
	if(typeof dom.onclick == "function"){
		// 拿老方法
		var _old = dom.onclick;
		// 再绑定click事件
		dom.onclick = function(){
			//调用老方法和扩展方法
			_old();
			fn();
		}
	}
}
decorator(document.getElementById('dom1'),function(){
	// 我需要扩展的方法具体实现
	console.log(2);
})
ps:没必要去找到老代码在哪去改写,直接传入我需要改动的dom和扩展fn

例子：Vue的数组监听

需求：Vue中利用definePropert可以监听对象,那数组怎么办

// 又不能去改写数组原有的方法,先将数组原有的方法拷贝一份
var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);

// 定义哪些方法会触发数组更新
var methodsToPatch = [
	'push',
	'pop',
	'shift',
	'unshift',
	'splice',
	'sort',
	'reverse'
];
methodsToPatch.forEach((method)=>{
	// 先拿出老方法
	var original = arrayProto[method];
	// 调用老方法
	var result = original.apply(this,arguments);
	// 加上我们要调用的新方法
	dep.notify();
	
	return result;
})

命令模式

ps：行为型

目的：解耦实现和调用,让双方互不干扰,

应用场景：调用的命令充满不确定性

一：基本结构

var command = (function(){
	var action = {
		// 这里是具体的实现
	};
	return function excute(){
		// 这里是供外部调用的方法,在此可以拿到action的实现
	}
})();
ps:调用的时候只需要给到command命令,excute去解析命令并调用具体的实现

二：示例

例子：绘图命令

需求：封装一个canvas绘图库

var canvasCommand = (function(){
	var action = {
		drawCircle:function(){
			
		},
		drawRect:function(){
			
		}
	}
	return function excute (commander){
		commander.forEach((item)=>{
			action[item.command](item.config);
		})
	}
})();
// 调用只需要传入需要绘制的图形数组
canvasCommand([
	{
		command:'drawRect',
		config:{},
	},{
		command:'drawRect',
		config:{},
	}
])

例子：绘制随机数量的图片

需求：需要做一个画廊，图片数量和排列顺序随机

// 创建图片html=>展示
var createImg = (function(){
	var action = {
		create:function(){
			var htmlArr=[];
			var _htmlstring = '';
			var _htmlTemplate="<div><img src='{{img-url}}' /></div><h2>{{title}}</h2>";
			//行为型-->策略模式,图片排序方式
			var displayWay={
				normal:function(arr){
				 return arr;
				},
				reverse:function(arr){
				  return arr.reverse;
				}
			}
			obj.imgArr.forEach((img)=>{
			  var _html;
			  _html=_htmlTemplate.replace('{{img-url}}',img.img).replace('{{title}}',img.title);
			  htmlArr.push(_html);
			})
			htmlArr=displayWay[obj.type](htmlArr);
			_htmlstring=htmlArr.join("");
			return "<div>"+_htmlstring+"</div>";
		},
		display:function(obj){
		  var _html=this.create(obj);
		  obj.target.innerHTML=_html;
		}
	};
	return function excute (obj){
		// 结构性-->适配器模式,obj可能极其复杂,先适配器默认参数
		var _default = {
			imgArr:[{img:'xxx',title:'default title'}],
			type:'normal',
			target.document.body
		};
		for(var item in _default){
			_default[item] = obj[item] || _default[item];
		};
		action.display(_default);
	}
})()
createImg({
  imgArr:[{img:'xxxx',title:'default title1'},{img:'xxxx',title:'default title2'}],
  type:'normal',
})

ps:
	用户只管输入命令,不用关心api ,
	命令和实现解耦

	数据-->直接调用api
	变成
	数据-->excute命令解析层-->调用api

观察者模式

ps：行为型（事件绑定）

目的：减少对象间的耦合，来提高扩展性

应用场景：当两个模块直接沟通会增加他们的耦合时

一：基本结构（模式不是固定的，需要记住的是思维）

// 定义一个观察者
function observe(){
	this.message={
		// 这个对象储存我监听的事件
	}
}
// 注册事件
observe.prototype.regist = function(type,fn){
	this.message[type] = fn;
}
// 执行事件
observe.prototype.fire = function(type,fn){
	this.message[type]();
}
// 删除事件
observe.prototype.remove = function(type,fn){
	this.message[type] = null;
}
ps:定义一个中转观察者,两个模块之间不直接沟通,而是通过观察者 一般适用于不方便直接沟通,或者异步操作

二：示例

例子：多人合作问题

需求：现在假设A工程师写了首页模块,B工程师写了评论模块.现在要把评论展示在首页

// 定义一个观察者
function observe(){
	this.message = {};
}
// 注册事件
observe.prototype.regist = function(type,fn){
	this.message[type] = fn;
}
// 触发
observe.prototype.fire = function(type,fn){
	this.message[type]()
}

var observeOb = new observe();

// 假设首页需要热评
function comment(){
	this.commentList = [
		{
			type:'hot',
			content:'xxxx'
		}
	];
	// 注册事件,把需要的数据给出去
	var self = this;
	observeOb.regist('getHot',function(){
		var _arr = [];
		self.commentList.forEach((item)=>{
			if(item.type=='hot'){
				_arr.push(item)
			}
		})
		return _arr;
	})
}

function index(){
	// 执行注册的事件就可以拿到需要的数据
	var _arr = observeOb.fire('getHot');
}

例子：一个转盘

需求：一个转盘应用，每转一圈速度会变慢

// 定义一个观察者
function observe(){
	this.message={
		// 这个对象储存我监听的事件
	}
}
// 注册事件
observe.prototype.regist = function(type,fn){
	this.message[type] = fn;
}
// 执行事件
observe.prototype.fire = function(type,fn){
	this.message[type]();
}
// 删除事件
observe.prototype.remove = function(type,fn){
	this.message[type] = null;
}
// 初始化html=>最终结果选定=>运动效果=>运动控制
var _domArr = [];
function htmlInit(target){
	// 初始化10个奖品 
	for(var i=0;i<9;i++){
		// 每次循环创建一个div
		var _div = document.createElement('div');
		_div.innerHTML = i;
		// 初始样式
		_div.setAttribute('class','item');
		// 放进target
		target.appendChild(_div);
		_domArr.push(_div);
	}
}
// 结果模块
function getFinal(){
	var _num = math.random()*10+40;//基础转四圈,停留在哪一个用随机数
	return Math.floor(_num,0);
}
// 动画模块
//moverConfig={moveTime:10移动次数(几格),speed:50多少ms移动一次}
function mover(moverConfig){
	var nowIn = 0;//当前抽奖效果在哪
	var removeNum = 9;//当前需要删除的效果
	var timer = setInterval(()=>{
		if(nowIn!=0){//如果现在不是第一个
			// 那么需要删除的效果就是当前效果的前一个
			removeNum = nowIn-1;
		}
		// 删除和添加效果代码
		_domArr[removeNum].setAttribute('class','item');
		_domArr[nowIn].setAttribute('class','item item-on');
		// 每次操作完后效果所属index加一
		nowIn++;
		if(nowIn == moverConfig.moveTime){//当移动次数等于需要移动次数
			clearInterval(timer);//停止
			if(moverConfig.moveTime == 10){//如果还在前4圈
				observeOb.fire('finish')
			}
		}
	},moverConfig.speed)
}
// 动画控制模块
function moveControll(){
	var final = getFinal();
	var _circle = Math.floor(final/10,0);//拿到一共跑的圈数
	var stopNum = final%10;//最终停留
	var _speed = 2000;//初始化速度
	var _runCircle = 0;//已经跑的圈数
	
	// 初始化开始运动
	mover({
		moveTime:10,speed:_speed
	})
	
	//注册监听
	observeOb.regist('finish',function(){
		var _time = 0;
		// 每次完成就减慢50ms
		_speed -= 50;
		// 完成圈数+1
		_runCircle ++;
		// 跑的小于等于总圈数
		if(_runCircle<=_circle){
			// 还没跑完,就每次还得跑十次
			_time = 10;
		}else{
			// 跑完就等于最终停留
			_time = stopNum;
		}
		mover({
			moveTime:_time,
			speed:_speed
		})
	})
}
htmlInit(document.getElementById('app'));
moveControll();

职责链模式

ps：行为型

目的：为了避免请求发送者与多个请求处理者耦合在一起,形成一个链条,

应用场景：把操作分割成一系列模块,每个模块只处理自己的事情,

一：基本结构(代码模式不是固定的,需要记住的是思维)

function m1(){
	
}
function m2(){
	
}
function m3(){
	
}
_result = m1(_result);
_result = m2(_result);
_result = m3(_result);
ps:把要做的事情组织成一条有序的链条,通过在这条链条传递消息来完成功能.适用于不涉及到复杂异步的操作

二：示例

例子：Axios请求拦截器

需求：axios拦截器的设计,可以看出是一个职责链思想去处理请求

// axios拦截器
// 请求拦截器 => 请求 => 响应拦截器

//首先有axios方法
function axios(){
    //拦截器
	this.interceptors = {
		request:new interceptorsManner(),
		response:new interceptorsManner()
	}
}
//定义请求部分，假设为request
axios.prototype.request = function(){
	//dispathRequest这个方法才是真正的发请求出去，这里不写了，知道就好
	var chain = [dispathRequest,undefined];
	// 拿到状态promise
	var promise = Promise.resolve(config);
	// 在使用拦截时候,拿到请求拦截添加到数组前面中去,依次调用
	this.interceptors.request.handlers.forEach((interceptors)=>{
		chain.unshift(interceptors.fulfilled,interceptors.rejected);
	})
	// 响应拦截放后面
	this.interceptors.response.handlers.forEach((interceptors)=>{
		chain.push(interceptors.fulfilled,interceptors.rejected);
	})
	
	while(chain.length){//循环,每次去拿出成功的和失败的执行
		promise = promise.then(chain.shift(),chain.shift())
	}
}

//拦截器类
function interceptorsManner(){
	this.handlers = [];
}
// use的时候往handlers中添加请求拦截和响应拦截
interceptorsManner.prototype.use = function(fulfilled,rejected){
	this.handlers.push({
		fulfilled:fulfilled,
		rejected:rejected
	})
}

例子：利用职责链组织一个表单验证

需求：有一个表单,需要先前端验证,再后端验证

// 表单事件绑定=>前端验证=>后端验证

input.onblur = function(){
	// 我们简单定义一下:假设input.value拿到value值(实际上不可能)
	var _value = input.value;
	var _arr = [font,back];
	
	// 定义一个同步函数
	async function test(){
		// 初始化值就等于value
		var _result = value;
		while(_arr.length>0){//当链中还有时候
			_result = await _arr.shift()(_result);
		}
		return _result;
	}
	// async拿到的是一个pomise
	text().then((res)=>{
		console.log(res)
	})
}

// 前端验证 同步
function font(result){
	
}

// 后端验证 异步
function back(){
	
}
ps:要做的事情拆分成模块,模块之间只做自己模块的事情,然后传递结果

访问者模式

ps：技巧型

目的：解耦数据结构与数据操作,

应用场景：数据结构不希望与操作关联,适用于操作对象或者操作数据可能会变,操作对象不必要知道操作数据,相反同理

一：基本结构

// 我们要操作的data
var data=[];
var handler = function (){
	
}
handler.prototype.get = function(){
	
}
var vistor = function(handler,data){
	handler.get(data);
}
ps:定义一个访问者,代替直接访问对象,来减少两个对象之间的耦合,

二：示例
例子：不同角色访问数据

需求：假设有一个公司的财务报表财务关心支出收入老板关系盈利,

// 报表
function report(){
	this.income = '';//收入
	this.cost = '';//支出
	this.profit = '';//利润
}

function boss(){
	
}
boss.prototype.get = function(data){
	
}

function account(){
	
}
account.prototype.get = function(num1,num2){
	
}

// 设置一个访问者
function vistor(data,man){
	var handle = {
		boss:function(data){
			man.get(data.profit);
		},
		account:function(data){
			account.get(data.income,data.cost)
		},
	}
	// 拿到类的原名字
	handle[man.constructor.name](data);
}

vistor(new report(),new boss());

例子：表格操作

需求：一个可以新增,删除的表格,

function table(){
	
}
table.prototype.show = function(){
	
}
table.prototype.delete = function(){
	vistor(this,tableDat,'delete',id)
}
table.prototype.add = function(){
	
}
var tableData = [
	{
		id:1,
		name:'xxx',
		price:'xxx'
	}
]

function vistor(table,data,handle){
	var handleOb = {
		delete:function(id){
			
		},
		add:function(id,name,price){
			
		},
	}
	// arguments是类数组,先变成真正的数组
	var arg = Array.prototype.splice(arguments);
	// 先把前三项,也就是table,data,handle删除掉,剩下的就是你写入的参数了
	arg.splice(0,3);
	handleOb[handle].apply(this,arg);
}