javascript设计模式-行为型模式

姜慧慧

已于 2022-12-15 16:01:09 修改

阅读量252

点赞数 1

分类专栏：计算机基础知识文章标签： javascript 前端

于 2021-11-30 18:35:18 首次发布

本文链接：https://blog.csdn.net/lovepink527/article/details/121566400

版权

计算机基础知识专栏收录该内容

14 篇文章 0 订阅

订阅专栏

观察者模式、发布/订阅模式、迭代器模式、职责链模式、委托模式、策略模式、中介者模式、模版方法模式、命令模式、备忘录模式、状态模式、访问者模式、解释器模式

1. 观察者模式

它定义了对象间的一种一对多的依赖关系，只要当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，解决了主体对象与观察者之间功能的耦合，即一个对象状态改变给其他对象通知的问题

let observer_ids=0;
let observed_ids=0;
//观察者类
class Observer {
   constructor() {
      this.id = observer_ids++;
   }
   //观测到变化后的处理
   update(ob){
      console.log("观察者" + this.id + `-检测到被观察者${ob.id}变化`);
   }
}
//被观察者列
class Observed {
   constructor() {
      this.observers = [];
      this.id=observed_ids++;
   }
   //添加观察者
   addObserver(observer) {
      this.observers.push(observer);
   }
   //删除观察者
   removeObserver(observer) {
      this.observers = this.observers.filter(o => {
         return o.id != observer.id;
      });
   }
   //通知所有的观察者
   notify(ob) {
      this.observers.forEach(observer => {
         observer.update(ob);
      });
   }
}

let mObserved=new Observed();
let mObserver1=new Observer();
let mObserver2=new Observer();

mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);

mObserved.notify();

2. 发布订阅模式

定义一个主体和众多个体，主体为消息中心，里面有各种各样的消息，众多的个体可以订阅不同的消息，当未来中心发布某条消息时，订阅过他的个体就会得到通知。

class eventBus {
  constructor() {
    this.events = new Map()
  }
  subscribe(eventname,fn) {
    let fns = this.events.get(eventname)
    if(!fns){
      fns = []
      fns.push(fn)
      this.events.set(eventname,fns)
    }else {
      fns.push(fn)
    }
  }
  publish(...args) {
    let eventname = args.shift()
    let fns = this.events.get(eventname)
    for(let i = -1; fns[++i];){
      fns[i](args)
    }
  }
}
var eventBus1 = new eventBus()
eventBus1.subscribe(3000,function(data) {
  console.log(data)
})
eventBus1.publish(3000,'发布了一个3000的房子')

3. 迭代器模式

不暴露对象内部结构的同时，可以顺序的访问聚合对象内部的元素
一个迭代器的实现，通常需要实现以下接口
next() 查找并返回下一个元素
hasNext() 判断迭代是否结束，返回布尔值

     	class Iterator {
            constructor(container) {
                this.list = container.list
                this.index = 0

            }
            next() {
                if(this.hasNext()) {
                    return this.list[this.index++]
                }
            }
            hasNext() {
                if(this.index >= this.list.length) {
                    return false
                }
                return true
            }

        }
        class Container {
            constructor(list) {
                this.list = list
            }
            // 生成遍历器
            getIterator() {
                return new Iterator(this)
            }
        }

        let container = new Container([1,2,3,4,5,6])
        let iterator = container.getIterator()

        while(iterator.hasNext()) {
            console.log(iterator.next());
        }

4.链模式

链模式是实现链式调用的主要方法，通过在自身方法中返回自身的方法，在一个对象连续多次调用自身方法是可以简化写法。

var obj = {
	a:function(){
		console.log('aaa')
		return this
	}
	b:function(){
		console.log('bbb')
		return this
	}
}
console.log(a.b().c())

5.委托模式

当多个对象需要处理同一请求时，可以将这些请求交由另一个对象同一处理。

<ul>
<li>aaaaaaaaaaaaa<li>
</ul>

window.onload = function(){
	var oUl = document.querySelector('ul')
	oUl.onclick=function(e){
		var e = e || window.event
		target = e.target || e.srcElement
		if(target.nodeName.toLowerCase() === 'li'){
			console.log(target.innerHTML)
		}
	}
	var oLi = document.createElement('li')y
	oLi.innerHtml = 'eeee'
	oul.appendchild(oLi)
}

6.策略模式

将算法封装到类里，在使用时，客户端自行选择需要的算法，像STL里封装的sort,find等。
改善前

let calculateBonus = function (level,salary) {
    if(level === 'S')
    {
        return salary*4;
    }
    if(level === 'A')
    {
        return salary*3;
    }
    if(level === 'B')
    {
        return salary*2;
    }
}
calculateBonus('S',10000) //输出40000
calculateBonus('B',10000) //输出20000

改善后：

let strategies = {
    "S" :function(salary) {
        return salary*4
    },
    "A" :function(salary) {
        return salary*3
    },
    "B" :function(salary) {
        return salary*2
    },
    "C" :function(salary) {
        return salary*1
    },
}
// 引用
let calculateBonus = function (level,salary) {
    return strategies[level](salary);
}
calculateBonus('S',20000)//输出80000

7. 中介者模式

与代理模式不同，代理模式是一对一结构中，代替某方与另一方沟通的模式；而中介者模式是一种一对多结构中，作为一个单独的结构，将这种一对多关联转变为一对一的关联，提高系统的灵活性，使得系统易于维护和扩展。

class Olympiad {
  constructor () {
    this.players = []
  }
  join (player) {
    this.players.push(player)
  }
  exit (player) {
    this.players.splice(this.players.findIndex(item=>item.name === player.name), 1)
  }
  getResult () {
    console.log('参赛所有方', this.players)
    this.players.forEach(item => {
      console.log(item.name, item.state)
    })
  }
}

class player {
  constructor (name) {
    this.name = name
    this.state = 'ready'
  }
  lose () {
    this.state = 'lose'
  }
  win () {
    this.state = 'win'
  }
}

const rabbit = new player('兔子')
const bear = new player('北极熊')
const chicken = new player('高卢鸡')
const eagle = new player('白头鹰')
const johnBull = new player('约翰牛')

const olympiad = new Olympiad ()
olympiad.join(rabbit)
olympiad.join(bear)
olympiad.join(chicken)
olympiad.join(eagle)
olympiad.join(johnBull)
olympiad.exit(chicken)

rabbit.win()
bear.win()
eagle.lose()
johnBull.lose()

olympiad.getResult()

8. 模板方法模式

模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。

var Beverage = function(){};
Beverage.prototype.boilWater = function(){
    console.log( '把水煮沸' );
};
Beverage.prototype.brew = function(){
    throw new Error( '子类必须重写brew方法' );
};
Beverage.prototype.pourInCup = function(){
    throw new Error( '子类必须重写pourInCup方法' );
};
Beverage.prototype.addCondiments = function(){
    throw new Error( '子类必须重写addCondiments方法' );
};
Beverage.prototype.customerWantsCondiments = function(){
    return true; // 默认需要调料
};
Beverage.prototype.init = function(){
    this.boilWater();
    this.brew();
    this.pourInCup();
    if ( this.customerWantsCondiments() ){ // 如果挂钩返回true，则需要调料
        this.addCondiments();
    }
};
var CoffeeWithHook = function(){};
CoffeeWithHook.prototype = new Beverage();
CoffeeWithHook.prototype.brew = function(){
    console.log( '用沸水冲泡咖啡' );
};
CoffeeWithHook.prototype.pourInCup = function(){
    console.log( '把咖啡倒进杯子' );
};
CoffeeWithHook.prototype.addCondiments = function(){
    console.log( '加糖和牛奶' );
};
CoffeeWithHook.prototype.customerWantsCondiments = function(){
    return window.confirm( '请问需要调料吗？' );
};
var coffeeWithHook = new CoffeeWithHook();
coffeeWithHook.init();

9. 命令模式

命令模式由三种角色构成：
发布者 invoker（发出命令，调用命令对象，不知道如何执行与谁执行）；
接收者 receiver (提供对应接口处理请求，不知道谁发起请求）；
命令对象 command（接收命令，调用接收者对应接口处理发布者的请求）。

class Receiver {  // 接收者类
  execute() {
    console.log('接收者执行请求');
  }
}

class Command {   // 命令对象类
  constructor(receiver) {
    this.receiver = receiver;
  }
  execute () {    // 调用接收者对应接口执行
    console.log('命令对象->接收者->对应接口执行');
    this.receiver.execute();
  }
}

class Invoker {   // 发布者类
  constructor(command) {
    this.command = command;
  }
  invoke() {      // 发布请求，调用命令对象
    console.log('发布者发布请求');
    this.command.execute();
  }
}

const warehouse = new Receiver();       // 仓库
const order = new Command(warehouse);   // 订单
const client = new Invoker(order);      // 客户
client.invoke();

/*
输出：
  发布者发布请求
  命令对象->接收者->对应接口执行
  接收者执行请求
*/

10. 备忘录模式

备忘录模式（Memento Pattern）保存一个对象的某个状态，以便在适当的时候恢复对象。

class Memento {
    constructor(content) {
        this.content = content;
    }
 
    getContent() {
        return this.content;
    }
}
 
// 备忘列表
class CarTaker {
    constructor() {
        this.list = [];
    }
 
    add(memento) {
        this.list.push(memento);
    }
 
    get(index) {
        return this.list[index];
    }
 
    getList() {
        return this.list
    }
}
 
// 编辑器
class Editor {
    constructor() {
        this.content = null;
    }
 
    setContent(content) {
        this.content = content;
    }
 
    getContent() {
        return this.content;
    }
 
    saveContentToMemento() {
        return new Memento(this.content);
    }
 
    getConentFromMemento(memento) {
        this.content = memento.getContent();
    }
}
 
// 测试代码
let editor = new Editor()
let careTaker = new CarTaker()
 
editor.setContent('111')
editor.setContent('222')
 
careTaker.add(editor.saveContentToMemento())  // 将当前222内容备份
editor.setContent('333')
careTaker.add(editor.saveContentToMemento())  // 将当前333内容备份
editor.setContent('444')
 
console.log(editor.getContent())
editor.getConentFromMemento(careTaker.get(1)) // 撤销
console.log(editor.getContent())
editor.getConentFromMemento(careTaker.get(0)) // 撤销
console.log(editor.getContent())

11. 状态模式

let HighState = {
  show() {
    console.log('绿色');
  },
}

let MiddleState = {
  show() {
    console.log('黄色');
  }
}

let LowState = {
  show() {
    console.log('红色');
  }
}
let Battery = {
  amount: 'heigh',
  state: HighState,
  // Bettery对象暴露的接口，用于设置对象的状态，并调用状态对象的接口，刷新对应状态的行为
  show() {
    this.setState();
    // 把显示的逻辑委托给状态对象
    this.state.show();
  },
  // 设置Bettery对象的状态，
  setState() {
    let amount = {
      'heigh': () => {
        this.state = HighState;
      },
      'middle': () => {
        this.state = MiddleState;
      },
      'low': () => {
        this.state = LowState;
      }
    }
    amount[this.amount]();
  }
}


Battery.show();
Battery.amount = 'middle';
Battery.show();
Battery.amount = 'low';
Battery.show();

12. 访问者模式

将数据操作和数据结构进行分离

var Visitor = (function () {
  return {
    splice: function () {
      var args = Array.prototype.splice.call(arguments, 1);
      return Array.prototype.splice.apply(arguments[0], args);
    },
    push : function () {
      var len = arguments[0].length || 0;
      var args = this.splice(arguments, 1);
      arguments[0].length = len + arguments.length - 1;
      return Array.prototype.push.apply(arguments[0], args);
    },
    pop: function () {
      return Array.prototype.pop.apply(arguments[0]);
    }
  }
})();

var a = {};
Visitor.push(a, 1, 3, 4);
Visitor.push(a, 3, 4, 5);
Visitor.pop(a);
Visitor.splice(a, 1);

13. 解释器模式

给定一个语言, 定义它的文法的一种表示，并定义一个解释器, 该解释器使用该表示来解释语言中的句子。
正则表达式是解释器模式

class Context {
    constructor() {
      this._list = []; // 存放 终结符表达式
      this._sum = 0; // 存放 非终结符表达式(运算结果)
    }
  
    get sum() {
      return this._sum;
    }
    set sum(newValue) {
      this._sum = newValue;
    }
    add(expression) {
      this._list.push(expression);
    }
    get list() {
      return [...this._list];
    }
  }
  
  class PlusExpression {
    interpret(context) {
      if (!(context instanceof Context)) {
        throw new Error("TypeError");
      }
      context.sum = ++context.sum;
    }
  }
  class MinusExpression {
    interpret(context) {
      if (!(context instanceof Context)) {
        throw new Error("TypeError");
      }
      context.sum = --context.sum;
    }
  }
  
  /** 以下是测试代码 **/
  const context = new Context();
  
  // 依次添加: 加法 | 加法 | 减法 表达式
  context.add(new PlusExpression());
  context.add(new PlusExpression());
  context.add(new MinusExpression());
  
  // 依次执行: 加法 | 加法 | 减法 表达式
  context.list.forEach(expression => expression.interpret(context));
  console.log(context.sum);