JavaScript设计模式读书笔记=; 行为型设计模式

Posted 刘翾

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript设计模式读书笔记=; 行为型设计模式相关的知识，希望对你有一定的参考价值。

全系列目录

  1. JavaScript设计模式读书笔记（一）=> 创建型设计模式
  2. JavaScript设计模式读书笔记（二）=> 结构型设计模式
  3. JavaScript设计模式读书笔记（三）=> 行为型设计模式
  4. JavaScript设计模式读书笔记（四）=> 技巧型设计模式
  5. JavaScript设计模式读书笔记（五）=>架构型设计模式，MVC，MVP，MVVM

文章目录

1. 模板方法模式

父类定义一组操作骨架，而将一些实现步骤推迟到子类中。

这节自己没有想到很好用到生产中的例子

// e.g.
const Alert = function (data) 
  this.content = data.content;
  this.panel = document.createElement('div');
  this.panel.class = 'alert'
  // xxxxx


Alert.prototype.init = function () 
  // xxxx


const RightAlert = function (data) 
  Alert.call(this, data);
  this.panel.class = 'right-alert alert'

RightAlert.prototype = Object.create(Alert);

关于提示框的实现看了下antd的Model实现方法，它是如何实现多种类型的提示框之间代码复用的。

  1. 细粒度模块拆分，例如底部按钮，图标，样式等
  2. 通用提示框提前写好组件默认配置项
  3. 特殊提示框通过1步的细粒度模块拆分可以做到自由定制

2. 观察者模式

这个在如今貌似用的也挺多的。其又称作发布-订阅者模式或消息机制，定义了一种依赖关系，解决了主题对象与观察者之间的功能的耦合。

2.1. 创建一个观察者

它有一个消息容器和三个方法，分别是订阅消息方法，取消订阅的消息方法，发送订阅的消息方法。

const Observer = (
  function() 
    const _message = ;
    return 
      // 注册信息
      regist: function(type, fn) 
        if (typeof _message[type] === 'undefined') 
          _message[type] = [fn];
         else 
          _message[type].push(fn);
        
      ,
      // 发布信息
      fire: function(type, args = ) 
        if (!_message[type]) return
        const events = 
          type,
          args
        
        for (let item of _message[type]) 
          item.call(this, events);
        
      ,
      // 移除信息
      remove: function(type, fn) 
        if (Array.isArray(_message[type])) 
          _message[type] = _message[type].filter(item => item !== fn)
        
      
    
  
)()

// ==========> 测试

Observer.regist('test', (e) => 
  console.log(e.type, e.args)
)

Observer.fire('test', 'asdasdasd'); // test, asdasdasd

2.2. 对象之间解耦

看一个例子

const student = function(result) 
  this.result = result;
  this.say = () =>
    console.log(this.result);
  
  


student.prototype.answer = function(question) 
  Observer.regist(question, this.say);


student.prototype.sleep = function(question) 
  console.log(`$this.result $question 已被注销`);
  Observer.remove(question, this.say);



const teacher = function() ;
teacher.prototype.ask = function(question) 
  console.log('问题是 ' + question);
  Observer.fire(question);


const student1 = new student('1号回答问题');
const student2 = new student('2号回答问题');

student1.answer('快毕业了');
student1.answer('时间太快了');
student2.answer('快毕业了');
student2.answer('时间太快了');

student2.sleep('时间太快了');


const teacher1 = new teacher();
teacher1.ask('快毕业了');
teacher1.ask('时间太快了');





// ================> 输出
> "2号回答问题 时间太快了 已被注销"
> "问题是 快毕业了"
> "1号回答问题"
> "2号回答问题"
> "问题是 时间太快了"
> "1号回答问题"

观察者模式最主要的作用是解决类或者对象之间的耦合，解耦两个相互依赖的对象，使其依赖于观察者的消息机制。

2.3. ES6 Reflect和Proxy实现观察者模式

此小节来自: http://es6.ruanyifeng.com/#docs/reflect#实例：使用-Proxy-实现观察者模式

使用 Proxy 写一个观察者模式的最简单实现，即实现observable和observe这两个函数。思路是observable函数返回一个原始对象的 Proxy 代理，拦截赋值操作，触发充当观察者的各个函数。

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, set);

function set(target, key, value, receiver) 
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;

上面代码中，先定义了一个Set集合，所有观察者函数都放进这个集合。然后，observable函数返回原始对象的代理，拦截赋值操作。拦截函数set之中，会自动执行所有观察者。

下面来看一个使用例子:

const person = observable(
  name: '张三',
  age: 20
);

function print() 
  console.log(`$person.name, $person.age`)


observe(print);
person.name = '李四';
// 输出
// 李四, 20

3. 状态模式

状态模式是解决程序中臃肿的分支判断语句问题，最终的目的是简化分支判断流程，将每个分支转化为一种状态独立出来，方便每种状态的管理又不至于每次执行时遍历所有分支。

思路：创建一个内部状态变量，然后内部封装好每种动作对应的状态，最后状态对象返回一个接口对象，它可以对内部的状态修改或者调用。

const State = function () 
  const _current = ;
  const states = 
    jump: function() 
      console.log('jump')
    ,
    move: function() 
      console.log('move');
    
  

  const action = 
    changeState: function(...arg) 
      for (let item of arg) 
        _current[item] = true;
      
      return this;
    ,
    goes: function() 
      console.log('触发了动作');
      for (let prop in _current) 
        states[prop] && states[prop]();
      
      return this;
    
  

  return 
    ...action
  


const a = new State();
a.changeState('jump', 'move').goes().changeState('jump').goes()

4. 策略模式

策略模式从代码上来看和状态模式差不多，逻辑只是稍有不同。状态模式中对状态的控制来决定表现行为，所以状态之间通常是不能相互代替的，否则将产生不同的行为结果；策略模式核心是算法。

// e.g.

const State = function () 
  const states = 
    phone: function(value) 
      return '判断是否是电话'
    ,
    number: function(value) 
      return '判断是否是数字'
    
  

  const action = 
    check: function(type, value) 
      return states[type] ? states[type](value) : '没有该类型的检测方法';
    ,
    add: function(type, fn) 
      states[type] = fn;
    
  

  return 
    ...action

5. 命令模式

命令模式是将执行的命令封装，解决命令的发起者与命令的执行者之间的耦合。每一个命令实际上是一个操作。

const viewCommond = (function() 
  const action = 
    calculate: (value) => 
      console.log('复杂计算，执行一个操作 ' + value.a);
    
  
  function execute(msg) 
    action[msg.command].call(action, msg.param);
  
  return execute
)()

viewCommond(
  command: 'calculate',
  param: 
    a: 1
  
)

6. 备忘录模式

它最主要的任务是对现有数据或者状态做缓存，为将来某一刻的使用或者回复做准备。

此处类似于现在的记忆化函数

// =================================》 第一种实现方法 来自《javascript权威指南》
function memoize(f) 
    var cache = ;
    return function()
        var key = arguments.length + Array.prototype.join.call(arguments, ",");
        if (key in cache) 
            return cache[key]
        
        else return cache[key] = f.apply(this, arguments)
    


// =================================》 第一种实现方法 来自memoize-one
// 代码地址 https://github.com/alexreardon/memoize-one/blob/master/src/index.js
export function memoize (resultFn) 
  let lastArgs = []; // 用来存放上一次调用的参数
  let lastResult; // 用来缓存上一次的结果
  let calledOnce: boolean = false; // 是否调用过，刚开始的时候是false

  // 判断两次调用的时候的参数是否相等
  // 这里的 `isEqual` 是一个抽象函数，用来判断两个值是否相等
  const isNewArgEqualToLast = (newArg, index) => isEqual(newArg, lastArgs[index]);

  // 如果上一次的参数和这一次一样，直接返回上一次的结果
  const result = function (...newArgs) 
    if (
      calledOnce &&
      newArgs.length === lastArgs.length &&
      newArgs.every(isNewArgEqualToLast)
    ) 
      // 如果和上次的参数一致， 直接返回缓存的值
      return lastResult;
    

    // 如果和上一次的参数不一致，我们需要再次调用原来的函数
    calledOnce = true; // 标记为调用过
    lastArgs = newArgs; // 重新缓存参数
    lastResult = resultFn.apply(this, newArgs); //重新缓存返回值

    return lastResult;
  

  // 返回闭包函数
  return result;

参考资料：

  1. 张容铭著 javascript设计模式 108-182页
  2. JavaScript权威指南
  3. https://github.com/alexreardon/memoize-one/blob/master/src/index.js
  4. https://zhuanlan.zhihu.com/p/37913276

以上是关于JavaScript设计模式读书笔记=; 行为型设计模式的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript设计模式读书笔记=; 技巧型设计模式

JavaScript设计模式读书笔记=; 技巧型设计模式

JavaScript设计模式读书笔记=; 结构型设计模式

JavaScript设计模式读书笔记=;架构型设计模式，MVC，MVP，MVVM

JavaScript设计模式读书笔记=;架构型设计模式，MVC，MVP，MVVM

Javascript设计模式与开发实践读书笔记（1-3章）