【前端开发】设计模式精讲

前言

这个是B站学习视频的笔记，视频链接：https://www.bilibili.com/video/BV1Ki4y177LN

更多关于前端设计模式的知识，请看《JavaScript设计模式》一书；

链接：https://pan.baidu.com/s/17YiAJu7drAK9b3BJEVRyZQ
提取码：3ecv
复制这段内容后打开百度网盘手机App，操作更方便哦

下面是软考中的设计模式汇总：

代理模式

在代理模式（Proxy Pattern）中，一个类代表另一个类的功能。这种类型的设计模式属于结构型模式。

真实对象 — 代理对象 — 用户

下面举例花店工作人员代理男同学给女同学送花：

// 代理模式
var Girl = function(name){
    this.name = name
}

var Boy = function(girl){
    this.girl = girl
    this.sendGift = function(gift){
        console.log(`hi, ${this.girl.name}, 送你一个礼物：${gift}`)
    }
}

var Proxy = function(girl){
    this.girl = girl
    this.sendGift = function(gift){
        (new Boy(this.girl)).sendGift(gift)
    }
}

var girl = new Girl('小芳')
var proxy = new Proxy(girl)
proxy.sendGift('999朵玫瑰花')

下面举例图片懒加载：

// 正常写法
window.onload = function(){
    var myImage = (function(){
        var imgNode = document.createElement('img')
        document.body.appendChild(imgNode)

        // 代理对象，先展示等待图片，接着复制拉取真实图片
        var img = new Image()
        // 代理对象加载完成后展示真实图片
        img.onload = function(){
            imgNode.src = this.src
        }
        return {
            setSrc: function(src){
                // 先展示等待图片
                imgNode.src = 'http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif'
                // 把真实图片给代理对象
                img.src = src;
            }
        }
    })();

    myImage.setSrc("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")
}

// 使用代理模式重构图片懒加载
window.onload = function(){
    // 真实对象
    var myImage = (function(){
        var imgNode = document.createElement('img')
        document.body.appendChild(imgNode)

        return {
            setSrc: function(src){
                imgNode.src = src
            }
        }
    })();


    // 代理对象
    var ProxyImage = (function(){
        var img = new Image()
        img.onload = function(){
            myImage.setSrc(this.src)
        }
        return {
            setSrc: function(src){
                myImage.setSrc('http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif')
                img.src = src
            }
        }
    })()


    // 调用
    ProxyImage.setSrc("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")
}

观察者模式

又称为发布-订阅模式。当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。观察者模式属于行为型模式。

var event = {
    list: [],
    // 订阅消息
    listen: function(key, fn){
        shopObj.list[key] = shopObj.list[key] || []
        // 往特定的商品列表中添加订阅
        shopObj.list[key].push(fn)
    },
    // 发布消息
    publish: function(key){
        var fns = this.list[key]
        // 这里注意，for的第一个分号前是初始化，第二个分号前是判断条件(true or false), 第三个是循环后下一次循环前的操作，可省略
        for(var i = 0, fn; fn = fns[i++];){
            fn.apply(this, arguments)
        }
    }
}

// 观察者对象初始化(浅拷贝)
var initEvent = function(obj){
    for(var i in event){
        obj[i] = event[i]
    }
}

// 发布者
var shopObj = {}
initEvent(shopObj)

// A添加订阅 huawei (brand:品牌, model:型号)
shopObj.listen('huawei', function(brand, model){
    console.log("您订阅的" + brand + "【" + model + "】已发布")
})
// B添加订阅 apple (brand:品牌, model:型号)
shopObj.listen('apple', function(brand, model){
    console.log("您订阅的" + brand + "【" + model + "】已发布")
})
// 商家发布消息
shopObj.publish("huawei", "P30")
shopObj.publish("apple", "iphone 11")

上面的被观察者就是shopObj.list里面的值了。

装饰器模式

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。

ES5写法和ES6写法

// 原生形式（缺点：耦合高）
class Circle {
    draw(){
        console.log("画一个圆")
    }
}

// 使用装饰器给圆绘制一个边框
class Decorator {
    constructor(circle) {
        this.circle = circle
    }

    draw(){
        this.circle.draw()  // 圆Circle的方法
        this.setBorder(this.circle)  // 装饰器的代码
    }

    setBorder(circle){
        console.log("绘制一个边框")
    }
}

var circle = new Circle();
var dec = new Decorator(circle);
dec.draw()



// 装饰器---注解形式（缺点：新一代语法标准, 主流浏览器还不支持，需要配置babel）
class Boy {
    @run
    speak(){
        console.log("我能说话")

function run(target, key, descriptor){
    // target: 是装饰对象，这里是Boy
    // key: 被装饰的方法名， 这里是speak
    // descriptor: 一些描述信息
    console.log("我也能跑步")
}

var boy = new Boy()
boy.speak()

应用 — 给方法添加日志

// 装饰器应用 -- 给方法添加日志
class Math {
    @log
    add(a, b){
        return a + b;
    }
}

function log(target, key, descriptor){
    // descriptor.value 这里对应被装饰的方法（注意和key不同，不是方法名，是方法的引用）
    var oldValue = descriptor.value
    // 重构add方法
    descriptor.value = function(){
        console.log(`调用 ${key}, 参数是：`, arguments)
        return oldValue.apply(target, arguments)
    }
    return descriptor;
}

var math = new Math()
math.add(1, 3)

扩展：根据上面的应用例子，给装饰器方法添加参数

class Math {
    @log(100)
    add(a, b) {
        return a + b;
    }
}

function log(num) {
    return funcion(target, key, descriptor) {
        var _num = num || 0;

        // descriptor.value 这里对应被装饰的方法（注意和key不同，不是方法名，是方法的引用）
        var oldValue = descriptor.value
        // 重构add方法
        descriptor.value = function(...arg) {
            // 改变原有参数值
            arg[0] += _num;
            arg[1] += _num;
            console.log(`调用 ${key}, 参数是：`, arguments)
            return oldValue.apply(target, arguments)
        }
        return descriptor;
    }
}

var math = new Math()
math.add(1, 3)

职责链模式

顾名思义，责任链模式（Chain of Responsibility Pattern）为请求创建了一个接收者对象的链。这种模式给予请求的类型，对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为型模式。

在这种模式中，通常每个接收者都包含对另一个接收者的引用。如果一个对象不能处理该请求，那么它会把相同的请求传给下一个接收者，依此类推。

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/e3d250c9.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！