JavaScript链式结构序列化详解

一、概述

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的黔江网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

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

if_else:

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

switch:

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

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

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

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

二、链式代码扁平化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

测试代码如下：

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

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

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

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

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

测试代码如下：

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

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

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

测试代码如下：

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

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

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

测试代码如下：

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

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

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

测试代码如下：

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

三、异步代码链式扁平化

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

什么意思？如下：

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

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

测试代码如下：

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

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

Why？

因为JavaScript是单线程嘛。

那该怎么解决呢？

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

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

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

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

测试代码如下：

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

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

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

网站名称：JavaScript链式结构序列化详解
本文地址：http://www.csdahua.cn/qtweb/news2/268252.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

外贸网站建设知识

同城分类信息

企业网站改版　　 　广元双南建站　　 　app开发公司　　 　成都做网站　　 　东电技改　　 　大英泰恒网站　　 　邛崃柴油发电机维修保养公司　　 　网站空间　　 　网站解决方案　　 　新华建筑装饰　　 　温江网站建设　　 　美美搬家　　 　南充网站建设　　 　手机网站制作　　 　消防工程　　 　成都网站维护　　 　专业网站建设　　 　四川主机托管　　 　响应式网站建设方案　　 　鑫友邦火锅桌