js设计模式学习之路

1.工厂模式

class Product {
      constructor(name){
        this.productName = name
      }
      showName(){
        console.log("product name is ",this.productName)
      }
    }

    class Creator {
      create(name){
        return new Product(name)
      }
    }

    let creator = new Creator()
    let product = creator.create("egg")
    product.showName()  //product name is egg

2.单例模式

  class SingleObject {
      login(username, password) {
        console.log(`账号=${username},密码=${[password]}`)
      }
    }
    SingleObject.getInstance = (function () {
      let instance
      return function () {
        if (!instance) {
          instance = new SingleObject()
        }
        return instance
      }
    })()
    let obj1 = SingleObject.getInstance()
    obj1.login("liuning", "123")
    let obj2 = SingleObject.getInstance()
    obj2.login("liuning1", "1234")
    console.log("ob1 === obj2 ",obj1===obj2)  //obj1===obj2  true
    应用场景：登录框，购物车，vuex里面的state

3.适配器模式

 class Apdatee {
      specifyRequest(){
        return "德国牌插座"
      }
    }

    class Target {
      constructor(){
        this.apdatee = new Apdatee()
      }

      request(){
        let info = this.apdatee.specifyRequest()
        return `${info}-转-中国标准插头`
      }
    }

    let target = new Target()
    let info = target.request()
    console.log(info)
    
    应用场景:
    1.封装旧接口 e.g:
    自己封装的ajax
    ajax({
        url:"/apixxx",
        type:"Post"，
        dataType:"json"
        data:{}
    }).done(function(){})
    
    //老项目用的jq的 $.ajax({})，全部改成我们自己封装的可能会出问题
    
    使用适配器模式修改
    var $ = {
        ajax:function(options){
            return ajax(options)
        }
    }
    2.vue里面的computed
    data {msg："hello"},需求是要倒着写msg的“hello”,可以在computed里面写一个字符串倒置的计算属性

4.发布&订阅者模式

        class Subject {
            constructor() {
                this.state = 0
                this.observers = []
            }

            getState() {
                return this.state
            }

            setState(state) {
                this.state = state
                this.notifyAllObserves()
            }
            notifyAllObserves() {
                this.observers.forEach(observer => {
                    observer.update()
                })
            }
            attach(observe) {
                this.observers.push(observe)
            }
        }
        //观察者
        class Observer {
            constructor(name, subject) {
                this.name = name
                this.subject = subject
                this.subject.attach(this)
            }
            update() {
                console.log(`名字为${this.name},状态为${this.subject.getState()}`)
            }
        }

        let s = new Subject()
        let o1 = new Observer("o1", s)
        let o2 = new Observer("o2", s)
        let o3 = new Observer("o3", s)
        s.setState(1)  //名字为o1,状态为1   名字为o2,状态为1    名字为o3,状态为1
        
        例子：
        1.网页事件绑定
        $("#btn").click(function(){
            console.log("btn1")
        })