js设计模式

1.工厂模式

function createPerson(name, age, job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            alert(this.name);
        };
        return o; 
}
    var person1 = createPerson("Nicholas", 29, "Software Engineer");
    var person2 = createPerson("Greg", 27, "Doctor");

2.单例模式

登录弹窗，类只有一个实例

var createLoginLayer = (function() {
  var div;
  return function() {
    if (!div) { //惰性单例模式 闭包函数创建一个变量 判断弹窗是否创建过
      div = document.createElement('div');
      div.innerHTML = '我是登录弹窗';
      div.style.display = 'none';
      document.body.appendChild('div');
    }
    
    return div;
  };
})();

惰性单例模式防止页面多次插入或删除dom节点，如上例子每次只需要点击的时候去判断是否创建过，防止不必要的dom开销

3.适配器模式

// 新增加的适配器
class Adaptee {
    constructor() {
        this.name = "我是适配器";
    }

    parse() {}
}


// 原来的旧代码
class OldApi{
    constructor(){
        this.name = '我是旧的接口'
        this.adaptee = new Adaptee()
        this.adaptee.parse()
    }
}

var oldApi = new OldApi()

4.装饰器模式

function decorator(target){
    target.type = '人类'
}

@decorator
class Animal{}

console.log(Animal.type)

5.代理模式

代理模式，是通过代理，访问原数据。没有什么包装和修改。

class Data{
    constructor(){
        this.name = 'lalala'
    }

    getName(){
        console.log(this.name)
    }
}

class ProxyData{
    constructor(data){
        this.data = data
    }

    getName(){
        this.data.getName()
    }
}

let data = new Data()
let proxyData = new ProxyData(data)


data.getName()
proxyData.getName()

5. 观察者模式

场景1：Vue的收集依赖、派发更新
「订阅」: Vue的响应式数据，在页面渲染时，触发getter收集watcher依赖。
「发布」:数据变化时，触发setter，Notify所有的watcher调用他们的update方法

场景2：浏览器事件机制
「订阅」: btn绑定了click事件，那个fn就被放到事件队列中
「发布」: 用户点击时，触发click事件。

场景3 : Promise.then
「订阅」: then调用时，把then的成功函数保存在一个变量中

「发布」: 当调用resolve时，状态变化，并且把保存的then的成功函数调用

场景4: Vue的生命周期钩子
「订阅」: 在option上写beforeCreate对应的函数

「发布」: 当组件初始化阶段，到了对应时机，vue帮你调用用户提供的函数

class EventEmitter {
    constructor() {
        this.eventMap = {};
    }

    on( type, fn ) {
        if ( !this.eventMap[type] ) {
            this.eventMap[type] = []
        } 
        this.eventMap[type].push(fn)
    }

    emit( type, ...params ) {
        this.eventMap[type].forEach(fn => {
            fn(...params);
        });
    }

    off( type, fn ) {
        let list = this.eventMap[type];
        let atIndex = list.indexOf(fn);
        
        if (atIndex !== -1) {
            list.splice(atIndex, 1);
        }
    }
}

最后编辑于：2019.10.12 11:49:45