前端常用设计模式

工厂模式

工厂模式就是用来批量生产对象的

js代码：

        class People{ //工厂
            constructor(name,age) {//原材料
                this.name = name
                this.age = age
                this.init()
            }
            init(){//进行加工
                console.log(this.name,this.age)
            }
        }
        let People1 = new People('张三',20) //创建第一个实例
        let People2 = new People('李四',22) //创建第二个实例
        console.log(People1.constructor === People2.constructor)//true 都来自一个工厂

单例模式

只允许存在一个实例

js代码：

        class People {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
        }
        let danli = (()=>{//使用闭包实现单例
            let obj = new People('张三',20)
            return ()=>{
                return obj
            }
        })()
        let People1 = danli() //创建实例1
        let People2 = danli() //创建实例2
        console.log(People1) //People {name: "张三", age: 20}
        console.log(People2) //People {name: "张三", age: 20}
        console.log(People1.constructor === People2.constructor) //true 

观察者模式

又称发布订阅者模式，案例 ---- 事件监听，一个元素绑定多个同类型事件，元素是被观察者（发布者），而绑定的事件就是观察者（订阅者），当被观察者状态发生改变，被观察者随之改变

js代码：

        //这里document就是被观察者（发布者）
        document.addEventListener('click',()=>{ //观察者（订阅者）
            console.log(1)
        })
        document.addEventListener('click',()=>{ //观察者（订阅者）
            console.log(1)
        })
        document.addEventListener('click',()=>{ //观察者（订阅者）
            console.log(1)
        })
        document.addEventListener('click',()=>{ //观察者（订阅者）
            console.log(1)
        })
        //当被观察者状态发生改变时，观察者状态也随之改变

策略模式

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换，从而避免使用很多if语句

比如公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍（摘自网络案例）

js代码：

        let obj = { //封装算法
            a:(pic)=>{
                return pic*4
            },
            b:(pic)=>{
                return pic*3
            },
            c:(pic)=>{
                return pic*2
            }
        }
        let obj1 = (o,pic)=>{
            return obj[o](pic)
        }
        console.log(obj1('b',3000)) //9000
        console.log(obj1('a',5000)) //20000