JavaScript的设计模式

概述:

设计模式是一种固定的解决某个问题的一种方式，他是一个固定的模式（原理都是一样的），他不区分语言。常用的设计模式有23种，他分为三类（主要针对的是类和对象）.

设计模式的分类:

1.创建型模式，共五种：

工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

2.结构型模式，共七种：

适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

3.行为型模式，共十一种：

策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

设计模式有六大原则:

1.开闭原则

对扩展开放，对修改关闭。在程序需要进行拓展的时候，不能去修改原有的代码，实现一个热插拔的效果

2.里置换原则

任何基类可以出现的地方，子类一定可以出现。LSP 是继承复用的基石，只有当派生类可以替换掉基类，且软件单位的功能不受到影响时，基类才能真正被复用，而派生类也能够在基类的基础上增加新的行为。里氏代换原则是对开闭原则的补充。实现开闭原则的关键步骤就是抽象化，而基类与子类的继承关系就是抽象化的具体实现，所以里氏代换原则是对实现抽象化的具体步骤的规范。

3.单一原则

尽量使用合成/聚合的方式，而不是使用继承。

4.依赖倒置原则

这个原则是开闭原则的基础，具体内容：针对接口编程，依赖于抽象而不依赖于具体

5.接口隔离原则

使用多个隔离的接口，比使用单个接口要好。它还有另外一个意思是：降低类之间的耦合度。由此可见，其实设计模式就是从大型软件架构出发、便于升级和维护的软件设计思想，它强调降低依赖，降低耦合。

6.迪米特原则

一个实体应当尽量少地与其他实体之间发生相互作用，使得系统功能模块相对独立。

 这里讲一下前端比较重要的七种模式:

1.工厂模式:

工厂模式是根据对应的工厂方法生成对应的对象(生成相关对象)

 2.单例模式:

单例模式是要保证生成的对象实例只有一个

基础类

class Person{

                constructor(){

                }

            }

1-1: 通过闭包来实现单例模式

1-2:通过原型来实现单例模式:

 

1-3:通过静态属性来实现单例模式:

 1-4:通过全局属性来实现:

 3.装饰器模式:

装饰器模式是在不同影响原本类的基础上,进行功能的拓展

装饰模式的实现:

 4.组合模式:

组合模式是将多个相同的属性和方法组合到一块(将不同的方法组合在一块执行)

 5.适配器模式:

适配器模式是将旧打的内容进行新的适配,在原本的基础上做兼容处理

6.观察者模式 

观察者模式是最常用的模式,又被称为发布者-订阅模式

核心:  一个对应的发布者进行发布,对应有个订阅者,对应的内容发布,订阅者就会收到信息从而进行对应的处理

观察者模式的内容: 1.发布者 2.订阅者 3.处理函数

事件是一种观察者模式 (1.事件发布者 2.事件监听者 3.事件处理函数)        ,根据对应的事件监听机制来模拟观察者

        事件监听的过程:

1.事件发布(有对应的事件名)    on

2.事件的执行 (根据对应的事件名执行相关的处理函数) emit

3.事件的取消 (将对应的事件移除)  off

//基础类

class Oberver{

        constructor(){

        this.obj={}

}

}

 

 

 

 7.代理模式:

代理模式是在不改变原本类的基础上,对于对象进行功能的增强,代理模式代理出来的是对象

核心的关键词: 

        被代理的对象 (你)

        代理对象 (你的秘书)

        操作内容 (你的秘书代替你签字)

代理的实现: 

        在js中es7新增了一个proxy的类,这个类专门是用来做代理的所以我们需要掌握它的使用

proxy新建代理对象:

        let obj={

        name:'jack',

        age:18

}

1.通过proxy来新建代理对象

2.proxy的构造函数需要传入被代理对象 以及相关的处理对象

3.对应handler他是对应所有的 属性进行操作

4.get在获取属性的时候调用 它返回的结果就是你接收的结果

5.set对应设置属性的时候调用

6.核心:let proxy = new Proxy(被代理的对象, 处理函数)

 

总结: proxy的处理对象的四大属性

        1.get 访问属性的时候

        2.set 设置属性的时候

        3.defineProperty 定义属性的时候调用

        4.deleteProperty 删除属性的时候调用

proxy是一个es7新增的一个类 它返回的是一个对象

proxy里面传入被代理对于的处理对象

 处理对象包含4个方法 (set get defineProperty deleteProperty)

proxy里面实际操作是被代理对象(如果在里面操作代理对象会造成栈溢出)

代理对象和被代理对象不是一个对象 但是操作的内容是一个被代理的对象

proxy也是vue3的底层实现之一