JS设计模式探索

JS设计模式探索

[[toc]]

单例模式

var singleton = {
 name: 'hzf',
 age: 24,
 walk: function(){
     console.log(this.age); //24
 },
 eat: function(){
     //todo
 }
}

不足之处:
- (1)没有什么封装性，所有的属性方法都是暴露的。
- (2)全局变量很容易造成命名空间污染。
- (3)对象一开始变创建，万一我们用不上就浪费了。

var person = function(){
     // 这里声明私有变量和方法；
     const privateVariable = '私有的外面获取不到';
     
     function showPrivate(){
         console.log(privateVariable);
     }
     
     //公有的变量和方法(可以访问私有变量和方法);
     return {
         publicMethod: function(){
             showPrivate();
         },
         publicVar: '共有的外面能直接获取'
     }
}
const  single = person();

single.publicMethod(); // '私有的外面获取不到'
console.log(single.publicVar); // '共有的外面能直接获取'

发布订阅模式+观察者模式

如下图所示：

观察者模式

观察者和被观察者一般是直接联系的，相互知道对方的存在。

观察者一般是同步的，被观察者一旦有变化，观察者会立即发生反应

Subject - 被观察者，发布者;

Observer - 观察者，订阅者；

// 被观察者
class Subject {
  constructor() {
    this. observers = []; // 观察者列表
  }
  // 添加订阅者
  add(observer) {
    this.observers.push(observer);
  }
  // 删除...
  remove(observer) {
    let idx = this.observers.findIndex(item => item === observer);
    idx > -1 && this.observers.splice(idx, 1);
  }
  // 通知  全部执行
  notify(boss) {
    for(let o of this.observers) {
      o.update(boss);
    }
  }
}
 
// 观察者
class Observer {
  constructor(name) {
    this.name = name;
  }
 
  // 目标对象更新时触发的回调，即收到更新通知后的回调
  update(boss) {
    console.log(`${boss}通知我职位了，我是：${this.name}`);
  }
}
 
// 实例化目标者
let subject = new Subject();
 
// 实例化两个观察者
let obs1 = new Observer('高级前端开发工程师');
let obs2 = new Observer('初级后端开发工程师');
 
// 向目标者添加观察者
subject.add(obs1);
subject.add(obs2);

//通知
subject.notify('HR');
subject.notify('CTO');

发布订阅模式

发布者和订阅者是解耦的，他们是通过一个介质（往往是消息队列）执行代码

发布订阅模式由于是消息队列代理的存在，往往是异步的

代码实现

// 控制中心
let pubSub = {
  list: {},
 
  // 订阅
  subscribe: function(key, fn) {
    if (!this.list[key]) this.list[key] = [];
    //可能是多个
    this.list[key].push(fn);
  },
 
  //取消订阅
  unsubscribe: function(key, fn) {
    let fnList = this.list[key];
 
    if (!fnList) return false;
 
    if (!fn) { // 不传入指定的方法，清空所用 key 下的订阅
      fnList && (fnList.length = 0);
    } else {
     const curFn =  fnList.filter((item, index) => {
            return  item !== fn 
      });
     this.list[key]=curFn
    }
  },
 
  // 发布
  publish: function(key, ...args) {
    for (let fn of this.list[key]) fn.call(this, ...args);
  }
}
 
let sub1 = function (time) {
  console.log(`上班了：${time}`);
}
let sub2 = function (time) {
    console.log(`下班了：${time}`);
}
// 订阅
pubSub.subscribe('onwork',sub1 )
pubSub.subscribe('onwork', sub2 )
 
// 发布
pubSub.publish('onwork', '18:00:00');

// 取消订阅
pubSub.unsubscribe('onwork');

DOM 的事件监听是”发布订阅模式”

const  hzf = document.getElementById('#hzf');
 
// 监听回调函数（指定事件）
function notifyClick() {
    console.log('我被点击了');
}
 
// 添加事件监听
hzf.addEventListener('click', notifyClick);


// 用户触发点击, 事件中心派发指定事件
 
// 取消事件监听
loginBtn.removeEventListener('click', notifyClick);