学习underscore链式调用

2019-01-29

摘要：学习冴羽的博客研究 underscore 链式调用

jQuery

jQuery 之所以能实现链式调用，关键就在于通过 return this，返回调用对象，伪代码：

// 获取DOM
function JQuery(selector) {
  this.elements = [];
  var nodeLists = document.getElementsByTagName(selector);
  for (var i = 0; i < nodeLists.length; i++) {
    this.elements.push(nodeLists[i]);
  }
  return this;
}

// 添加方法
JQuery.prototype = {
  eq: function(num){
    this.elements = [this.elements[num]];
    return this;
  },
  css: function(prop, val) {
    this.elements.forEach(function(el){
      el.style[prop] = val;
    })
    return this;
  },
  show: function() {
    this.css('display', 'block');
    return this;
  }
}

window.$ = function(selector){
  return new JQuery(selector)
}

$("div").eq(0).css("width", "200px").show();

underscore

underscore 默认不使用链式调用，但是可以通过 _chain 函数来实现

_chain

_.chain = function(obj) {
  var instance = _(obj); // { _wrapped: obj }
  instance._chain = true;
  return instance; // { _wrapped: obj, _chain: true }
};

使用 _chain 函数后，返回值调用原型上的方法后并不返回 this，也就是说返回值只能调用一次方法，无法接着调用其他方法了。但是，如果我们将调用方法的返回值再次传入 _chain 函数中，这样就可以再次调用原型上的方法。以此往复，不就可以一直链式调用下去了吗？

var _ = function(obj) {
  if (!(this instanceof _)) return new _(obj);
  this._wrapped = obj;
};

_.chain = function (obj) {
  // 添加链式调用的属性值 _chain 为 true
  var instance = _(obj);
  instance._chain = true;
  return instance;
};

var chainResult = function (instance, obj) {
  // 根据 _chain 属性来判断是否处理为可链式调用的对象
  return instance._chain ? _.chain(obj) : obj;
};

_.prototype.push = function(num) {
    this._wrapped.push(num);
    // 所有方法都使用 chainResult 将返回值处理一下
    return chainResult(this, this._wrapped)
}

像这样，每次调用方法后都将返回值传入 chainResult 处理一遍，就可以实现链式调用。但是如果将所有方法的返回值都修改成这样太麻烦，有更好的方法： _.prototype 上的函数是通过 _.mixin 函数将 _ 函数对象中的所有函数复制到 _.prototype 上的，所有的方法都经过 _.mixin 的复制操作。修改 _.mixin

var ArrayProto = Array.prototype;
var push = ArrayProto.push;

var chainResult = function (instance, obj) {
  return instance._chain ? _(obj).chain() : obj;
};

_.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 func.apply(_, args);
      // 修改后
      return chainResult(this, func.apply(_, args));
    };
  });
  return _;
};

_.mixin(_);

_.value

调用方法返回的值都是一个含有 _wrapped 属性的对象，我们需要的便是这个值, _value 方法就是返回处理后结果的 _wrapped 属性值

1
2
3

_.prototype.value = function() {
  return this._wrapped;
};

最终代码

(function () {

  var root = (typeof self == 'object' && self.self == self && self) ||
    (typeof global == 'object' && global.global == global && global) ||
    this || {};

  var ArrayProto = Array.prototype;

  var push = ArrayProto.push;

  var _ = function (obj) {
    if (obj instanceof _) return obj;
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
  };

  if (typeof exports != 'undefined' && !exports.nodeType) {
    if (typeof module != 'undefined' && !module.nodeType && module.exports) {
      exports = module.exports = _;
    }
    exports._ = _;
  } else {
    root._ = _;
  }

  _.VERSION = '0.2';

  var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;

  var isArrayLike = function (collection) {
    var length = collection.length;
    return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
  };

  _.each = function (obj, callback) {
    var length, i = 0;
    if (isArrayLike(obj)) {
      length = obj.length;
      for (; i < length; i++) {
        if (callback.call(obj[i], obj[i], i) === false) {
          break;
        }
      }
    } else {
      for (i in obj) {
        if (callback.call(obj[i], obj[i], i) === false) {
          break;
        }
      }
    }
    return obj;
  }

  _.isFunction = function (obj) {
    return typeof obj == 'function' || false;
  };

  _.functions = function (obj) {
    var names = [];
    for (var key in obj) {
      if (_.isFunction(obj[key])) names.push(key);
    }
    return names.sort();
  };

  /**
   * 在 _.mixin(_) 前添加自己定义的方法
   */
  _.reverse = function (string) {
    return string.split('').reverse().join('');
  }

  _.chain = function (obj) {
    var instance = _(obj);
    instance._chain = true;
    return instance;
  };

  var chainResult = function (instance, obj) {
    return instance._chain ? _(obj).chain() : obj;
  };

  _.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 _;
  };

  _.mixin(_);

  _.prototype.value = function () {
    return this._wrapped;
  };

})()