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


Posted in Javascript onApril 11, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
js实现双色球效果
Aug 02 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 #Javascript
js函数柯里化的方法和作用实例分析
Apr 11 #Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 #Javascript
JavaScript运行机制实例分析
Apr 11 #Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 #Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 #Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 #Javascript
You might like
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python中使用PDB库调试程序
2015/04/05 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python多线程与多进程及其区别详解
2019/08/08 Python
pytorch 常用线性函数详解
2020/01/15 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
Python脚本调试工具安装过程
2021/01/11 Python
小学教师师德演讲稿
2014/05/06 职场文书
爱心捐书活动总结
2014/07/05 职场文书
党员目标管理责任书
2014/07/25 职场文书
住房租房协议书
2014/08/20 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
企业党建工作总结2015
2015/05/26 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书