JavaScript链式结构序列化详解

一、概述

在JavaScript中，链式模式代码，太多太多，如下：

if_else:

1. if(...){ 
2.     //TODO 
3. }else if(...){ 
4.     //TODO 
5. }else{ 
6.     //TODO 
7. } 

switch:

1. switch(name){ 
2.     case ...:{ 
3.         //TODO 
4.         break; 
5.     } 
6.     case ...:{ 
7.         //TODO 
8.         break; 
9.     } 
10.     default:{ 
11.         //TODO     
12.     } 
13. } 

疑问：诸如上述这些链式代码，倘若，我们想将其扁平化链式处理呢？如下：

1. //fn1,f2,f3为处理函数 
2. _if(fn1)._elseIf(fn2)._else(fn3); 

下面我们就来一起尝试实现下呗。

二、链式代码扁平化

假如，现在我们有如下链式代码：

1. if(name === 'Monkey'){ 
2.     console.log('yes, I am Monkey'); 
3. }else if(name === 'Dorie'){ 
4.     console.log('yes, I am Dorie'); 
5. }else{ 
6.     console.log('sorry, over for ending!'); 
7. } 

好了，现在我们一步一步将其”扁平化”。

其实看看上面的代码，不难发现，if…else这种格式，其实就是数据结构中的单链表，那么，初步利用JavaScript实现单链表，如下：

1. var thens = []; 
2. thens.resolve = function(name){ 
3.     for(var i = 0, len = this.length; i < len;i++){ 
4.         if(this[i](name) !== 'next'){ 
5.             break; 
6.         } 
7.     } 
8. } 
9. thens.push(f1, f2, f3); 

其中f1，f2，f3为判断函数，并且我们假设，如果诸如f1、f2、f3返回’next’时，就继续往下查找，否则，停止往下查找。如下：

1. function f1(name){ 
2.     if(name === 'Monkey'){ 
3.         console.log('yes, I am Monkey'); 
4.     }else{ 
5.         return 'next'; 
6.     } 
7. } 
8. function f2(name){ 
9.     if(name === 'Dorie'){ 
10.         console.log('yes, I am Dorie'); 
11.     }else{ 
12.         return 'next'; 
13.     } 
14. } 
15. function f3(){ 
16.     console.log('sorry, over for ending!'); 
17. } 

好了，这就是链表的模式。

但是，我们的最终目的是想实现如下这样的呢？

1. //fn1,f2,f3为处理函数 
2. _if(fn1)._elseIf(fn2)._else(fn3); 

你可能会说，将上述代码改成如下这样，不就好了吗？！！

1. thens.push(f1).push(f2).push(f3).resolve(); 

But，JavaScript的push方法返回的是数组的新长度，而不是数组对象哦。

So，那我们只能新写一个add方法，效果和push一样，但是返回数组对象。如下：

1. thens.add = function(f){ 
2.     if(typeof f === 'function'){ 
3.         this.push(f); 
4.         return this;         
5.     }         
6. } 

测试代码如下：

1. var thens = []; 
2. thens.add = function(f){ 
3.     if(typeof f === 'function'){ 
4.         this.push(f); 
5.         return this;         
6.     }         
7. } 
8. thens.resolve = function(name){ 
9.     for(var i = 0, len = this.length; i < len;i++){ 
10.         if(this[i](name) !== 'next'){ 
11.             break; 
12.         } 
13.     }     
14. } 
15. thens.add(f1).add(f2).add(f3).resolve(); 

但是，这样有个缺点，我们是将add、resolve方法绑定在全局变量thens中的，总不能每次创建一个数组时，都复制粘贴一遍方法吧，所以重构代码如下：

1. function Slink(){ 
2.     this.thens = []; 
3.     this.thens.add = function(f){ 
4.         if(typeof f === 'function'){ 
5.             this.push(f); 
6.             return this;         
7.         }         
8.     } 
9.     this.thens.resolve = function(name){ 
10.         for(var i = 0, len = this.length; i < len;i++){ 
11.             if(this[i](name) !== 'next'){ 
12.                 break; 
13.             } 
14.         }     
15.     } 
16. } 

显然，add，resolve这种公共方法，在每次实例化时，都创建一遍是不科学的，so，利用prototype在原有的基础上继续变形，如下：

1. function Slink(){ 
2.     this.thens = []; 
3. } 
4. Slink.prototype = { 
5.     add: function(f){ 
6.             if(typeof f === 'function'){ 
7.                 this.thens.push(f); 
8.                 return this;         
9.             }         
10.     }, 
11.     resolve: function(name){ 
12.             for(var i = 0, len = this.thens.length; i < len; i++){ 
13.                 if(this.thens[i](name) !== 'next'){ 
14.                     break; 
15.                 } 
16.             }     
17.     } 
18. } 

测试代码如下：

1. var thens = new Slink(); 
2. thens.add(f1).add(f2).add(f3); 
3. thens.resolve(); 

不错，但是这样，我们每次都得手动new一个Slink，有点麻烦，所以，我们将new Slink这个过程，封装到函数中，如同jQuery一样，如下：

1. function $go(f){ 
2.     return new Slink(f); 
3. } 
4. function Slink(f){ 
5.     this.thens = []; 
6.     this.thens.push(f); 
7. } 
8. Slink.prototype = { 
9.     add: function(f){ 
10.             if(typeof f === 'function'){ 
11.                 this.thens.push(f); 
12.                 return this;         
13.             }         
14.     }, 
15.     resolve: function(name){ 
16.             for(var i = 0, len = this.thens.length; i < len; i++){ 
17.                 if(this.thens[i](name) !== 'next'){ 
18.                     break; 
19.                 } 
20.             }     
21.     } 
22. } 

测试代码如下：

1. $go(f1).add(f2).add(f3).resolve(); 

好了，大功告成，接下来就是语法糖滴问题咯，整理代码如下：

1. function _if(f){ 
2.     return new Slink(f); 
3. } 
4. function Slink(f){ 
5.     this.thens = []; 
6.     this.thens.push(f); 
7. } 
8. Slink.prototype = { 
9.     _elseIf: function(f){ 
10.             if(typeof f === 'function'){ 
11.                 this.thens.push(f); 
12.                 return this;         
13.             }         
14.     }, 
15.     _else: function(f){ 
16.             return this._elseIf(f); 
17.     }, 
18.     resolve: function(name){ 
19.             for(var i = 0, len = this.thens.length; i < len; i++){ 
20.                 if(this.thens[i](name) !== 'next'){ 
21.                     break; 
22.                 } 
23.             } 
24.             return this;             
25.     } 
26. } 

测试代码如下：

1. _if(f1)._elseIf(f2)._else(f3).resolve(); 

当然，除开利用数组这种方式，还可以利用闭包，实现链式扁平化效果，如下：

1. var func = Function.prototype; 
2. func._else = func._elseIf = function(fn){ 
3.     var _this = this; 
4.     return function(){ 
5.         var res = _this.apply(this,arguments); 
6.         if(res==="next"){  //值为Boolean 
7.             return fn.apply(this,arguments); 
8.         } 
9.         return res; 
10.     } 
11. } 

测试代码如下：

1. function f1(name){ 
2.     if(name === 'Monkey'){ 
3.         console.log('yes, I am Monkey'); 
4.     }else{ 
5.         return 'next'; 
6.     } 
7. } 
8. function f2(name){ 
9.     if(name === 'Dorie'){ 
10.         console.log('yes, I am Dorie'); 
11.     }else{ 
12.         return 'next'; 
13.     } 
14. } 
15. function f3(){ 
16.     console.log('sorry, over for ending!'); 
17. } 
18. f1._elseIf(f2)._else(f3)('Dorie'); 

三、异步代码链式扁平化

在上面我们讨论的都是同步过程，倘若，链式调用函数中有异步情况呢？

什么意思？如下：

1. function f1(name){ 
2.     setTimeout(function(){ 
3.         if(name === 'Monkey'){ 
4.             console.log('yes, I am Monkey'); 
5.         }else{ 
6.             return 'next'; 
7.         } 
8.     }, 2000); 
9. } 
10. function f2(name){ 
11.     if(name === 'Dorie'){ 
12.         console.log('yes, I am Dorie'); 
13.     }else{ 
14.         return 'next'; 
15.     } 
16. } 
17. function f3(){ 
18.     console.log('sorry, over for ending!'); 
19. } 

我们将f1利用setTimeout变成了异步，按照上述代码的逻辑，应该是等f1完全执行完毕（包括setTimeout执行）后，判断是否执行f2，但真的如此吗？

测试代码如下：

1. _if(f1)._elseIf(f2)._else(f3).resolve(); 

执行代码的结果就是，什么也不输出。

Why？

因为JavaScript是单线程嘛。

那该怎么解决呢？

由于有异步代码，且必须在异步代码后处理后续的链，那么我们就等待异步代码执行完毕后，才执行后续的链嘛，如下：

1. function f1(name){ 
2.     setTimeout(function(){ 
3.         if(name === 'Monkey'){ 
4.             console.log('yes, I am Monkey'); 
5.         }else{ 
6.             //处理后续链 
7.             this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置 
8.         } 
9.     }.bind(this), 2000); 
10. } 

好了，由于在函数中，我们使用了this，其代表Slink对象，且改变了resolve方法，固，需细微调整Slink构造函数和原型链，如下：

1. function Slink(f){ 
2.     this.thens = []; 
3.     this.thens.push(f.bind(this)); 
4. } 
5. Slink.prototype = { 
6.     _elseIf: function(f){ 
7.             if(typeof f === 'function'){ 
8.                 this.thens.push(f.bind(this)); 
9.                 return this;        
10.             }        
11.     }, 
12.     _else: function(f){ 
13.             return this._elseIf(f.bind(this)); 
14.     }, 
15.     resolve: function(name, flag){ 
16.             for(var i = flag, len = this.thens.length; i < len; i++){ 
17.                 if(this.thens[i](name) !== 'next'){ 
18.                     break; 
19.                 } 
20.             } 
21.             return this;            
22.     } 
23. } 

测试代码如下：

1. function f1(name){ 
2.     setTimeout(function(){ 
3.         if(name === 'Monkey'){ 
4.             console.log('yes, I am Monkey'); 
5.         }else{ 
6.             //处理后续链 
7.             this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置 
8.         } 
9.     }.bind(this), 2000); 
10. } 
11. function f2(name){ 
12.     if(name === 'Dorie'){ 
13.         console.log('yes, I am Dorie'); 
14.     }else{ 
15.         return 'next'; 
16.     } 
17. } 
18. function f3(){ 
19.     console.log('sorry, over for ending!'); 
20. } 
21. _if(f1)._elseIf(f2)._else(f3).resolve('',0); 

哈哈，如果你了解Promise，是不是感觉这么相似呢。

是的，宗旨都一样，达到异步代码扁平化目的，不过这里的代码比Promise要简约得多啦。

作者：猴子猿

来源：51CTO