js设计模式2

1.单例模式

① 系统中被唯一使用
② 一个类只有一个实例

例子： 登陆框  购物车  juery  vuex/store
// 单例模式(登陆)
class singleObjec{
     login() {
        console.log('login...')
     }
  }
// 静态资源立即执行方法，只执行一次，初始化闭包变量 instance
singleObjec.getSingObject = (function(){
  let instance
  return function() {
    if(instance) {
       instance = new singleObjec()
    }
    return instance
  }
})()

let login1 = singleObjec.getSingObject();
login1.login();

let login2 = singleObjec.getSingObject();
login2.login();
console.log(login1 === login2)  //true  单例模式，每次初始化实例相同，不会每次重新初始化新实例

let login3 =  new singleObjec();
login3.login();
console.log(login1 === login3)  //false  无法o控制实例生成，下面会讲解

// 例子： 如防止jquery 引入多次 ，利用单例原理，实现引入多次，只实例化 一个
if(window.jquery !== null) {
   return window.jquery
} else {
    // 初始化....
}

// vuex 中store是单例模式

2.工厂模式介绍

  ① 将new操作单独封装
  ② 遇到new时，就要考虑是否使用工厂模式
    // product 是 creator的子类
    class product {
        constructor(name) {
            this.name = name
        }
        int() {
            console.log('init')
        }
        fun1() {
            console.log('fun1')
        }
        fun2() {
            console.log('fun2')
        }
    }

    class creator {
        create(name) {
            return new product(name)
        }
    }

    const create1 = new creator();
    const p = create1.create('汉堡包');
    p.int();
    p.fun1();

3.适配器模式

    中间层做转换
    class adaptee {
        spelicRequest() {
            return `德国标准转化头`
        }
    }

    class Target {
        constructor() {
            this.adaptee = new adaptee()
        }
        request() {
            let info = this.adaptee.spelicRequest();
            return `${info} -> 正在转换 -> 中国标准头`
        }
    }
    
适配器例子：
  ① ajax 新旧场景不兼容，将老调用ajax({}} 转为 $.ajax()
    ajax({
            type: 'post',
            url: '/getInfo',
            data: {
                id: '12'
            },
        })
    // 新场景 $.ajax(...)，利用适配器模式 实现转换
    var $ = {
        ajax: function(options) {
            return ajax(options)
        }
    }
    
 ② vue中的计算属性 computer，通过computer中间件修改数据并返回新数据。
 
    使用原则：
    将旧接口和使用者进行分离，中间加适配器进行分离
    符合开放封闭原则

4. 装饰器模式 为对象添加新功能 不改变其原有的结构和功能