设计模式分类

职责链模式

使多个对象都有机会处理请求，从而避免了请求的发送者与多个接收者直接的耦合关系，将这些接收者链接成一条链，顺着这条链传递该请求，直到找到能处理该请求的对象。

在责任链模式中，每个处理对象都包含对下一个处理对象的引用。当一个对象接收到请求后，它会根据条件决定是自己处理这个请求，还是将其传递给链中的下一个对象。这样，请求在链中传递，直到被处理或者整个链都无法处理该请求。

这种模式常用于处理不同种类的请求或在不同条件下需要不同处理的场景，例如不同级别的日志记录器、不同类型的事件处理等。责任链模式可以有效地减少对象间的耦合，并提高系统的灵活性和可扩展性

优缺点

罗天旭大约 3 分钟

代理模式

定义

代理模式（Proxy Pattern）又称委托模式，它为目标对象创造了一个代理对象，以控制对目标对象的访问。

代理模式的关键是，当客户不⽅便直接访问⼀个对象或者不满⾜需要时，提供⼀个替身对象来控制这个对象的访问，客户实际上访问的是替身对象。

这种结构可以实现在调用目标对象前和调用后进行一些预操作和后操作，从而实现新的功能或者扩展目标的功能。

罗天旭大约 4 分钟

观察者模式

定义

观察者模式（Observer Pattern）定义了一种一对多的关系，当⼀个对象的状态发⽣改变时，所有依赖于它的对象都将得到通知，使得它们能够自动更新自己。

在前端开发中，观察者模式是一种常用的设计模式，用于建立对象之间的一对多依赖关系。在观察者模式中，有两种主要角色：观察者（Observer）和被观察者（Subject）。

观察者（Observer）：观察者是订阅了被观察者的状态变化，并在状态变化时进行相应操作的对象。在前端开发中，观察者通常是一些 UI 组件或模块，它们会监听某个数据或状态的变化。

被观察者（Subject）：被观察者是维护一组观察者对象列表，并提供注册、移除和通知观察者的方法。当被观察者的状态发生改变时，会通知所有订阅者进行相应的更新操作。

罗天旭大约 3 分钟

发布订阅模式

定义

发布-订阅是⼀种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。⽽是将发布的消息分为不同的类别，⽆需了解哪些订阅者（如果有的话）,同样的，订阅者可以表达对⼀个或多个类别的兴趣，只接收感兴趣的消息，⽆需了解哪些发布者存在。

优缺点

优点

解耦：发布-订阅模式可以使发布者和订阅者之间解耦，它们互不依赖于彼此的具体实现，从而降低组件之间的耦合度。
异步：发布-订阅模式支持异步操作，发布者可以在任何时间发布事件，订阅者也可以在适当的时间订阅事件。这种异步机制非常灵活，适用于需要非阻塞操作的场景。
动态：发布-订阅模式支持动态添加新的订阅者和取消订阅者，使得系统更加灵活和可扩展。
可复用性：通过发布-订阅模式可以实现事件的广播，可以让多个订阅者同时接收相同的事件消息，提高了代码的可复用性。

罗天旭大约 2 分钟

模块模式

模块话模式最初被定义为在传统软件工程中为类提供私有和公共封装的一种方法
能够使一个单独的对象拥有公共/私有的方法和变量，从而屏蔽来自全局作用域的特殊部分。这可以减少我们的函数名与在页面中其他脚本区域内定义的函数名冲突的可能性

const obj = (function () {
    var count = 0
    return {
        increse() {
            return ++count
        },
        decrese() {
            return --count
        },
    }
})()

罗天旭小于 1 分钟

桥接模式

桥接模式：将抽象部分与它的实现部分分离，使它们都可以独立地变化使用场景：一个类存在两个或多个独立变化的维度，且这两个或多个维度都需要进行扩展

优点：把抽象与实现隔离开，有助于独立地管理各组成部分

缺点：每使用一个桥接元素都要增加一次函数调用，这对应用程序的性能会有一些负面影响（提高了系统的复杂程度）

const Aniations = {
    bounce: {
        show(ele) {
            console.log(ele, '弹跳显示')
        },
        hide(ele) {
            console.log(ele, '弹跳隐藏')
        },
    },
    slide: {
        show(ele) {
            console.log(ele, '滑动显示')
        },
        hide(ele) {
            console.log(ele, '滑动隐藏')
        },
    },
    rotate: {
        show(ele) {
            console.log(ele, '旋转显示')
        },
        hide(ele) {
            console.log(ele, '旋转隐藏')
        },
    },
}

function Toast(ele, animation) {
    this.ele = ele
    this.animation = animation
}

Toast.prototype.show = function () {
    this.animation.show(this.ele)
}

Toast.prototype.hide = function () {
    this.animation.hide(this.ele)
}

let taost1 = new Toast('div1', Aniations.bounce)
taost1.show()

罗天旭小于 1 分钟

组合模式

const Folder = function (folder) {
    this.folder = folder
    this.list = []
}

Folder.prototype.add = function (res) {
    this.list.push(res)
}

Folder.prototype.scan = function () {
    console.log('扫描文件夹', this.folder)
    for (let i = 0; i < this.list.length; i++) {
        this.list[i].scan()
    }
}

const File = function (file) {
    this.file = file
}
File.prototype.scan = function () {
    console.log('开始扫描文件', this.file)
}

let rootFolder = new Folder('root')
let htmlFolder = new Folder('html')
let cssFolder = new Folder('css')
let jsFolder = new Folder('js')

let html4 = new File('html4')
let html5 = new File('html5')
let css2 = new File('css2')
let css3 = new File('css3')
let es5 = new File('es5')
let es6 = new File('es6')

rootFolder.add(htmlFolder)
rootFolder.add(cssFolder)
rootFolder.add(jsFolder)

htmlFolder.add(html4)
htmlFolder.add(html5)
cssFolder.add(css2)
cssFolder.add(css3)
jsFolder.add(es5)
jsFolder.add(es6)

rootFolder.scan()

罗天旭小于 1 分钟

组合模式

有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。需要一种松耦合的方式来设计程序，使得发送者和接收者能够消除彼此之间的耦合关系
命令模式由三种角色构成：
- 发布者invoker(发出命令，调用命令对象，不知道如何执行与谁执行)
- 接收者receiver(提供对应接口处理请求，不知道谁发起请求)
- 命令对象command(接收命令，调用接收者对应接口处理发布者的请求)

罗天旭小于 1 分钟

模板方法模式

模板方法模式由两部分组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法逻辑，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。

var Container = function (params = {}) {
    var F = function () {}

    F.prototype.init = async function () {
        var list = await this.getData()
        this.render(list)
    }

    F.prototype.getData =
        params.getData ||
        function () {
            throw new Error('必须传入getData')
        }

    F.prototype.render = function (list) {
        console.log('render', list)
    }

    return F
}

var Myclass = Container({
    getData() {
        console.log('获取nowplaying')
        return [1, 2, 3]
    },
})

new Myclass().init()

罗天旭小于 1 分钟

模板方法模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。

为遍历不同数据结构的“集合”提供统一的接口
能遍历访问“集合数据中的项”，不关心项的数据结构

var kerwinEach = function (arr, callback) {
    for (let i = 0; i < arr.length; i++) {
        callback(i, arr[i])
    }
}

kerwinEach([11, 22, 33, 44], function (key, value) {
    var oli = document.createElement('li')
    oli.innerHTML = value
    list.appendChild(oli)
})

罗天旭小于 1 分钟