美文网首页技术干货前端攻城狮程序员
优雅的函数式编程「链式调用」

优雅的函数式编程「链式调用」

作者: Ricoywang | 来源:发表于2018-02-06 17:43 被阅读0次

    完完全全把函数式编程写出来有点扛不住,很多也都用不上,聊聊比较常见的链式操作,我对链式操作的一些理解。

    先上一段代码让大家知道链式是什么样的:$("#idName").show().css("color","red")
    链式调用的代表:Jquery,使用过Jquery的攻城狮们应该都深有感触,连式操作是Jquery最具魅力的亮点之一。如果你还沉迷其中而没时间掀开它神秘的小裤裤,那接下来,嘿嘿···

    ⚧链式操作的三体

    • 能够进行链式操作的对象:链式对象 chainObject
    • 链式对象上能进行链式操作的方法:链式方法chainToDo()
    • 链式操作最终想要获得结果是通过被操作数据:链式数据chainData

    以下是一个简单的链式操作代码,我们在此基础上慢慢讲解,慢慢优化

    var chainObject = {
        chainData: 1,
        chainToDo: function(){
            this.chainData += 1;
            return this
        }
    }
    chainObject.chainToDo().chainToDo();
    console.log(chainObject.chainData);
    
    ⚦链式对象chainObject

    链式操作的载体,链式对象是一个属性及方法的集合,特别的地方在于chainObject在每次调用一个方法(chainObject.chainToDo)时,这个方法都会returnchainObject对象本身,这个对象又具有执行同样操作的方法,如此循环,于是形成了我们想要的函数执行链条chainObject.chainToDo().chainToDo().chainToDo()···

    ♂链式方法chainToDo()

    在上面的例子函数中,我们最终想要获知chainObject.chainData的最终值,链式操作是可以了,但每一次酣畅淋漓的操作后,还得打扫战场,就很不愉快了。
    于是链式方法,我们可以优化为两种

    • nextTodo:可以返回对象本身return this的方法,可进行下一步操作
    • endDo :可以想要的结果return this.chainData的方法,由于返回的是对象自带的数据,而不是对象本身,无法继续链式操作,链式操作结束,是作为链式操作终止符的存在。
    var chainObject = {
        chainData: 1,
        chainToDo: function(){
            this.chainData += 1;
            return this
        },
        chainEndDo : function(){
             return this.chainData
        }
    }
    var resultData = chainObject.chainToDo().chainToDo().chainEndDo();//获取最终结果数据
    
    ♁链式数据chainData

    链式操作的桥梁,chainData作为媒介一样的东西,让每次链式操作都具有意义,因为链式方法中的nextTodo每次都是返回一个可供下次操作的对象,如果没有这么一个媒介,链式调用可能只是一长串无意义的函数串。
    这个媒介可以是在对象字面量中,也可以是在上一级的作用域中,

    ♔基于JS原型链的链式操作优化

    JS原型链搭配链式操作,我们可以很方便的在一类对象上复用,只需要如下代码

    var ChainObject
    ChainObject.prototype = {
        chainData: 1,
        chainToDo: function(){
            this.chainData += 1;
            return this
        },
        chainEndDo : function(){
             return this.chainData
        }
    }
    var obj = new ChainObject
    var resultData = obj.chainToDo().chainToDo().chainEndDo();//获取最终结果数据
    

    每个实例都可以使用相同的链式方法;
    其实我们常见的map,filter等一些数组方法,本来就是可以进行链式操作;

    var arr = [1,2,3,4] ;
    arrData = arr.map((item)=>{retrun item*2})
                 .filter()
                 .reduce()
    

    map,filter都返回了一个新的数组,而只要是数组都具有原生的方法。

    ♔使用情况分析

    学到一种新的技术,可能总会出现,学了没法用,或者学了过段时间又忘记的情况。如果读了这篇文章后,觉得还是很有用,希望接下来,带着一些疑惑,思考一下我们如果在自己的代码中使用,让自己写的代码更优雅。

    常见的函数function(){return a+1},分解为两个函数,一个用来计算,一个用来返回结果,如果将两个函数挂在到一个链式对象上,其实就是一个简单的两步链式调用obj.addData().getResult()。结果就是,不是链式调用在什么情况下使用,而是你想在什么地方使用链式调用

    使用链式调用时,一般要考虑的是,处理步骤较为复杂的的事物,链式调用能够让我们清楚的知道要做什么以及下一步将要做什么。将复杂的逻辑调理化

    相关文章

      网友评论

        本文标题:优雅的函数式编程「链式调用」

        本文链接:https://www.haomeiwen.com/subject/nopgzxtx.html