JavaScript设计模式

设计模式是解决某个特定场景下对某种问题的解决方案

下面介绍学习几个常见的js设计模式

1、单例模式

单例模式：顾名思义就是一个类只能生成一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。

let CreatName=(function () {
        class Person {
            constructor(name) {
                this.name = name
            }
        }
        let instance = null
        return function (name) {
            instance = instance || new Person(name)
            return instance
        }
    })()
    const joy = CreatName("joy")
    const tony = CreatName("tony")
    console.log(joy===tony)

2.观察者模式

观察者模式，就是一对多的消息通知，分观察者和被观察者，被观察者发生变化，通知到所有观察者，两者是有关系的

    //观察者
    class Observer {
        constructor(name,fun) {
            this.name=name
            this.fun=fun
        }
    }
    //被观察者
    class SubObject {
        constructor() {
            this.observers=[]
            this.state=''
        }
        changeState(state){
            this.state =state
            this.observers.forEach(item=>item.fun(this.state))
        }
        addObserver(obj){
            this.observers=this.observers.filter(item=>item!=obj)
            this.observers.push(obj)
        }
        removeObserver(obj){
            this.observers=this.observers.filter(item=>item!=obj)
        }
    }
    const xz= new Observer("校长",(state)=>{console.log(state+"行为,"+"已经通知校长")})
    const bzr= new Observer("班主任",(state)=>{console.log(state+"行为,"+"已经被班主任发现")})

    const student = new SubObject()
    student.addObserver(xz)
    student.addObserver(bzr)
    student.changeState("学习")
    student.removeObserver(xz)
    student.changeState("玩手机")

 3.发布订阅模式

发布订阅模式，属于观察者模式，只需要一个类，某一行为触发，通知所有该行为的订阅者，发布者和订阅者没有必然关系

    class Observer {
        constructor() {
            this.message={}

        }
        changeState(type){
            if(!this.message[type]) return
            this.message[type].forEach(item=>item())
        }
        addObserver(type,fun){
            if(!this.message[type]){
                this.message[type]=[]
            }
            this.message[type].push(fun)
        }
        removeObserver(type,fun){
            if(!fun){
                return delete this.message[type]
            }
            if(!this.message[type]){
                return
            }
            this.message[type]=this.message[type].filter(item=>!fun)
        }
    }
    function hander1() {
        console.log("hander1")
    }
    function hander2() {
        console.log("hander2")
    }
    const person1= new Observer()
    person1.addObserver('饭熟了',hander1)
    person1.addObserver('火灭了',hander2)
    person1.changeState("饭熟了")
    person1.removeObserver("火灭了")
    console.log(person1)

 

4、 策略模式

策略模式：定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。

一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类（可变），策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context（不变），Context接受客户的请求，随后将请求委托给某一个策略类。要做到这一点，说明Context中要维持对某个策略对象的引用。

通俗讲就是一个问题有多种解决方法，可以灵活调用，方法可以增加、删除

const calcPrice=(function () {
        const sale={
            "100-10":(price=>price-10),
            "100-20":(price=>price-20)
        }
        function calcPrice(price,type) {
            if(!sale[type]){
                return "没有该折扣"
            }
            return sale[type](price)
        }
        calcPrice.addPrice=function (type,fun) {
            if(sale[type]) return "该折扣已经存在"
            sale[type]=fun
        }
        calcPrice.removePrice=function (type) {
            delete sale[type]
        }
        return calcPrice
    })()
    const res=calcPrice(200,'100-10')
    calcPrice.addPrice('200_100',(price)=>price-100)
    console.log(calcPrice(200,'200_100'))
    console.log(res)

 

 未完待续