社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > JavaScript 链式结构序列化详解

JavaScript 链式结构序列化详解

黄舟
发布： 2017-03-04 15:21:22
原创
1171 人浏览过

一、概述

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

if_else:

if(...){
    //TODO
}else if(...){
    //TODO
}else{
    //TODO
}
登录后复制

switch:

switch(name){
    case ...:{
        //TODO
        break;
    }
    case ...:{
        //TODO
        break;
    }
    default:{
        //TODO    
    }
}
登录后复制

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

//fn1,f2,f3为处理函数
_if(fn1)._elseIf(fn2)._else(fn3);
登录后复制
登录后复制

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

二、链式代码扁平化

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

if(name === 'Monkey'){
    console.log('yes, I am Monkey');
}else if(name === 'Dorie'){
    console.log('yes, I am Dorie');
}else{
    console.log('sorry, over for ending!');
}
登录后复制

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

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

var thens = [];
thens.resolve = function(name){
    for(var i = 0, len = this.length; i < len;i++){
        if(this[i](name) !== &#39;next&#39;){
            break;
        }
    }
}
thens.push(f1, f2, f3);
登录后复制

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

function f1(name){
    if(name === &#39;Monkey&#39;){
        console.log(&#39;yes, I am Monkey&#39;);
    }else{
        return &#39;next&#39;;
    }
}
function f2(name){
    if(name === &#39;Dorie&#39;){
        console.log(&#39;yes, I am Dorie&#39;);
    }else{
        return &#39;next&#39;;
    }
}
function f3(){
    console.log(&#39;sorry, over for ending!&#39;);
}
登录后复制

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

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

//fn1,f2,f3为处理函数
_if(fn1)._elseIf(fn2)._else(fn3);
登录后复制
登录后复制

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

thens.push(f1).push(f2).push(f3).resolve();
登录后复制

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

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

thens.add = function(f){
    if(typeof f === &#39;function&#39;){
        this.push(f);
        return this;        
    }        
}
登录后复制

测试代码如下：

var thens = [];
thens.add = function(f){
    if(typeof f === &#39;function&#39;){
        this.push(f);
        return this;        
    }        
}
thens.resolve = function(name){
    for(var i = 0, len = this.length; i < len;i++){
        if(this[i](name) !== 'next'){
            break;
        }
    }    
}
thens.add(f1).add(f2).add(f3).resolve();
登录后复制

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

function Slink(){
    this.thens = [];
    this.thens.add = function(f){
        if(typeof f === &#39;function&#39;){
            this.push(f);
            return this;        
        }        
    }
    this.thens.resolve = function(name){
        for(var i = 0, len = this.length; i < len;i++){
            if(this[i](name) !== &#39;next&#39;){
                break;
            }
        }    
    }
}
登录后复制

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

function Slink(){
    this.thens = [];
}
Slink.prototype = {
    add: function(f){
            if(typeof f === &#39;function&#39;){
                this.thens.push(f);
                return this;        
            }        
    },
    resolve: function(name){
            for(var i = 0, len = this.thens.length; i < len; i++){
                if(this.thens[i](name) !== &#39;next&#39;){
                    break;
                }
            }    
    }
}
登录后复制

测试代码如下：

var thens = new Slink();
thens.add(f1).add(f2).add(f3);
thens.resolve();
登录后复制

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

function $go(f){
    return new Slink(f);
}
function Slink(f){
    this.thens = [];
    this.thens.push(f);
}
Slink.prototype = {
    add: function(f){
            if(typeof f === &#39;function&#39;){
                this.thens.push(f);
                return this;        
            }        
    },
    resolve: function(name){
            for(var i = 0, len = this.thens.length; i < len; i++){
                if(this.thens[i](name) !== &#39;next&#39;){
                    break;
                }
            }    
    }
}
登录后复制

测试代码如下：

$go(f1).add(f2).add(f3).resolve();
登录后复制

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

function _if(f){
    return new Slink(f);
}
function Slink(f){
    this.thens = [];
    this.thens.push(f);
}
Slink.prototype = {
    _elseIf: function(f){
            if(typeof f === &#39;function&#39;){
                this.thens.push(f);
                return this;        
            }        
    },
    _else: function(f){
            return this._elseIf(f);
    },
    resolve: function(name){
            for(var i = 0, len = this.thens.length; i < len; i++){
                if(this.thens[i](name) !== &#39;next&#39;){
                    break;
                }
            }
            return this;            
    }
}
登录后复制

测试代码如下：

_if(f1)._elseIf(f2)._else(f3).resolve();
登录后复制
登录后复制

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

var func = Function.prototype;
func._else = func._elseIf = function(fn){
    var _this = this;
    return function(){
        var res = _this.apply(this,arguments);
        if(res==="next"){  //值为Boolean
            return fn.apply(this,arguments);
        }
        return res;
    }
}
登录后复制

测试代码如下：

function f1(name){
    if(name === &#39;Monkey&#39;){
        console.log(&#39;yes, I am Monkey&#39;);
    }else{
        return &#39;next&#39;;
    }
}
function f2(name){
    if(name === &#39;Dorie&#39;){
        console.log(&#39;yes, I am Dorie&#39;);
    }else{
        return &#39;next&#39;;
    }
}
function f3(){
    console.log(&#39;sorry, over for ending!&#39;);
}
f1._elseIf(f2)._else(f3)('Dorie');
登录后复制

三、异步代码链式扁平化

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

什么意思？如下：

function f1(name){
    setTimeout(function(){
        if(name === &#39;Monkey&#39;){
            console.log(&#39;yes, I am Monkey&#39;);
        }else{
            return &#39;next&#39;;
        }
    }, 2000);
}
function f2(name){
    if(name === &#39;Dorie&#39;){
        console.log(&#39;yes, I am Dorie&#39;);
    }else{
        return &#39;next&#39;;
    }
}
function f3(){
    console.log(&#39;sorry, over for ending!&#39;);
}
登录后复制

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

测试代码如下：

_if(f1)._elseIf(f2)._else(f3).resolve();
登录后复制
登录后复制

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

Why？

因为JavaScript是单线程嘛。详情见（here）

那该怎么解决呢？

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

function f1(name){
    setTimeout(function(){
        if(name === &#39;Monkey&#39;){
            console.log(&#39;yes, I am Monkey&#39;);
        }else{
            //处理后续链
            this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置
        }
    }.bind(this), 2000);
}
登录后复制

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

function Slink(f){
    this.thens = [];
    this.thens.push(f.bind(this));
}
Slink.prototype = {
    _elseIf: function(f){
            if(typeof f === &#39;function&#39;){
                this.thens.push(f.bind(this));
                return this;        
            }        
    },
    _else: function(f){
            return this._elseIf(f.bind(this));
    },
    resolve: function(name, flag){
            for(var i = flag, len = this.thens.length; i < len; i++){
                if(this.thens[i](name) !== &#39;next&#39;){
                    break;
                }
            }
            return this;            
    }
}
登录后复制

测试代码如下：

function f1(name){
    setTimeout(function(){
        if(name === &#39;Monkey&#39;){
            console.log(&#39;yes, I am Monkey&#39;);
        }else{
            //处理后续链
            this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置
        }
    }.bind(this), 2000);
}
function f2(name){
    if(name === 'Dorie'){
        console.log('yes, I am Dorie');
    }else{
        return 'next';
    }
}
function f3(){
    console.log('sorry, over for ending!');
}
_if(f1)._elseIf(f2)._else(f3).resolve('',0);
登录后复制

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

是的，宗旨都一样，达到异步代码扁平化目的，不过这里的代码比Promise要简约得多啦。关于Promise详情见(here)。

 以上就是JavaScript 链式结构序列化详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！


相关标签：
javascript
来源：php.cn
上一篇：在 以前学JavaScript是一种怎么样的体验？ 下一篇：详细介绍JavaScript 中的 Promise
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
来自于 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...
来自于 2024-04-06 12:53:11
0
1
376
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板