--- theme: awesome-green --- ## 🐛嵌套毛毛虫我猜你一定见过这样的代码： ``` if(condition1 === A1){ if(condition2 === A2){ ... }else if(condition2 === B2){ ... }else if(condition2 === C2){ ... }else{ ... } }esle if(condition1 === B1){ ... ... ... }else if(condition1 === C1){ ... ... ... }else if(condition1 === D1){ ... ... ... }else{ ... } ``` 讲真，并不是说这个代码有多坏，但是每次看到的时候都会引起本瓜不适。感觉它就像是一只毛毛虫。。。为了形象的表达这一点，本瓜诚邀灵魂画师 [守护安东尼](https://juejin.cn/user/3245414492684568) 作示意图一张，salute！！（￣︶￣）↗　 ![Icu1LE.md.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49bb4b70239048689e0e41a353d7cb99~tplv-k3u1fbpfcp-watermark.image) ^{* 图片来源：守护安东尼，未经允许，随意转载。} 这样写，总是会伴随着各种各样的逻辑判断、隐式输入、输出，还真不太敢动它，担心它直接“死”给你看！ ## 🌴责任链竹节镜头转向【责任链】，它是 23 种设计模式之一，属于行为型模式，关注对象之间的交互、通信；参数输入到一个初始函数中，如果不满足当前函数条件，则传递到下一函数中进行处理，满足停止，不满足再传递，这样 one by one 向后进行，直至满足条件或传递结束。一个个元函数就像是一节节竹节，独立可拆卸、再任意组装；闲话少说，实现它的代码大致是这样的： ``` function A1(condition1){ chainA2.next(chainB2).next(chainC2); return condition1 === A1 ? chainA2.setParam(condition2) : 'doNext' } function B1(condition1){ return condition1 === B1 ? ... : 'doNext' } function C1(condition1){ return condition1 === C1 ? ... : 'doNext' } function D1(condition1){ return condition1 === D1 ? ... : 'doNext' } ... function A2(condition2){ return condition2 === A2 ? ... : 'doNext' } function B2(condition2){ return condition2 === B2 ? ... : 'doNext' } function C2(condition2){ return condition2 === C2 ? ... : 'doNext' } chainA1.next(chainB1).next(chainC1).next(chainD1) chainA1.setParam(condition1) ``` 整体感官上，是不是像竹子一样？每一节（函数输入、输出）特别清晰。关键是，它解耦了，组装起来也超级方便~ ![IcHbcQ.md.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37f46803f42343d09f2e7fca96050f55~tplv-k3u1fbpfcp-watermark.image) ^{* 图片来源：守护安东尼，未经允许，随意转载。} **核心的**，生成 Chain 的代码如下： Chain 函数是高级函数，入参是一个函数。这里通过原型链的方式给它加了 next、setParam 两个属性。next 的入参也是 fn，用于设置下一个处理函数，setParam 用于传递原始入参； ``` var Chain = function( fn ){ this.fn = fn; this.successor = null; }; Chain.prototype.next = function( successor ){ return this.successor = successor; }; Chain.prototype.setParam = function(){ var ret = this.fn.apply( this, arguments ); if ( ret === 'doNext' ){ return this.successor && this.successor.setParam.apply( this.successor, arguments ); } return ret; }; ``` ## 🍜函数特性AOP 实际上，利用 JavaScript 的函数式特性，还有一种更加方便的方法来创建责任链 —— 即 AOP。面向切面编程（AOP：Aspect Oriented Program）思想的简单理解：**动态地将代码切入到类的指定方法、指定位置上的编程思想就是面向切面的编程。** 代码如下： ``` /** * 函数交织（AOP） * @param {*} fn * @returns */ Function.prototype.before = function(fn) { const self = this return function(...args) { const result = fn.apply(null, args) return self.call(null, result) } } Function.prototype.after = function(fn) { const self = this return function(...args) { const result = self.apply(null, args) return fn.call(null, result) } } ``` 调用示例: ``` fn1 = step2.before(init).after(step3).after(step4) //fn1 = init -> step2 -> step3 -> step4 ``` 我们可以任意指定、搭配函数的执行先后关系； ## 🥂composeAOP 还记得[《感谢 compose 函数，让我的代码屎山💩逐渐美丽了起来~》](https://juejin.cn/post/6989020415444123662)这篇文章吗？compose 其实有很多种写法！我们可以借助上面的 before 和 after 函数实现这一版的 composeAOP ~ ``` const composeAOP = function(...args) { const before = args.pop() const start = args.pop() if (args.length) { return args.reduce(function(f1, f2) { return f1.after(f2) }, start.before(before)) } return start.before(before) } ``` 对了，回答之前有不少人问为啥 compose 是从右至左执行？？ ``` const compose = function(...args) { if (args.length) { return args.reverse().reduce(function(f1, f2) { return f1.after(f2) }) } } compose(step4,step3,step2,step1,init)("start") ``` 这里说一下：原因是它模拟了通常情况下函数逐层调用，层层包裹的顺序，像剥洋葱一样，从外而内，从右至左去解析： ``` step4(step3(step2(step1(init(...args))))) // 一层层括号像极了洋葱皮 ``` 如果你喜欢从左至右，或换 pop() 为 shift() ，或去掉那层 reverse() 即可，或改 after 为 before......顺序问题，无关好坏，**全凭喜好~** ## 🎯传参问题！！如果你有心在控制台试试以上代码，不难发现其中的一个很严重的传参问题！！这个问题在《compose 优化屎山》那篇文章实际上也存在，也有细心的掘友反馈。 ``` function init(...args){ console.log(args) return [...args,"init"] } function step1(...args){ console.log(args) return [...args,"step1"] } function step2(...args){ console.log(args) return [...args,"step2"] } function step3(...args){ console.log(args) return [...args,"step3"] } compose(step3,step2,step1,init)("start") ``` **随着参数的传递，args 数组的维度在不断上升。** ![IcSSVw.md.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7d852518df684a8886a82cf26e54ebec~tplv-k3u1fbpfcp-watermark.image) 如果我们使用 flat(Infinity) 拉平数组，传参就变成了这样： ![IcSB8R.md.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b91d1eb8a74c470aa9489b3691fcfff3~tplv-k3u1fbpfcp-watermark.image) 这样做有一个很大的问题就是：需要对照数组的传参顺序！这是很头疼的，因为保不定哪天就要增删改流程参数。所以，期望是能换成对象作传参，**消除按顺序传参的桎梏**。比如： ``` {start:"start",init:"init",step1:"step1"......} ``` 直接动手试试： ``` function init(...args){ console.log(JSON.stringify(args)) return {args:args,init:"init"} } function step1(...args){ console.log(JSON.stringify(args)) return {args:args,step1:"step1"} } function step2(...args){ console.log(JSON.stringify(args)) return {args:args,step2:"step2"} } function step3(...args){ console.log(JSON.stringify(args)) return {args:args,step3:"step3"} } compose(step3,step2,step1,init)("start") ``` 得到： ![Icr8nW.md.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/347f6c0736ee4c2a9a9b20f28f6f3a45~tplv-k3u1fbpfcp-watermark.image) 显然这不是我们想要的，我们得再不断打印寻找规律： ![Ics52e.md.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9089ccd13b74d87b6d0c3678185f991~tplv-k3u1fbpfcp-watermark.image) 哇噢~ 在 step3 中想获取 step1，就要 2 个 .args[0]； ![Icse45.md.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9cbc90d837c4cb794f6f305b25e7fd5~tplv-k3u1fbpfcp-watermark.image) 在 step2 中想获取 step1，只要 1 个 .args[0]； ![IcslDC.md.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1cc6f583a7b42d495fcfef9e2a60439~tplv-k3u1fbpfcp-watermark.image) 我们基本可以推出：**想获得前 N 步的参数，只需带 N 个 .args[0]** 于是乎，我们可以尝试写一个 getCountStepAttr() 函数，用于在某个函数步骤中，获得前第 N 步的入参，通过调用对象属性的方式！来吧，展翅~ ``` function getCountStepAttr(args,N){ // 需要前第几（N）步的参数 N = N -1 let resObj = args[0] for(let i =0;i我是掘金安东尼，公众号同名，输出暴露输入，技术洞见生活，再会~