JS设计模式探索

# 单例模式

var singleton = {
 name: 'hzf',
 age: 24,
 walk: function(){
     console.log(this.age); //24
 },
 eat: function(){
     //todo
 }
}
1
2
3
4
5
6
7
8
9
10
  • 不足之处:
    • (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); // '共有的外面能直接获取'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

如下图所示:

# 观察者模式

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

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

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');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 发布订阅模式

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

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

代码实现

// 控制中心
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');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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

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


// 用户触发点击, 事件中心派发指定事件
 
// 取消事件监听
loginBtn.removeEventListener('click', notifyClick);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 两种模式的关联和区别

发布订阅模式更灵活,是进阶版的观察者模式,指定对应分发。

观察者模式维护单一事件对应多个依赖该事件的对象关系;
发布订阅维护多个事件(主题)及依赖各事件(主题)的对象之间的关系;

观察者模式是目标对象直接触发通知(全部通知),观察对象被迫接收通知。
发布订阅模式多了个中间层(事件中心),由其去管理通知广播(只通知订阅对应事件的对象);

观察者模式对象间依赖关系较强,发布订阅模式中对象之间实现真正的解耦。

# 参考文档

观察者模式 vs 发布订阅模式 (opens new window)

观察者模式与发布订阅模式 (opens new window)

观察者模式 (opens new window)

# 原型模式

# 未完待续.......