JS的几种简单设计模式

一、单例模式

我们都知道一个构造函数可以使用 new 关键字来创造出若干的实例。并且每个实例都是不相同的。都是不同的地址,比较两个生成的实例时比较的是存储地址，因此每个实例都有不同的存储空间，两者比较值为false。

        function Person(){
            this.name='小明'
        }
        var p1=new Person()
        var p2=new Person()
        console.log(p1===p2)//false

单例模式介绍

使用构造函数实例化的时候，不管实例化多少回，都实例化出同一个对象

• 一个构造函数一生只能 new 出一个对象
• 当我们使用构造函数，每一次 new 出来的对象 属性/功能/方法 完全一样 的时候，我们把他设计成单例模式

  	//核心代码
	  	
	  	//一个构造函数
	   function Person() {
            this.name = 'Jack'
        }
		//全局变量  instance
        var instance = null

        function singleton() {
            if (instance === null) {
                instance = new Person()
            }
            return instance
        }
		
		//这是singleton函数第一次调用，这时全局变量instance=null
		//因此，instance=new Person()
		//全局变量instance的值是Person构造函数的一个实例（将其命名为 实例 001）
		//p1 为 实例001
        var p1=new singleton()
		
		//这是singleton函数第二次调用，这时全局变量instance 为 实例001
		//instance的值不为空 ，因此直接返回 全局变量instance原来的值（实例001）
		//p2 为 实例001
        var p2=new singleton()
		
		//p1 p2   的值都为实例001 得到的都是同一个对象 因此值为true 
        console.log(p1===p2)//true
		
		//之后不管再实例化多少回，过程都与第二次调用singleton一致

单例模式的简单应用场景

• 网站的弹出层alert()或者右下角的广告页面
• 一个网站不可能只弹出一次这个界面，不能每次弹出就创建一个
• 每次弹出的都是之前创造好的，只是内容发生变化
• 有一个停车场的空位是100个，当这个空位发生变化的时候就进行刷新 

注意
      var p1 = new singleton()这里的new关键字并不是实例一个对象，因为p1就是singleton函数的返回值instance。构造函数如果返回一个复杂数据类型，那么最后得到的值就是那个复杂数据。这里的实例是构造函数Person的实例。用new关键字只是表示，我们每一次都实例了一个一模一样的对象。
 

二、组合模式

组合模式介绍

•  举一个简单的例子，就像家里每个电器都有单独的开关，而组合模式就是设置一个总开关，这个开关可以控制家中所有电器的开关,这就是组合模式。

实现思想

• 先定义控制不同电器的开关，也就是一个个构造函数,每一个构造函数都有一个启动方法
• 每一个构造函数的实例就是一个个电器开关
• 再定义一个总开关，一个构造函数，有一个方法可以启动所有构造函数的,
• 这时，需要一个承载所有构造函数实例的数组
• 总开关构造函数需要一个方法, 向数组里面添加内容
• 总开关构造函数需要一个方法, 能把数组里面的所有内容启动了
   

组合模式代码

 // 一个构造函数的启动方式  控制玩的开关
    class Play {
      constructor () {}

      // 这个构造函数的启动方法
      init () {
        console.log('开始玩游戏')
        this.a()
        this.b()
        this.c()
      }

      a () {}

      b () {}

      c () {}
    }

    // 第二个构造函数  控制吃的开关
    class Eat {
      constructor () {}

      init () {
        console.log('去吃饭')
      }
    }
	//第三个构造函数  控制睡觉的开关
    class Sleep {
      constructor () {}

      init () {
        console.log('去睡觉')
      }
    }


    // 组合模式的代码   总开关
    class Compose {
      constructor () {
        // 用来承载每一个实例的数组
        this.composeArr = []
      }

      // 向数组里面添加内容
      add (instance) {
        this.composeArr.push(instance)
      }

      // 把数组里面的每一个内容调用了
      init () {
        console.log('总开关启动了')
        this.composeArr.forEach(item => item.init())
      }
    }

    // c 就是一个总开关
    var c = new Compose()
    // 每一次执行 add 方法就是向总开关上添加内容   使得总开关 可以控制 其他开关
    c.add(new Play())
    c.add(new Eat())
    c.add(new Sleep())

    // 只要我的总开关一启动
    // 里面的每一个构造函数就同时都启动了
    c.init()
    console.log(c)

 

组合模式的简单应用场景

• 一个页面上有许多轮播图，当我切换其他标签页面时，这个页面上的轮播图还在运行，定时器没有停止
• 设置离开这个页面时，定时器停止，轮播图停止运动
• 这时就可以利用组合模式，设置一个总开关，控制所有轮播图的停止与运动。

三、观察者模式

观察者模式介绍

• 观察者观察着被观察者只要被观察者数据发生变化，观察者就要做一些事情
• 举个生动的例子，学生就是被观察者，老师就是观察者，只要学生上课状态不好，老师就会请家长。

观察者模式介绍实现思想

• 学生刚开始需要一个认真学习的状态
• 当学生认真学习的状态改变，在上课吃辣条时
• 老师观察到这个变化，就会请家长
  • 学生需要一个状态改变的方法，一个添加观察者老师的方法，还要有一个通知观察者自己状态改变的方法，并且再状态改变后立即让观察者老师 叫家长。

观察者模式代码

 // 观察者  模式
        // => 让 观察者 看着 被观察者, 只要数据改变了
        // => 就让 观察者 做一些事情
        // observers  观察者



        // 被观察者
        class student {
            constructor(name) {
                this.name = name
                //最开始的状态
                this.state='学习'

                // 数组 中放入观察者  一旦被观察者状态发生改变  就让 观察者 做一些事情
                this.observers=[]
            }

            // 改变状态
            setState(state){
                this.state=state
                //只要状态发生变化 通知观察者  数据改变了
                this.noticy()
             
            }

            // 获取状态
            getState(){
                return this.state
            }

            // 添加  观察者
            attach(observer){
                this.observers.push(observer)
            } 

            // 通知  观察者 => 被观察者  状态改变了
            noticy(){
                this.observers.forEach(item=>item.jiaojiazhang(this.name,this.state))
            }

        }


        // 观察者
        class teacher{
            constructor(name){
                this.name=name
            }

            jiaojiazhang(name,state){
                console.log(`我是  ${this.name}  因为  ${name}  在  ${state},我要叫家长 `)
            }
        }



        // 被观察者
        let s=new student('小明')
        console.log(s)//student {name: "小明", state: "学习", observers: Array(0)}


        // 添加  观察者
        let ob1=new teacher('班主任')
        let ob2=new teacher('教导主任')

        console.log(ob1)
        console.log(ob2)

        s.attach(ob1)
        s.attach(ob2)


        //先获取最开始的状态
        console.log(s.getState())
		// 状态改变    改变后观察者 直接执行方法
        s.setState('上课吃辣条')
        //状态改变后的状态
        console.log(s.getState())

 

参考链接https://blog.csdn.net/k464746/article/details/104477111