Underscore链式调用

在分享之前，先分享一个$通过id的链式调用：

function Fn(elId) {  

  this.el = document.getElementById(elId);  

  return this

}

Fn.prototype.css = function (prop, val) {   

 this.el.style[prop] = val;   

 return this

}

Fn.prototype.hidden = function () {   

  this.css('display', 'none');  

  return this

}

Fn.prototype.show = function () {  

  this.css('display', 'block');  

  return this

}

window.$ = function (el) {  

  return new Fn(el)

}

$('test').css('width','300px').css('height','300px').css('background', 'red').hidden().show()
复制代码

之前分享this的链式调用，上面的代码我们其实可以这样使用：

var fn = new Fn('test');

但是我们不可能每一个id都去创建实例对象，所以这样使用：

window.$ = function (el) {  

  return new Fn(el)

}
复制代码

当然，这个链式调用非常简陋，只是说明一下思路。

回归今天分享的主题，underscore，这个函数库在业界内很出名，但是本人却从来没用过，估计只有那些算法写的多的才会用吧。underscore兼容了低版本浏览器，实现了对json的遍历。Underscore其实不支持链式调用，想要链式调用需要使用chain方法实现链式调用：

var mapFilter = _.chain([1, 2, 3]).filter(function (a, b, c) { 

   return a > 1}).map(function (a, b, c) { 

   return a > 1}).value()

console.log(mapFilter);//[true, true]
复制代码

先看一下underscore的三个函数源码：

var _ = function(obj) {  

  if (obj instanceof _) return obj;  

  if (!(this instanceof _)) return new _(obj);  

  this._wrapped = obj;

};
复制代码

_函数传入一个obj参数，如果是_的实例对象则直接返回，如果不是就返回new _(obj)，也就是_实例对象，并且把参数放在wrapped上。

_.chain = function(obj) { 

 var instance = _(obj); 

 instance._chain = true; 

 return instance;

};
复制代码

调用chain方法，实例一个_实例对象，并赋值chain = true。

var chainResult = function(instance, obj) { 

 return instance._chain ? _(obj).chain() : obj;

};
复制代码

如果instance里面的chain是true，说明调用了chain方法，就继续调用chain方法，否则直接返回参数obj。

我不知道underscore里面做了什么处理，(obj).chain() 会报错，因为chain方法是对象_的方法，(obj)返回的是new _(obj)，是实例对象，是没有chain方法的。

这边分享一下，构造函数如果返回的是一个object对象，那么实例对象就是这个object对象，返回基础数据类型都不会。函数其实都有隐式的return undefined：

function Fn() { 

 return {}

}

Fn.prototype.name = 'wade';

var fn = new Fn();

复制代码

没有return {}的时候：

console.log(fn.name);//wade

有return {}的时候：

console.log(fn.name);//undefined

console.log(fn);//{}

所以这边的chainResult改成：

var chainResult = function(instance, obj) {  

  return instance._chain ? _.chain(obj) : obj;

};
复制代码

本来想实现map和filter方法，后来发现写不出来，于是就实现push和shift两个最简单的方法。最终代码：

var _ = function(obj) {  

  if (obj instanceof _) return obj;  

  if (!(this instanceof _)) return new _(obj);  

  this._wrapped = obj;

};

_.prototype.shift = function () {  

  this._wrapped.shift();  

  return chainResult(this, this._wrapped)

}

_.prototype.push = function (num) {  

  this._wrapped.push(num);  

  return chainResult(this, this._wrapped)

}

_.chain = function(obj) {  

  var instance = _(obj);  

  instance._chain = true; 

   return instance;

};

var chainResult = function(instance, obj) {  

  return instance._chain ? _.chain(obj) : obj;

};

console.log(_.chain([1, 2, 3]).push(10).shift()._wrapped)//[2, 3, 10]
复制代码

我这边没有写value方法，value方法其实就是返回_wrapped。看underscore的源码，你会发现没有多少个函数调用了chainResult，其实underscore有一个遍历添加的方法：

// Add your own custom functions to the Underscore 

object._.mixin = function(obj) { 

 _.each(_.functions(obj), function(name) {  

  var func = _[name] = obj[name];  

  _.prototype[name] = function() {    

  var args = [this._wrapped];   

   push.apply(args, arguments);    

  return chainResult(this, func.apply(_, args));  

  }; 

 }); 

 return _;

};// Add all of the Underscore functions to the wrapper object._.mixin(_);
复制代码

把所有的方法都调用chainResult。

这就是简单的underscore链式调用的原理，还是那句话，underscore绝对是更复杂的。可以知道一下，本人研究的时候知道了，但是还是不会用，估计一段时间之后还会忘记。

转载于:https://juejin.im/post/5cb82c7af265da03a00fca71