JavaScript中常见的设计模式

什么是设计模式?

就是一个房间里放东西,很乱,很难找到你想要的东西,但是做一些箱子放里面,方便你去放东西与寻找,
我们吧做箱子包放入房间的行为叫做设计模式。

单列模式

解决痛点 : 同一个构造函数,生成同一个实例化对象 防止重复实例化。
原理:判断这个构造函数是否,使用用过
如果使用过,返回之前的对象
如果没有使用过,就执行构造函数,生成实例化对象
解决,重复创建对象的问题

// Utils 中 存储的是 立即执行函数的 执行结果
 // 也就是 return 的函数
const Utils = ( function (){
            function CreateObj(){}
            let res = null;
            return function(){
                if(res === null){
                    res = new CreateObj();
                }
                return res;
            }
        } )()

        const a = Utils();
        const b = Utils();
        
        console.log(a);
        console.log(b);
        console.log(a === b);
         // 定义了变量和构造函数,为了防止全局变量污染
        // 将变量和构造函数,都定义在函数中,作为局部作用域变量保护起来

组合模式

基本原理:通过一个遥控器控制所有入口函数的执行

基本代码

// 构造函数A
        // 通过入口函数可以控制构造函数中所有方法的执行
        class A{
            constructor(){}
            // 入口函数
            init(){
                this.a1();
                this.a2();
                this.a3();
                this.a4();
            }
            // 构造函数方法
            a1(){}
            a2(){}
            a3(){}
            a4(){}
        }
        // 构造函数B
        // 通过入口函数可以控制构造函数中所有方法的执行
        class B{
            constructor(){}
            // 入口函数
            init(){
                this.b1();
                this.b2();
            }
            // 构造函数方法
            b1(){}
            b2(){}
        }
        // 构造函数c
        // 通过入口函数可以控制构造函数中所有方法的执行
        class C{
            constructor(){}
            // 入口函数
            init(){
                this.c1();
                this.c2();
                this.c3();
            }
            // 构造函数方法
            c1(){}
            c2(){}
            c3(){}
        }
        // 有三个构造函数,构造函数中,有对应的入口函数函数
        // 普通方法
        const a = new A();
        const b = new B();
        const c = new C();

        // 调用实例化对象中的入口函数
        a.init();
        b.init();
        c.init();
        // 所谓的组合模式
        // 通过一个'遥控器' , 同时控制 a.init();b.init();c.init();
        // 乃至所有的 init() 入口函数

发布观察者模式

又称订阅发布,消息模式

基本原理
// 要实现观察者模式 , 需要5个部分的操作
// 1,有一个主体对象
// 2,有一个属性(消息盒子),是存储事件
// 3,有一个方法(on方法),向属性中写入事件
// 4,有一个方法(emit方法),执行属性中写入的事件
// 5,有一个方法(off方法),删除属性中写入事件

// 观察者模式构造函数
        class Observer{
            constructor(){
                // 定义属性,来存储需要执行的事件
                // 这个属性也称为消息盒子
                // 一般是数组形式
                this.message = [];
            }
            // 事件1:on()方法,向消息盒子中,添加事件
            on();
            // 事件2:emit()方法,执行消息盒子中存储的事件
            emit();
            // 事件3:off()方法,删除消息盒子中存储的事件
            off();
        }
        // 通过 构造函数 生成实例化对象
        const obj = new Observer();

以上是基本格式,可以根据需求来写里面的内容;

先介绍这么多,以后会有补充。

发布了2 篇原创文章 · 获赞 12 · 访问量 66

猜你喜欢

转载自blog.csdn.net/daidaidaiqifei/article/details/104592559