//今天复习js设计模式里的两种:单例/观察者
//据说js有26种设计模式,全学会的人可以晋级前端高级工程师行列。
一、设计模式的概念
针对 特定问题, 给出的简洁而优化的处理方案。
二、设计模式分析
- 单例模式(单子模式/单体模式)
该模式常用于 整个系统为了协调整体的行为,只需要一个全局对象(页面弹窗)
//首先构建父类
function Person() {
this.name = 'Jack'
}
//其次新建变量用来判断该对象是否已经被创建过
var instance = null
//在构建函数内判断instance
function singleton() {
if (instance === null) {
instance = new Person()//不存在就实例化对象
}
return instance//存在就返回instance
}
-
观察者模式(发布/订阅模式)
//观察者模式需要两个参与者 即 发布者和订阅者发布者需要实现的的功能 :
– 添加订阅者
– 删除订阅者
– 设置消息
– 发布消息(消息是一个私有属性,订阅者只能被动等待接收)订阅者需要实现的功能 :
–被动接受消息
// 发布者
class Publisher{
constructor(){
// 订阅者名单
this.observers = [];
// 准备发布的消息,私有属性,外部不能直接访问
this.info = '';
}
// 设置消息
setInfo(val){
this.info = val;
return this;
}
// 获取消息
getInfo(){
return this.info;
}
// 添加订阅者
addObserver(obr){
// 默认状态:允许添加
let flag = true;
// 遍历观察者名单
for( let key in this.observers ){
// 当以前的订阅者名单中已经有了当前对象
if(obr === this.observers[key]){
// 设置状态不允许添加
flag = false;
}
}
// 当状态为true才会被添加
if( flag ){
this.observers.push(obr);
}
// 返回发布者
return this
}
// 删除订阅者
removeObserver(obr){
for( let index in this.observers ){
// 找出订阅者名单中的对象,删除
if(this.observers[index] === obr){
this.observers.splice(index,1);
}
}
// 返回发布者
return this
}
// 发布消息
publish(){
// 遍历订阅者
for( let obr of this.observers ){
obr.updateInfo(this.getInfo());
}
}
}
// 订阅者
class Observer{
constructor(name){
this.name = name;
}
// 被动接收消息。(更新消息)
updateInfo(info){
console.log(`我是${this.name},我现在接收的消息是:${info}`);
}
}
以上代码为观察者的两个参与者的功能实现,下面将尝试调用两个参与者
// 创建订阅者
var ob1 = new Observer('tom');
var ob2 = new Observer('jack');
var ob3 = new Observer('alice');
// 创建发布者
var p = new Publisher();
// 添加订阅者
p.addObserver(ob1);
p.addObserver(ob2);
p.addObserver(ob3);
// 设置一条消息并发布
p.setInfo('这是第一条消息,发布者开张啦!!!').publish();
// 设置一条消息,但未发布
p.setInfo('第二条消息:大家以后想要看独家报道请冲会员啦!!!');