JS设计模式的一点感悟

JS设计模式读后感

最近在看《Javascript设计模式》这本书，此书并没有空谈设计模式，而是每种模式都结合了具体的业务，这些具体的业务对于前端开发者也是经常遇到的，所以很容易产生共鸣。(全书大概有38种设计模式，有的模式用的少，本文仅记录模式的核心思想)

创建型设计模式(6种)

简单工厂模式(有类和对象两种实现形式)
主要用来创建同一种对象，常与策略模式结合使用

// 类实现，可复用父类公用方法
var popFactory=function(name){
    switch(name){
        case 'alert':
            return new LoginAlert();
        case 'confirm':
            return new LoginConfirm();
        case 'prompt':
            return new LoginPrompt();
    }
}

// 对象实现，公用逻辑
function createPop(type,text){
    var o=new Object();
    o.content=text;
    o.show=function(){};
    if(type=='alert'){
        // 差异部分
    }
    if(type=='prompt'){
        //差异部分
    }
    if(type=='confirm'){
        // 差异部分
    }
    return o;
}

工厂模式&抽象工厂(用的不多)

//工厂模式里有个安全模式
function A(){
    if(this instanceof A)
        return this;
    else
        return new A();
}
// 抽象工厂里有个抽象类的模拟实现(JS本身无抽象类，通过抛出Error模拟实现)
var Car=function(){}
Car.prototype={
    getPrice:function(){
        return new Error('抽象方法不能调用')
    }
}
MoTuoCar=function(){}
MoTuoCar.prototype=new Car();
MoTuoCar.prototype.constructor=MoTuoCar;
var a=new MoTuoCar();
a.getPrice() //报错

建造者模式&原型模式&单例模式
建造者模式就一句话：一个复杂对象由多个简单对象组合而成
原型模式：通过call函数继承父类属性并通过将父类的实例给到子类的原型来继承父类原型
单例模式：本质上就是提供了一个命名空间

结构型设计模式(7种)

适配器、装饰者和享元模式
适配器模式：主要用于对数据做预处理(后端返回的数据一般需要在前端洗一遍)
装饰者模式：先保留原有实现，在此基础上做进一步封装(前段时间做监控系统，对XMLHttpRequest做了封装，重写了onreadystatechange函数，而业务代码依赖zepto，导致了业务代码的ajax请求异常，原因就是onreadystatechange被重写了，这时就用上了装饰者模式)
享元模式：就是对核心对象的抽象(精简)，提高代码的复用率
外观模式、代理模式、桥接、组合模式
外观模式：屏蔽底层(或不同平台)差异，提供更高级的统一接口
代理模式：一般都是解决接口跨域问题，配合nginx使用很方便
桥接模式：先提取相同业务逻辑，再通过桥接方法与具体业务链接起来，主要用于简化业务逻辑，去除冗余代码
组合模式：感觉跟建造者模式差不多

行为型设计模式(11种)

常用的有观察者模式、策略模式、职责链模式、状态模式
观察者模式：和事件的发布订阅模式相似。当拿到ajax数据，用数据和模板组合成html时，数据的状态可能有多种情况(404,200等)，可采用观察者模式进行区分。具体的实现就是通过自定义事件(e=new Event('APIError');e.data=response;window.dispatchEvent(e);window.addEventListener('APIError',function(event){//通过event.data拿到数据做对应处理}))
策略模式：本质上是传入不同的参数，内部进行不同的处理
职责链模式：本质上是函数单一职责的链式表现
状态模式：本质上就是将多if判断情形改为switch或对象模拟情形，提高可维护性和可读性

技巧型设计模式(8种)

常用的有链模式、委托模式、节流模式、数据访问对象(DAO)、惰性模式
链模式：即在函数中返回this，使其他方法可以链式调用，简化代码
委托模式：前端用的最多的就是事件委托，若有多个子元素需要父元素代理，需要写很多遍$(父).on(event,子,function(){});一个技巧是在子元素上设置自定义属性data-event，仅在父元素上定义事件处理函数
节流模式：针对scroll,resize频繁触发的事件
数据访问对象：封装一个localStorage类，避免同域下数据相互影响问题
惰性模式：减少每次代码执行时的重复性分支判断，本质是通过对对象的重定义来屏蔽原对象中的分支判断

架构型设计模式(6种)

模块化开发的思想：将复杂的系统分解成高内聚低耦合的模块，每位工程师独立的开发自己的模块，从而使复杂的系统可控、可维护、可扩展。

常用的有MVP和MVVM模式
MVP模式：即modal-view-presenter ，提倡modal和view的解耦，所有的业务逻辑代码均由presenter完成。适用于简单页面
MVVM模式：vue，react这种框架就是MVVM的，比较适合中大型页面

观察者模式与发布订阅模式的区别

image.png