AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript链式结构序列化详解

2017-08-01 997
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：


一、概述

在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要简约得多啦。


作者：猴子猿

来源：51CTO 

文章标签：
JavaScript
前端开发
Go
关键词：
JavaScript结构
JavaScript链式
JavaScript序列化
行者武松
目录
相关文章
左诗右码
|
27天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
33 4
zcq5jk6y5y5e4
|
4月前
|
存储 JSON 前端开发
JavaScript异步编程3——Promise的链式使用
JavaScript异步编程3——Promise的链式使用
zcq5jk6y5y5e4
42 0
东方睿赢
|
6月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术，它是个轻量的JS对象树，模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术，它是个轻量的JS对象树，模拟实际DOM结构。当状态改变，React不直接修改DOM，而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树，找到最小变更，仅更新必要部分，提高性能，避免频繁DOM操作。虚拟DOM还支持跨平台应用，如React Native。它优化了更新流程，简化开发，并提升了用户体验。
东方睿赢
45 1
vohelon
|
7月前
|
JavaScript 前端开发
js的结构
【4月更文挑战第16天】js的结构
vohelon
47 4
vohelon
|
7月前
|
存储 JavaScript 前端开发
js的基本结构
【4月更文挑战第18天】js的基本结构
vohelon
58 1
zrblue
|
设计模式 JavaScript 前端开发
JavaScript的栈结构
想要代码更优雅，数据结构，设计模式跑不掉，今天走进栈结构！
zrblue
111 0
JavaScript的栈结构
东方睿赢
|
7月前
|
设计模式 前端开发 JavaScript
AngularJS是一款由Google收购的JavaScript结构框架
【5月更文挑战第2天】AngularJS是Google收购的JavaScript框架，用于构建动态Web应用，基于MVC模式，强调模块化和双向数据绑定。它简化了视图与模型的同步，通过语义化标签和依赖注入提升开发效率。适用于复杂单页面应用（SPA），但不适合DOM操作密集型或性能要求极高的场景。
东方睿赢
73 0
景天科技苑
|
7月前
|
JSON JavaScript 前端开发
深入探讨javascript的流程控制与分支结构，以及js的函数
深入探讨javascript的流程控制与分支结构，以及js的函数
景天科技苑
53 0
N..
|
7月前
|
存储 JavaScript 前端开发
JavaScript语言的基本结构
JavaScript语言的基本结构
N..
42 1
阿珊和她的猫
|
7月前
|
移动开发 前端开发 JavaScript
Java 和 JavaScript 的奇妙协同：语法结构的对比与探索（下）
Java 和 JavaScript 的奇妙协同：语法结构的对比与探索（下）
阿珊和她的猫
76 0

热门文章

最新文章

  • 1
    Gitlab----使用Docker方式安装部署Gitlab
  • 2
    《JavaScript框架设计》——1.4　类型的判定
  • 3
    JavaScript FAQ（六）——字符串
  • 4
    Mac搭建安卓模拟器（支持M1/M2/M3/M4）
  • 5
    java报错javax.net.ssl.SSLHandshakeException:  sun.security.validator.ValidatorException
  • 6
    开发人员各级岗位胜任力模型
  • 7
    Hive之数据倾斜的原因和解决方法
  • 8
    【Java】留下没有基础眼泪的面试题
  • 9
    JavaScript右下角信息提示插件Notyf
  • 10
    是时候开始使用JavaScript严格模式了
  • 1
    AJAX载入外部JS文件到页面并让其执行的方法（附源码）
    70
  • 2
    在Python中调用和执行JavaScript
    430
  • 3
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
    433
  • 4
    原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
    99
  • 5
    JavaScript原生代码处理JSON的一些高频次方法合集
    50
  • 6
    数字太大了，计算加法、减法会报错，结果不正确？怎么办？用JavaScript实现大数据（超过20位的数字）相加减运算。
    104
  • 7
    【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
    177
  • 8
    sd.js 2.0封装：更加简化请求传参内容（逐步废弃、逐渐日落2024.01.02）
    58
  • 9
    设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
    424
  • 10
    JS去除字符串的方法
    71

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。