js 设计模式
一共23种设计模式，分三大类
一、创建型速记口诀
Singleton，单例模式：保证一个类只有一个实例，并提供一个访问它的全局访问点
Prototype，原型模式：用原型实例指定创建对象的种类，并且通过拷贝这些原型来创建新的对象。创建多个实例对象，节省空间。
Factory Method，工厂方法：定义一个用于创建对象的接口，让子类决定实例化哪一个类，Factory Method使一个类的实例化延迟到了子类。
Abstract Factory，抽象工厂：提供一个创建一系列相关或相互依赖对象的接口，而无须指定它们的具体类。
Builder，建造模式：将一个复杂对象的构建与他的表示相分离，使得同样的构建过程可以创建不同的表示。
二、结构型速记口诀
Bridge，桥模式：将抽象部分与它的实现部分相分离，使他们可以独立的变化。
Flyweight，享元模式
Composite，组合模式：将对象组合成树形结构以表示部分整体的关系，Composite使得用户对单个对象和组合对象的使用具有一致性。
Facade，外观模式：为子系统中的一组接口提供一致的界面，facade提供了一高层接口，这个接口使得子系统更容易使用。
Proxy，代理模式：为其他对象提供一种代理以控制对这个对象的访问
Decrator，装饰模式：动态地给一个对象增加一些额外的职责，就增加的功能来说，Decorator模式相比生成子类更加灵活。
Adapter,适配器模式：将一类的接口转换成客户希望的另外一个接口，Adapter模式使得原本由于接口不兼容而不能一起工作那些类可以一起工作。
三、行为型速记口诀
Memento，备忘录模式：在不破坏对象的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。
Iterator，迭代器模式：提供一个方法顺序访问一个聚合对象的各个元素，而又不需要暴露该对象的内部表示。
Visitor，访问者模式：表示一个作用于某对象结构中的各元素的操作，它使你可以在不改变各元素类的前提下定义作用于这个元素的新操作。
Interpreter，解释器模式：给定一个语言，定义他的文法的一个表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。
Strategy，策略模式：定义一系列的算法，把他们一个个封装起来，并使他们可以互相替换，本模式使得算法可以独立于使用它们的客户。
Observer，观察者模式：定义对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知自动更新。
Template Method，模板方法：定义一个操作中的算法的骨架，而将一些步骤延迟到子类中，TemplateMethod使得子类可以不改变一个算法的结构即可以重定义该算法得某些特定步骤。
Chain of Responsibility，职责链模式：使多个对象都有机会处理请求，从而避免请求的送发者和接收者之间的耦合关系
Mediator，中介者模式：用一个中介对象封装一些列的对象交互。
Command，命令模式：将一个请求封装为一个对象，从而使你可以用不同的请求对客户进行参数化，对请求排队和记录请求日志，以及支持可撤销的操作。
State，状态模式：允许对象在其内部状态改变时改变他的行为。对象看起来似乎改变了他的类。
一、创建模式（5种）
功能：创建类对象的方式
1.单例模式
一个类只有一个实例，并且提供可全局访问点
懒汉单例，饿汉单例。
饿汉单例第一次加载慢，因为要初始化数据，像v-if、闭包。
// 单例模式 饿汉式
var singletonHungry = (function () {
var instance = { product: "单例-饿汉" };
return function () {
return instance;
}
})()
var a= singletonHungry();
var b= singletonHungry();
a === b; //true
var c = new singletonHungry();
var d = new singletonHungry();
c === d; //true
另外一种情况闭包，c!=d
var fn = (function (){
var num = 3;
return function(){
var n = 0;
console.log(++n,++num);
}
})()
a = fn();
b = fn();
a === b; //true
c = new fn();
d = new fn();
c === d; // false
缺点耦合度高
2.工厂模式
工厂模式，根据不同的要求，返回不同的对象
1.要在函数内部new一个实例化对象；
2.有返回值，返回new的那个对象；
3.函数名首字母最好不要大写，因为构造函数函数名必须是大写；
function factory(name,age,content){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.content = content;
return obj;
}
var factorySon = factory('二狗子','22','身娇体柔易');
https://www.cnblogs.com/robint/p/11397395.html
构造函数模式
function Factory(name,age,content) {
this.name = name;
this.age = age;
this.content = content;
}
var factorySonTwo = new Factory(‘瑞瑞’,‘22’,‘古灵精怪’);
3.抽象工厂模式
function Employee(name) {
this.name = name;
this.say = function () {
console.log("I am employee " + name);
};
}
function EmployeeFactory() {
this.create = function (name) {
return new Employee(name);
};
}
function Vendor(name) {
this.name = name;
this.say = function () {
console.log("I am vendor " + name);
};
}
function VendorFactory() {
this.create = function (name) {
return new Vendor(name);
};
}
function run() {
var persons = [];
var employeeFactory = new EmployeeFactory();
var vendorFactory = new VendorFactory();
persons.push(employeeFactory.create("Joan DiSilva"));
persons.push(employeeFactory.create("Tim O'Neill"));
persons.push(vendorFactory.create("Gerald Watson"));
persons.push(vendorFactory.create("Nicole McNight"));
for (var i = 0, len = persons.length; i < len; i++) {
persons[i].say();
}
}
4.原型模式
属性和方法都写在原型上
5.建造者模式
二、结构模式（7种）
功能：设置类与类之间的结构
外观模式
// 商店对象
var shop = {};
// 商店内制造食物
shop.createFood = function() {
console.log('Food ok');
}
// 商店内制造饮料
shop.createDrink = function () {
console.log('Drink ok');
}
// 商店内提供服务
shop.service = function () {
this.createFood(); // 提供食物
this.createDrink(); // 提供饮料
}
// 商店开门营业
shop.open = function () {
return this.service(); // 提供服务
}
// 调用门面(外观)
shop.open();
装饰器模式（包装器模式）：在原来的类的功能上，完善功能。可以用猴子补丁、闭包方法实现
代理模式：在原来的类的基础上，增加不一样的功能。
应用场景：
1.vue3的 new proxy(target, handle)
let star = {
name: '张xx',
age: 25,
phone: '12345678910'
}
let agent = new Proxy(star, {
// target是要代理的对象，key是属性的值
get: function (target, key) {
if (key === 'phone') {
// 返回经纪人自己的电话
return '66666666'
}
if (key === 'price') {
// 明星不报价，经纪人报价
return 120000
}
// 其他情况
// 可以获取name和age，这两个不保密，只有phone是保密的
return target[key]
},
set: function (target, key, val) {
if (key === 'customPrice') {
if (val < 100000) {
// 最低10w
throw new Error('价格太低')
} else {
target[key] = val
return true
}
}
}
})
// test
console.log(agent.name)
console.log(agent.age)
agent.customPrice = 150000
2.proxyTable 跨越代理
虽然代理模式很方便，但是在业务开发时应该注意使用场景，不需要在编写对象时就去预先猜测是否需要使用代理模式，只有当对象的功能变得复杂或者我们需要进行一定的访问限制时，再考虑使用代理。
三、行为模式（11种）
命令模式、
观察者模式
状态模式：
var ResultState = function(){
var States = {
state0:function(){
// 处理0
console.log(0)
},
state1:function(){
// 处理1
console.log(1)
},
state2:function(){
// 处理1
console.log(2)
}
}
function show(result){
States[result]&& States[result]()
}
return {
show:show
}
}()
ResultState.show('state0')
委托模式：
多个对象接收并处理同一请求，他们将请求委托给父级对象统一处理请求。
var li=document.getElementsByTagName('li');
for(var i=li.length-1;i>=0;i--){
li[i].onclick=function(){
this.style.backgroundColor='red';
}
}
改为：
var ul=document.getElementById('demo');
ul.onclick=function(e){
var e=e||window.event,
tar=e.target||e.srcElement;
if(tar.nodeName.toLowerCase()==='li'){
tar.style.backgroundColor='yellow';
}
}
分类 设计模式 简述 一句话归纳 目的 生活案例
创建型设计模式
（简单来说就是用来创建对象的） 工厂模式（Factory Pattern） 不同条件下创建不同实例 产品标准化，生产更高效 封装创建细节 实体工厂
单例模式（Singleton Pattern） 保证一个类仅有一个实例，并且提供一个全局访问点 世上只有一个我 保证独一无二 CEO
原型模式（Prototype Pattern） 通过拷贝原型创建新的对象 拔一根猴毛，吹出千万个 高效创建对象 克隆
建造者模式（Builder Pattern） 用来创建复杂的复合对象 高配中配和低配，想选哪配就哪配 开放个性配置步骤 选配
结构型设计模式
（关注类和对象的组合） 代理模式（Proxy Pattern） 为其他对象提供一种代理以控制对这个对象的访问 没有资源没时间，得找别人来帮忙 增强职责 媒婆
外观模式（Facade Pattern） 对外提供一个统一的接口用来访问子系统 打开一扇门，通向全世界 统一访问入口 前台
装饰器模式（Decorator Pattern） 为对象添加新功能 他大舅他二舅都是他舅 灵活扩展、同宗同源 煎饼
享元模式（Flyweight Pattern） 使用对象池来减少重复对象的创建 优化资源配置，减少重复浪费 共享资源池 全国社保联网
组合模式（Composite Pattern） 将整体与局部（树形结构）进行递归组合，让客户端能够以一种的方式对其进行处理 人在一起叫团伙，心在一起叫团队 统一整体和个体 组织架构树
适配器模式（Adapter Pattern） 将原来不兼容的两个类融合在一起 万能充电器 兼容转换 电源适配
桥接模式（Bridge Pattern） 将两个能够独立变化的部分分离开来 约定优于配置 不允许用继承 桥
行为型设计模式
（关注对象之间的通信） 模板模式（Template Pattern） 定义一套流程模板，根据需要实现模板中的操作 流程全部标准化，需要微调请覆盖 逻辑复用 把大象装进冰箱
策略模式（Strategy Pattern） 封装不同的算法，算法之间能互相替换 条条大道通罗马，具体哪条你来定 把选择权交给用户 选择支付方式
责任链模式（Chain of Responsibility Pattern） 拦截的类都实现统一接口，每个接收者都包含对下一个接收者的引用。将这些对象连接成一条链，并且沿着这条链传递请求，直到有对象处理它为止。 各人自扫门前雪，莫管他们瓦上霜 解耦处理逻辑 踢皮球
迭代器模式（Iterator Pattern） 提供一种方法顺序访问一个聚合对象中的各个元素 流水线上坐一天，每个包裹扫一遍 统一对集合的访问方式 逐个检票进站
命令模式（Command Pattern） 将请求封装成命令，并记录下来，能够撤销与重做 运筹帷幄之中，决胜千里之外 解耦请求和处理 遥控器
状态模式（State Pattern） 根据不同的状态做出不同的行为 状态驱动行为，行为决定状态 绑定状态和行为 订单状态跟踪
备忘录模式（Memento Pattern） 保存对象的状态，在需要时进行恢复 失足不成千古恨，想重来时就重来 备份、后悔机制 草稿箱
中介者模式（Mediator Pattern） 将对象之间的通信关联关系封装到一个中介类中单独处理，从而使其耦合松散 联系方式我给你，怎么搞定我不管 统一管理网状资源 朋友圈
解释器模式（Interpreter Pattern） 给定一个语言，定义它的语法表示，并定义一个解释器，这个解释器使用该标识来解释语言中的句子 我想说”方言“，一切解释权都归我 实现特定语法解析 摩斯密码
观察者模式（Observer Pattern） 状态发生改变时通知观察者，一对多的关系 到点就通知我 解耦观察者与被观察者 闹钟
访问者模式（Visitor Pattern） 稳定数据结构，定义新的操作行为 横看成岭侧成峰，远近高低各不同 解耦数据结构和数据操作 KPI考核
委派模式（Delegate Pattern） 允许对象组合实现与继承相同的代码重用，负责任务的调用和分配 这个需求很简单，怎么实现我不管 只对结果负责 授权委托书
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
