字节青训营第四天-前端设计模式

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

在讲师大佬的引导下，让我了解到了一些关于设计模式中的只是。老师的代码中使用ts来给我们举例子说明，其中还是有一些没听明白，于是在课后进行了部分内容的学习。

什么是设计模式

软件设计中常见问题的解决方案模型

由历史经验总结
与特定语言无关

设计模式类型

创建型 - 如何创建一个对象
结构型 - 如何灵活的将对象组装成较大的结构
行为型 - 负责对象间的高效通信和职责划分

浏览器中的设计模式

单例模式

定义：全局唯一访问对象。通俗易懂一点就是如果一个实例不存在，则创建该实例，如果存在，则返回该实例的引用。

应用场景：缓存，全局状态管理等

当我们使用new 去创建一个实例的时候，每一个实例都是单独独立的，在内存中重新开辟了空间。当我们判定他们是否相等时返回的是false

const tmp1 = new Object();
const tmp2 = new Object();
console.log(tmp1 == tmp2);		// false

而单例模式的要点就在于 new 出来的实例是相等的，那么又回到定义：如果一个实例不存在，则创建该实例，如果存在，则返回该实例的引用。

var singleton = function() {
    this.instance = null;
    return {
        speed: 10,
        getThis: () => {
            // handler
        }
    }
}

singleton.getInstance = function() {
    if(!this.instance) {
        this.instance = new singleton();
    }
    return this.instance;
}

const exp1 = singleton.getInstance();
const exp2 = singleton.getInstance();
console.log(exp1 == exp2);			// true

发布订阅模式

定义：一种订阅机制，可以在被订阅对象发生变化时通知订阅者

应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等

JavaScript中的设计模式

原型模式

定义：复制已有对象来创建新的对象

应用场景：JS中对象创建的基本模式

代理模式

定义：可以自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理

应用场景：监控，代理工具，前端框架实现等等

迭代器模式

定义：在不暴露数据类型的情况下访问集合中数据

应用场景：数据结构中有多种数据类型，列表，树等，提供通用操作接口

前端框架中的设计模式

代理模式

定义：代理模式给某一个对象提供一个代理对象，并由代理对象控制对原对象的引用。

应用场景：数据动态渲染

组合模式

定义：可多个对象组合使用，也可单个对象独立使用

应用场景：DOM, 前端组件，文件目录，部门

总结：以上是在前端开发中常见的设计模式，具体题场景使用适合的模式。抽象出模式相对简单，但是应用到场景非常困难。同时随着编程语言的发展，多编程范式会带来更多可能性。优秀的项目从不断地学习中展出来。

在这里只是做了单例模式例举，其它设计模式还不是很了解，跟随讲师大佬学习也只是粗泛的了解了一点，并没有多深入。这就是我第四天的学习。

前端设计模式 | 青训营笔记