完完全全把函数式编程写出来有点扛不住, 很多也都用不上, 聊聊比较常见的链式操作, 我对链式操作的一些理解
先上一段代码让大家知道链式是什么样的:
- $("#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
) 时, 这个方法都会 return 出 chainObject 对象本身, 这个对象又具有执行同样操作的方法, 如此循环, 于是形成了我们想要的函数执行链条
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()
结果就是, 不是链式调用在什么情况下使用, 而是你想在什么地方使用链式调用
使用链式调用时, 一般要考虑的是, 处理步骤较为复杂的的事物, 链式调用能够让我们清楚的知道要做什么以及下一步将要做什么将复杂的逻辑调理化
来源: http://www.jianshu.com/p/47d6ee57e537