模板方法模式:
父类中定义一组操作算法骨架,而将一些实现步骤推迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中的某些实现步骤。
模板方法模式就是将多个抽象化诡异,从中抽象出来一个最基本的模板,当然这个模板可作为实体对象也可以作为抽象对象。
观察者模式:
又被称为发布-订阅模式或消息机制,定义了一种依赖关系,解决了主体对象与观察者之间的耦合。观察者模式定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得他们能够自动更新自己。
模式的作用:
1.支持简单的广播通信,自动通知所有已经订阅的对象
2.页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性
3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
注意事项:
监听要在触发之前。
创建一个观察者
//将观察者放在闭包中,当页面加载就立即执行
var Observer=(function(){
//防止消息队列爆漏而被篡改故将消息容器作为静态变量保存
var _message=[];
return {
//注册信息接口
regist:function(type,fn){
//如果此消息不存在则应该创建一个该消息类型
if(typeof _message[type]==='undefined'){
//将动作推入到该消息对应的动作执行队列中
_message[type]=[fn];
}else{
_message[type].push(fn);
}
},
//发布信息接口
fire:function(type,args){
//如果该消息没有被注册,则返回
if(!_message[type]) return;
var events={
type:type,//消息类型
args:args||{}//消息携带数据
},
len=_message[type].length;
for(var i=0;i<len;i++){
_message[type][i].call(this,events);
}
},
//移除信息接口
remove:function(type,fn){
if(_message[type] instanceof Array){
//从最后一个消息动作遍历
for(var i=_message[type].length-1;i>=0;i++){
_message[type][i]===fn&&_message[type].splice(i,1);
}
}
}
}
})();
//订阅一条消息
Observer.regist('test',function(event){
console.log(event.type,event.args.msg);
});
//发布这则消息
Observer.fire('test',{msg:'传递参数'});
在实际代码中其实发布-订阅模式也很常见,比如我们点击一个按钮触发了点击事件就是使用了该模式
<ul id="ul"></ul>
<script>
let ul=document.querySelector("#ul")
ul.addEventListener('click',(event)=>{
console.log(event.target);
})
</script>
**策略模式:**将定义的一组算法封装起来,使其相互之间可以替换。封装的算法具有一定的独立性,不会随客户端变化而变化。
var InputStrategy=function(){
var strategy={
notNull:function(value){
return /\s+/.test(value)?'请输入内容':'';
},
number:function(){
return /^[0-9]+(/.[0-9]+)?$/.test(value)?'':'请输入数字';
},
phone:function(){
return /^\d{3}\-\d{8}$|^\d{4}\-\d{7}$/.test(value)?'':'请输入正确的电话号码'
}
}
return{
check:function(type,value){
value=value.replace(/^\s+|\s+$/g,'');
return stratege[type]?strategy[type](value):'没有该类型的检测方法'
},
addStrategy:function(type,fn){
strategy[type]=fn;
}
}
}
**职责链模式:**解决请求的发送者与请求的接受者之间的耦合,通过职责链上的多个对象对分解请求流程,实现请求在多个对象之间的传递,直至最后一个对象完成请求的处理。