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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
vue-router 按需加载 component: () => import() 报错的解决
Sep 22 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
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获取随机数字和字母的方法详解
2013/06/06 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python三引号如何输入
2020/07/06 Python
python入门教程之基本算术运算符
2020/11/13 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
质量负责人岗位职责
2015/02/15 职场文书
热爱劳动主题班会
2015/08/14 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
python批量创建变量并赋值操作
2021/06/03 Python