前端设计模式学习｜青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第3天

模式是一种可复用的解决方案，可以将解决方案作为一种模板来解决软件设计中遇到的问题。

设计模式可以分为创建型设计模式、结构型设计模式和行为型设计模式：

创建型设计模式顾名思义就是处理对象的创建，用适用于特定情况/问题的方式创建对象。该类别的设计模式有构造器模型、工厂方法模式、抽象工厂模型、原型模式、单例模式、生成器模式。

结构型设计模式与对象的组合有关，为对象之间建立了联系，灵活的将对象组装成较大的结构，在系统的某一部分发生变化时不需要改变整体。该类别的设计模式有装饰模式、外观模式、享元模式、适配器模式、代理模式、组合模式、桥接模式。

行为型设计模式可以用于改善或简化不同对象之间的通信以及对象之间的职责划分，该类别的设计模式有迭代器模式、中介者模式、观察者模式、访问者模式、命令模式、备忘录模式、状态模式、策略模式、责任链模式、模板方法模式。

设计模式作用

模式是已经认证的解决方案，具有可靠性；

模式具有易复用性，可以使用模式用在不同的问题中，也可以减少重复代码的资源占用；

模式具有很强大的表达能力，具有设置好的结构和相关表达词汇，可以帮助人们选择正确的模式解决复杂的问题，在开发中也便于交流可以提高开发速度

今天主要从三方面讲述前端中比较常见的6种设计模式

1. 浏览器中的设计模式

单例模式

限制了类的实例化次数，只可以创建一次，可以应用在缓存、全局状态管理中。可以这样理解，单例模式相当于一个闭包，返回一个获取对象的函数：如果对象存在就之间获取，不存在就调用初始化函数。

var mySingleton=(
var instance;
function init(){
function privatemethon(){return Math.random();}
return {publicmethon:function(){return privatemethon}}
}
return {
getInstance:function(){
if(!instance){instance=init();}
return instance;
}
}
)();
访问： mySingleton.getInstance()

发布订阅模式

在内容发生变化时通知订阅者，常应用在邮件订阅、上线订阅等方面。

//订阅者通过on订阅订阅的内容在调度中心，发布者通过emit发布发布时通知订阅中心  订阅中心通知订阅者
class Obsever{
constrctor(){
this.cache={};
}
on(name,fn){
if(this.cache[name]){this.cache[name].push(fn);}
}
else{this.cache[name]=[fn];}
}
}
off(name,fn){
const tasks = this.cache[name];
if(tasks){
//this.cache[name]=this.cache[name].filiter((item)=>item!==fn)
this.cache[name].splice(tasks.findIndex((value, index) => value === fn),1);
}

}
emit(name){
let names=this.cache[name];
names.forEach(item => item())
}

2. javascript中的设计模式

原型模式

用已有的对象创建新对象，是基于原型继承的模式：基于模板创建对象并作为其他对象的原型。

var student={
name:XXX,
study:function(){}
}
var qingxunying_student=Object.create(student);

代理模式

可以控制对源对象的访问方式，比如监控、代理等业务。

访问者想访问目标对象，通过代理来完成

访问者的gift通过proxy给了目标对象target
var proxy={toproxy:function(trans){target.receive(trans);}}
var visitor={tovisit:function(proxy){proxy.toproxy("gift");}}
var target={receive:function(thigh){cosole.log("i get a ",thigh);}}

迭代器模式

在不暴露数据类型的情况下访问数据，相当于提供了一个接口，简言之就是数组或者对象遍历。

var Iteractor= function(arg){
let index = 0;
	return {
		next: ()=>{
			index++;
		},
		isDone: ()=>{
		  return  index >= arg.length;
		},
		getCurrentItem: ()=>{
			return arg[index];
		}
	}

}
var qingxunying_student=Iteractor({a:1}).isDone();

3. 前端框架中的设计模式

组合模式

一个父接口中由许多子元素组合成，组合中的对象是松散耦合的，因为它们都遵循相同的接口。

var Center= function(name){//一个中心由好多部分组成
this.part=[];
this.name=name;
}
Center.prototype={
add:function(part1){
this.part.push(part1);}

remove:function(part1){
for(let i=0;i<this.part.length;i++){
if(this.part[i] === part1){
this.part.splice(i,1);
}
}
}
}
var obj=new Center(test);
test.add(1);

前端设计模式学习

前端设计模式学习 ｜ 青训营笔记