JS中间件设计模式的深入探讨与实例分析

本文实例讲述了JS中间件设计模式。分享给大家供大家参考，具体如下：

中间件作为一些辅助处理功能，应用非常广泛，例如express中间件，redux中间件，koa中间件，那么中间件的设计模式到底是怎样的呢。结合中间件的使用实例探讨和总结一下中间件的设计思想和一般实现模式。

仿照redux中间件实现模式，看如下一个例子：

function fn2(next){
  console.log('执行2，返回改造的next之前')
  return action => {
    console.log('执行2')
    next(action)
  }
}
function fn3(next){
  console.log('执行3，返回改造的next之前')
  return action => {
    console.log('执行3')
    next(action)
  }
}
function fn1(next){
  console.log('执行1，返回改造的next之前')
  return action => {
    console.log('执行1')
    getData().then( data => {
      next(action)
    })
  }

}

function getData(){
  return new Promise(resolve => {
    setTimeout( () => {
      resolve(true)
    },3000)
  })
}
const next = (action) => {
  console.log('action',action)
}
// compose([fn1,fn2,fn3])(next)
const mm = [fn1,fn2,fn3].reduce(function(a,b,currentIndex,arr){
  console.log("a",a)
  console.log("b",b)
  return function(...args){
    console.log('args',[...args][0].toString())
    return a(b(...args))
  }
})(next)(1)

运行结果：这里类似与洋葱圈模型，但是是先从里向外，再由外向里

执行3，返回改造的next之前
args action => {
        console.log('执行3')
        next(action)
    }
执行2，返回改造的next之前
执行1，返回改造的next之前
执行1
执行2
执行3
action 1

接下来对上面的实例进行简化：

function fn2(action){
  console.log('执行2，返回改造的next之前')
  action+2
}
function fn3(action){
  console.log('执行3，返回改造的next之前')
  action+1
}
function fn1(action){
  console.log('执行1，返回改造的next之前')
  return action+1

}

function getData(){
  return new Promise(resolve => {
    setTimeout( () => {
      resolve(true)
    },3000)
  })
}
const next = (action) => {
  console.log('action',action)
}
// compose([fn1,fn2,fn3])(next)
const mm = [fn1,fn2,fn3].reduce(function(a,b,currentIndex,arr){
  console.log("a",a)
  console.log("b",b)
  return function(...args){
    console.log('args',[...args])
    return a(b(...args))
  }
})(1)

这时的中间件只是一层处理逻辑，没有传递初始处理逻辑，所以中间件是单一的，运行结果：

args [ 1 ]
执行3，返回改造的next之前
args [ undefined ]
执行2，返回改造的next之前
执行1，返回改造的next之前

抽离通用逻辑，深入到本质，中间件是对最初处理逻辑函数进行改造，如果没有，只执行自身的逻辑。

1，上面比较单一的就是只有自身逻辑的中间件

2，具有初始处理逻辑函数next的中间件，需要接受next，返回一个新的next'

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript设计模式 – 工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:前面我们介绍了简单工厂模式,简单工厂模式存在一个严重的问题:当需要扩展时必定要修改工厂类的源代码.我们虽然在第二个demo中做了一些优化,但是我们需在使用时明确指定执行方法的名字,这无疑提高了使用成本.那如何实现增加新产品而不影响已有代码?工厂模式应运而生. 定义:定义一个用于创建对象的接口,让子类决定将哪一个类实例化.工厂模式让一个类的实例化延迟到其子类.工厂模式又称为工厂方法模式,又可

  • javascript 设计模式之组合模式原理与应用详解

    本文实例讲述了javascript 设计模式之组合模式原理与应用.分享给大家供大家参考,具体如下: 组合模式说明 组合模式用于简单化,一致化对单组件和复合组件的使用:其实它就是一棵树: 这棵树有且只有一个根,访问入口,如果它不是一棵空树,那么由一个或几个树枝节点以及子叶节点组成,每个树枝节点还包含自己的子树枝以及子叶节点: 在面向对象编程中,叶子以及复杂对象(树枝节点)都继承一个接口或抽象类分别实现: 这个抽象定义一般三个部分组成,组件的基本信息,Add方法,Remove方法: 叶子节点只包含本

  • javascript 设计模式之享元模式原理与应用详解

    本文实例讲述了javascript 设计模式之享元模式.分享给大家供大家参考,具体如下: 享元模式说明 定义:用于解决一个系统大量细粒度对象的共享问题: 关健词:分离跟共享: 说明: 享元模式分单纯(共享)享元模式,以及组合(不共享)享元模式,有共享跟不共享之分:单纯享元模式,只包含共享的状态,可共享状态是不可变,不可修改的,这是享元的内部状态:当然有外部状态就有外部状态,外部状态是可变的,不被共享,这个外部状态由客户端来管理,是可变化的:外部状态与内部状态是独立分开的,外部状态一般作为参数传入

  • 浅谈Node.js 中间件模式

    浅谈Node.js 中间件模式

    中间件在 Node.js 中被广泛使用,它泛指一种特定的设计模式.一系列的处理单元.过滤器和处理程序,以函数的形式存在,连接在一起,形成一个异步队列,来完成对任何数据的预处理和后处理. 它的优点在于 灵活性 :使用中间件我们用极少的操作就能得到一个插件,用最简单的方法就能将新的过滤器和处理程序扩展到现有的系统上. 常规中间件模式 中间件模式中,最基础的组成部分就是 中间件管理器 ,我们可以用它来组织和执行中间件的函数,如图所示: 要实现中间件模式,最重要的实现细节是: 可以通过调用use()函数

  • javascript设计模式 – 抽象工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 抽象工厂模式原理与应用.分享给大家供大家参考,具体如下: 介绍:基于工厂模式,继续升级.来解决工厂模式存在多个工厂类的问题.主要的思想是将一些相关的产品组成一个产品族,由同一个工厂来统一生产. 定义:抽象工厂模式提供一个创建一系列相关或相互依赖的接口,而无须指定他们具体的类.抽象工厂模式又称kit模式,它是一种对象创建型模式. 场景:还是上面的Dialog类,如果继续向后发展,会有各种各样的弹窗,如果新增一个弹窗包含了notice和toast.这样

  • javascript设计模式 – 原型模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 原型模式原理与应用.分享给大家供大家参考,具体如下: 介绍:在日常的开发过程中,我们经常会利用到前端模板引擎来做页面渲染,因为存在很多页面结构相同,内容不同的场景.这种场景在js层面也会遇到, 很多组件存在相同或者类似,重复的创建会导致系统的消耗,这就要用到原型模式了.将相似内容提取出来作为原型类,创建具体类时需要对原型类进行复制然后扩展. 需要注意的是,复制出来的对象在进行修改时不会影响到原型类,二者相互独立. 定义:使用原型实例指定创建对象的种

  • javascript设计模式 – 建造者模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 建造者模式原理与应用.分享给大家供大家参考,具体如下: 介绍:建造者模式又称为生成器模式,它是一种较为复杂.使用频率相对较低的创建型模式.建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品 定义:将一个复杂对象的构建与他的表示分离,使得同样的构建过程可以创建不同的表示.建造者模式是一种对象创建型模式. 示例: var Dialog = function (){ this.type = ''; this.name = '';

  • javascript设计模式 – 单例模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 单例模式.分享给大家供大家参考,具体如下: 介绍:单例模式是结构最简单的设计模式.单例模式用于创建那些在软件系统中独一无二的对象,是一个简单但很实用的设计模式. 定义:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法.单例模式是一种对象创建型模式. 场景:日常编码中会有很多需要重用的场景,例如弹窗,键盘输入这类公共组件,我们往往希望它只创建一次,在第二次使用时重复使用之前创建好的实例.为了节约

  • javascript设计模式 – 简单工厂模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 简单工厂模式.分享给大家供大家参考,具体如下: 介绍:简单工厂模式是最常用的一类创建型设计模式.其中简单工厂模式并不属于GoF23个经典设计模式,它通常被作为学习其他工厂模式的基础. 定义:定义一个工厂类,它可以根据参数的不同返回不同的实例,被创建的实例通常都具有相同的父类,因为在简单工厂模式中创建实例的方法是静态方法,因此简单工厂模式又被称为静态工厂方法模式,它属于类创建型模式. 场景:我们需要写一个dialog工具类,在项目初期我们只需要考虑一

  • JS中间件设计模式的深入探讨与实例分析

    本文实例讲述了JS中间件设计模式.分享给大家供大家参考,具体如下: 中间件作为一些辅助处理功能,应用非常广泛,例如express中间件,redux中间件,koa中间件,那么中间件的设计模式到底是怎样的呢.结合中间件的使用实例探讨和总结一下中间件的设计思想和一般实现模式. 仿照redux中间件实现模式,看如下一个例子: function fn2(next){ console.log('执行2,返回改造的next之前') return action => { console.log('执行2') n

  • Java设计模式之静态代理模式实例分析

    本文实例讲述了Java设计模式之静态代理模式.分享给大家供大家参考,具体如下: 代理模式,可以通过代理可以在原来的基础上附加一些其他的操作.静态代理模式相对比较简单无需再程序运行时动态的进行代理. 静态代理模式的角色: ① 抽象角色:真实对象和代理对象的共同接口.其中声明真实对象和代理对象需要做的事. ② 真实角色:实现抽象角色,定义真实角色所要实现的业务逻辑,供代理角色调用. ③ 代理角色:实现抽象角色,是真实角色的代理,通过真实角色的业务逻辑方法来实现抽象方法,并可以附加自己的操作. 下面提

  • JS运动特效之完美运动框架实例分析

    JS运动特效之完美运动框架实例分析

    本文实例讲述了JS运动特效之运动框架.分享给大家供大家参考,具体如下: 在前面一篇的<js运动特效之同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacity:30}); } 在鼠标移入的时候,我们让w

  • JavaScript设计模式之责任链模式实例分析

    JavaScript设计模式之责任链模式实例分析

    本文实例讲述了JavaScript设计模式之责任链模式.分享给大家供大家参考,具体如下: 介绍 责任链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止. 请求以后,从第一个对象开始,链中收到请求的对象要么亲自处理它,要么转发给链中的下一个候选者.提交请求的对象并不知道哪一个对象将会处理它--也就是该请求有一个隐式的接受者(implicit receiv

  • js点击事件的执行过程实例分析【冒泡与捕获】

    本文实例讲述了js点击事件的执行过程.分享给大家供大家参考,具体如下: js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡. 首先看下当我们点击一个元素后,浏览器的执行过程. 1,当某个元素绑定的事件被触发时,这时浏览器就会从顶级document元素发出一个事件流 2,这个事件流顺着dom层级,一层一层向下找,直到遇到了触发事件的目标元素,这个查找的过程是捕获阶段 说明:捕获阶段,在查找每一层dom

  • JS中innerHTML和pasteHTML的区别实例分析

    本文实例讲述了JS中innerHTML和pasteHTML的区别.分享给大家供大家参考,具体如下: innerHTML 是一个属性,可以取得或者设定该元素内的 HTML 内容,可以是任意能包含 HTML 子节点的元素都使用它 pasteHTML()是一个方法,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上 例: <Script Language="

  • js实现网页标题栏闪烁提示效果实例分析

    本文实例讲述了js实现网页标题栏闪烁提示效果的方法.分享给大家供大家参考.具体分析如下: 网页标题栏闪烁效果我们在一些聊天工具会常看到,像现在流量的聊天室,下面我们就来给大家总结一款实现网页标题栏闪烁提示代码,感兴趣可参考一下. 公司的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 复制代码 代码如下: var newMessageRemind={ _step: 0, _title: document.title, _timer: null, //显示新消息提示

  • JS正则表达式之非捕获分组用法实例分析

    本文实例讲述了JS正则表达式非捕获分组用法.分享给大家供大家参考,具体如下: 最近在看JsonSQL的时候,通过源码中的一段正则表达式,了解到了什么是非捕获分组以及它的使用场景.在js中,正常的捕获分组格式是(XX),非捕获分组格式为(?:XX).我们先从正则表达式数量词说起,如果我们要求字符b至少出现一次,可以使用正则/b+/:如果要求ab至少出现一次,那么必需使用/(ab)+/,不能用/ab+/.也就是说,如果想对多个字符使用数量词,必需要用圆括号. var str = "a1***ab1c

  • js面向对象之静态方法和静态属性实例分析

    本文实例讲述了js面向对象之静态方法和静态属性.分享给大家供大家参考.具体分析如下: 先看如下代码: 复制代码 代码如下: <script type="text/javascript"> function Bird(){  this.wing = 2;  this.fly = function(){   alert("我是鸟,我会飞");  } } var maque = new Bird();//创建maque对象后,我们可以使用Bird的方法和属性

  • JS回调函数基本定义与用法实例分析

    本文实例讲述了JS回调函数基本定义与用法.分享给大家供大家参考,具体如下: 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. 字面上的理解,回调函数就是一个参数,将这个函数作为参数传到

随机推荐