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

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

先上一段代码让大家知道链式是什么样的:$("#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()。结果就是,不是链式调用在什么情况下使用,而是你想在什么地方使用链式调用

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,521评论 0 5
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 01 昨天,我很忧伤和我的老大说: “老大,我不想干了,我要离职了,这不是开玩笑。我受够了这种粘贴,复制的日子。这...
    南雪夕阅读 1,043评论 14 8
  • 有孩子好啊,可以写写孩子 择花生择得我都不知道回家几天了,总想着每天择些择些,啥时候能择完。今天和韩雪聊,她让我赶...
    林馨儿_d1d3阅读 155评论 0 0