美文网首页
JavaScript链式编程与职责链模式案例实践

JavaScript链式编程与职责链模式案例实践

作者: 罗坤_23333 | 来源:发表于2019-04-07 16:46 被阅读0次

职责链模式是从链式编程中延伸出来的一种(行为型)设计模式。为了更好理解职责链,本文先从链式编程开始介绍。

链式编程

和函数式编程不同[1],所谓的链式编程就是可以通过"点"语法,将需要执行的代码块连续的书写下去,使得代码简单易读,书写方便。在JQuery中早就有了这个概念。如下图: 图片资源来自[2]

函数编程式中的链式优化[3]

一个计算器中要根据各种运算符计算结果,我们常常这样实现(极端例子):

function add(a, b){
  return a + b
}

function multiply(a, b){
  return a * b
}

//计算 ( 1 + 1 ) * 2
multiply( add(1, 1), 2 )

//计算 ( 1 + 1 ) * 2 + 3
add( multiply( add(1, 1), 2 ) )

上述代码中仅仅多了一个“+3”运算 ,整个函数都要外部多包一层,且在语义化上非常难读,在这种情况下,我们可以考虑多种优化方式,比如下面的 链式优化

const utils = {
  chain(a) {
    this._temp = a;
    return this;
  },
  add(b) {
    this._temp += b;
    return this;
  },
  multiply(b) {
    this._temp *= b;
    return this;
  },
  value() {
    const _temp = this._temp;
    this._temp = undefined;
    return _temp;
  }
};

//计算 ( 1 + 1 ) * 2
utils.chain(1).add(1).multiply(2)

//计算 ( 1 + 1 ) * 2 + 3
utils.chain(1).add(1).multiply(2).add(3)

职责链模式

定义:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间 的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。[4]

职责链的一个例子是事件冒泡:事件通过一系列嵌套控件传播,其中控件可以选择处理事件。

图解

image

对象模型

  • Client -- 示例代码: Request
    • 向一系列处理程序对象发起请求
  • Handler -- 示例代码: Request.get() method
    • 定义用于处理请求的接口
    • 实现后继链接用于传递(return 'this')

JavaScript中的示例代码[5]

此示例展示了一种优化后的点钞机问题解决方案。比如,客户从一台ATM机取247元,如何组合钞票(100元,50元,20元,10元,5元,1元)满足这一需求。

var Request = function(amount) {
    this.amount = amount;
}
 
Request.prototype = {
    get: function(bill) {
        var count = Math.floor(this.amount / bill);
        this.amount -= count * bill;
        return this;
    }
}
 
function run() {
    var request = new Request(378);
 
    request.get(100).get(50).get(20).get(10).get(5).get(1);
}

参考

相关文章

  • JavaScript链式编程与职责链模式案例实践

    职责链模式是从链式编程中延伸出来的一种(行为型)设计模式。为了更好理解职责链,本文先从链式编程开始介绍。 链式编程...

  • 责任链模式(ResponsibilityChain)

    转载 请求的链式处理——职责链模式(一) 请求的链式处理——职责链模式(二) 请求的链式处理——职责链模式(三) ...

  • 职责链模式

    摘自《JavaScript设计模式与开发实践》 职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送...

  • 设计模式 Day17 职责链模式

    1. 职责链模式动机与定义(模式类型、核心用途、调用过程)? 类型:行为型模式 核心:请求的链式处理 调用:客户端...

  • javascript 职责链模式

    javascript 职责链模式-紧密耦合判读变多函数分开处理 职责链模式是:是多个对象都有机会处理请求,从而避免...

  • 《JavaScript设计模式与开发实践》之职责链模式

    职责链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这些对象连成一条链,并沿着这...

  • JavaScript职责链模式

    定义:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连城一条链,并沿着这条链传...

  • JavaScript设计模式——职责链模式

    职责链模式是设计模式中行为型的一种设计模式; 定义: 使多个对象都有机会处理请求,从而避免请求的发送者与接收者之间...

  • android-RxJava探索之旅

    一 RxJava波及到的概念 响应式编程 函数式编程 观察者模式 责任链模型 事件驱动 异步操作 链式调用 Rea...

  • [记录]我的设计模式学习路径

    书单 《JavaScript 设计模式与开发实践》《设计模式之美》《掘金小册-JavaScript 设计模式核⼼原...

网友评论

      本文标题:JavaScript链式编程与职责链模式案例实践

      本文链接:https://www.haomeiwen.com/subject/vpdsiqtx.html