underscore源码学习(一)

前言

最近在社区浏览文章的时候,看到了一位大四学长在寻求前端工作中的面经,看完不得不佩服,掌握知识点真是全面,无论是前端后台还是其他,都有涉猎。

在他写的文章中,有这么一句话,大概意思是,没有看过一个库或者框架的源码还敢出来混。然后自己心虚了一下,一直以来,都只是学习使用框架或库,或者在过程中有学习框架的思想,但并不深入。例如,在学习Vue.js中,我曾经去探索过Vue中的双向绑定是如何实现的,通过什么模式,什么API,作者的思想是什么,也曾经实现过简单版的双向绑定。
<!--more-->
但是感觉自己在这方面并没有什么提高,尤其在原生JavaScript的学习中,一些不常用的API经常忘,思维也不够好。所以有了学习优秀的库的源码的想法,一方面能够学习作者的思想,提高自己的分析能力,另一方面我觉得如果能好好分析一个库的源码,对自己的提升也是有的。

所以,刚开始,我从源码比较短的underscore.js(包含注释只有1.5k行)开始学习起。

什么是underscore

Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。它是这个问题的答案:“如果我在一个空白的HTML页面前坐下, 并希望立即开始工作, 我需要什么?“...它弥补了部分jQuery没有实现的功能,同时又是Backbone.js必不可少的部分。——摘自Underscore中文文档

我的学习之路是基于Underscore1.8.3版本开始的。

// Current version.
 _.VERSION = '1.8.3';

作用域包裹

与其他第三方库一样,underscore最外层是一个立即执行函数(IIFE),来包裹自己的业务逻辑。一般使用IIFE有如下好处,可以创建一个独立的沙箱似的作用域,避免全局污染,还可以防止其他代码对该函数内部造成影响。(但凡在立即执行函数中声明的函数、变量等,除非是自己想暴露,否则绝无可能在外部获得)

(function(){

    // ...执行逻辑
    
}.call(this))

学习的点,当我们要写自己的库或者封装某个功能函数时,可以给自己的库或函数在最外层包裹一个立即执行函数,这样既不会受外部影响,也不会给外部添麻烦。

_对象

underscore有下划线的意思,所以underscore通过一个下划线变量_来标识自身,值得注意的是,_是一个函数对象或者说是一个构造函数,并且支持无new调用的构造的函数,所有API都会挂载在这个对象上,如_.each,_.map

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

全局命名空间

underscore使用root变量保存了全局的this

var root = this;

为了防止其他库对_的冲突或影响,underscore做了如下处理,

var previousUnderscore = root._
_.noConflict = function() {
    root._ = perviousUnderscore;
    return this;
}

执行环境判断

underscore 既能够服务于浏览器,又能够服务于诸如 nodejs 所搭建的服务端。
一般,在客户端(浏览器)环境中,_即为window._=_,暴露在全局中。若在node环境中,_将被作为模块导出,并且向后兼容老的API,即require。

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

缓存局部变量及快速引用

underscore本身用到了不少ES5的原生方法,在浏览器支持的条件下,underscore率先使用原生的ES5方法。如下代码所示,underscore通过局部变量来保存一些常用到的方法或者属性。
这样做有几个好处:

  • 便于压缩代码
  • 提高代码性能,减少在原型链中的查找次数
  • 同时也可减少代码量,避免在使用时冗长的书写
var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;
var
  push             = ArrayProto.push,
  slice            = ArrayProto.slice,
  toString         = ObjProto.toString,
  hasOwnProperty   = ObjProto.hasOwnProperty;
var
  nativeIsArray      = Array.isArray,
  nativeKeys         = Object.keys,
  nativeBind         = FuncProto.bind,
  nativeCreate       = Object.create;

undefined处理

在underscore中,有很多函数都会有一个context函数,也就是当前函数的执行上下文,underscore对其进行了处理,如果没有传入contextcontextundefined,则返回原函数。
这里判断值为undefined用的是void 0,如下:

if (context === void 0) return func

作为一只涉猎尚浅的小白,查阅资料之后终于知道这里作者为什么要用void 0来做判断了。

详情可点链接了解,这样做更加安全可靠。
在还没看到这个代码时, 如果我要判断一个值是不是undefined,我会这样写

if (context === undefined) {}

但是,在发现作者的void 0之后,才发现这样写并不可靠,在JavaScript中,我们可以这样写:

args => {
  let undefined = 1
  console.log(undefined) // => 1
  if (args === undefined) {
    //...
  }
}

如果这样写,undefined就被轻易地修改为了1,所以对于我们之后定义的undefined的理解有歧义。所以,在JavaScript中,把undefined直接解释为“未定义”是有风险的,因为它可能被修改。

学习:以后判断undefined直接使用void 0, 看起来也优雅一点(滑稽脸)。

处理类数组

// getLength 函数
// 该函数传入一个参数,返回参数的 length 属性值
// 用来获取 array 以及 arrayLike 元素的 length 属性值
var getLength = property('length');

// 判断是否是 ArrayLike Object
// 类数组,即拥有 length 属性并且 length 属性值为 Number 类型的元素
// 包括数组、arguments、HTML Collection 以及 NodeList 等等
// 包括类似 {length: 10} 这样的对象
// 包括字符串、函数等
var isArrayLike = function(collection) {
  var length = getLength(collection);
  return typeof length == 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
};

对象创建的特殊处理

为了处理Object.create的跨浏览器的兼容性,underscore进行了特殊的处理。我们知道,原型是无法直接实例化的,因此我们先创建一个空对象,然后将其原型指向这个我们想要实例化的原型,最后返回该对象其一个实例。其代码如下:

var Ctor = function() {};  // 用于代理原型转换的空函数

var baseCreate = function(prototype) {
  if (!(_.isObject(prototype))) return {}; // 如果参数不是对象,直接返回空对象
  if (nativeCreate) return nativeCreate(prototype); // 如果原生的对象创建可以使用,返回该方法根据原型创建的对象
    
  // 处理没有原生对象创建的情况
  Ctor.prototype = prototype;  // 将空函数的原型指向要使用的原型
  var result = new Ctor();  // 创建一个实例
  Ctor.prototype = null;  // 恢复Ctor的原型供下次使用
  return result;  // 返回该实例
};

underscore中的迭代(iteratee)

在函数式编程中,使用更多的是迭代,而不是循环。
迭代:

var res = _.map([1,2], function(item){
  return item * 2
})

循环:

var arr = [1,2]
var res = []
for(var i = 0; i < arr.length; i++) {
  res.push(arr[i] * 2)
}

在underscore中迭代使用非常巧妙,源码也写的非常好,通过传入的数据类型不同而选择不同的迭代函数。
首先,在underscore中_.map的实现如下:

_.map = _.collect = function(obj, iteratee, context) {
  iteratee = cb(iteratee, context);
  var keys = !isArrayLike(obj) && _.keys(obj),
      length = (keys || obj).length,
      results = Array(length);
  for (var index = 0; index < length; index++) {
    var currentKey = keys ? keys[index] : index;
    results[index] = iteratee(obj[currentKey], currentKey, obj) //(value, index, obj)
  }
  return results;
}

可以看到,在_.map函数中的第二个参数iteratee,这个参数的格式可以是函数,对象,字符串。underscore会将其处理成一个函数,这将由回调函数cb来完成,我们来看一下cb的实现:

var cb = function(value, context, argCount) {
 // 是否用默认的迭代器 如果没有传入value 则返回当前迭代元素自身
 if (value == null) return _.identity;
 // 如果value是一个回调函数, 则需要优化回调 优化函数为optimizeCb
 if (_.isFunction(value)) return optimizeCb(value, context, argCount);
 // 如果value是个对象, 则返回一个matcher进行对象匹配
 if (_.isObject(value)) return _.matcher(value)
 // 否则, 如果value只是一个字面量, 则把value看做是属性名称, 返回一个对应的属性获得函数
 return _.property(value);
}

前面两个比较容易理解,看看当传入的数据格式为对象的情况,如果 value 传入的是一个对象,那么返回iteratee(_.matcher)的目的是想要知道当前被迭代元素是否匹配给定的这个对象:

var results = _.map([{name:'water'},{name: 'lzb',age:13}], {name: 'lzb'});
// => results: [false,true]

如果传入的是字面量,如数字,字符串等, 他会返回对应的key值,如下:

var results = _.map([{name:'water'},{name:'lzb'}],'name');
// => results: ['water', 'lzb'];

回调处理

在上面的cb函数中,我们可以看到,当传入的数据格式是函数,则需要通过optimizeCb函数进行统一处理,返回对应的回调函数,下面是underscore中optimizeCb函数的实现:

// 回调处理
// underscore 内部方法
// 根据 this 指向(context 参数)
// 以及 argCount 参数
// 二次操作返回一些回调、迭代方法
var optimizeCb = function(func, context, argCount) {
  // // void 0 会返回纯正的undefined,这样做避免undefined已经被污染带来的判定失效
  if (context === void 0) return func;
  switch (argCount == null ? 3 : argCount) {
    // 回调参数为1时, 即迭代过程中,我们只需要值
    // _.times
    case 1: return function(value) {
      return func.call(context, value);
    };
    case 2: return function(value, other) {
      return func.call(context, value, other);
    };
    // 3个参数(值,索引,被迭代集合对象)
    // _.each、_.map  (value, key, obj)
    case 3: return function(value, index, collection) {
      return func.call(context, value, index, collection);
    };
    // 4个参数(累加器(比如reducer需要的), 值, 索引, 被迭代集合对象)
    // _.reduce、_.reduceRight
    case 4: return function(accumulator, value, index, collection) {
      return func.call(context, accumulator, value, index, collection);
    };
  }

  // 如果都不符合上述的任一条件,直接使用apply调用相关函数
  return function() {
    return func.apply(context, arguments);
  };
}

optimizeCb 的总体思路就是:传入待优化的回调函数 func,以及迭代回调需要的参数个数argCount,根据参数个数分情况进行优化。

在underscore的_.times函数视线中,_times的作用执行一个传入iteratee函数n次,并返回由每次执行结果组成的数组。它的迭代过程iteratee只需要1个参数(当前迭代的索引)
_.times函数在underscore中的实现:

_.times = function(n, iteratee, context) {
  vat accum = Array(Math.max(0, n));
  iteratee = optimizeCb(iteratee, context, 1);
  for (var i = 0; i < n; i++) accum[i] = iteratee(i);
  return accum;
}

_.times的使用

function getIndex(index) {
  return index;
}
var results = _.times(3, getIndex); // => [0,1,2]

optimizeCb函数中当argCount的个数为2的情况并不常见,在_.each,_.map等函数中,argCount的值为3(value, key, obj),当argCount需要四个参数时,这四个参数的格式为:

  • accumulator:累加器
  • value:迭代元素
  • index:迭代索引
  • collection:当前迭代集合

underscore中reduce的实现如下:

/**
 * reduce函数的工厂函数, 用于生成一个reducer, 通过参数决定reduce的方向
 * @param dir 方向 left or right
 * @returns {function}
 */
function createReduce(dir) {
  function iterator(obj, iteratee, memo, keys, index, length) {
    for(; index >= 0 && index < length; index += dir) {
      var currentKey = keys ? keys[index] : index;
      // memo 用来记录最新的 reduce 结果
      // 执行 reduce 回调, 刷新当前值
      memo = iteratee(memo, obj[currentKey], currentKey, obj);
    }
    return memo;
  }
  return function(obj, iteratee, memo, context) {
    // 优化回调
    iteratee = optimizeCb(iteratee, context, 4);
    var keys = !isArrayLike(obj) && _.keys(obj),
        length = (keys || obj).length,
        index = dir > 0 ? 0 : length - 1;
    if (arguments.length < 3) {
      // 如果没有传入memo初始值 则从左第一个为初始值 从右则最后一个为初始值
      memo = obj[keys ? keys[index] : index];
      index += dir;
    }
    // return func
    return iterator(obj, iteratee, memo, keys, index, length);
  }
}

例如在_.reduce、_.reduceRight中,argCount的值为4。看看underscore中_.reduce的使用例子

var sum = _.reduce([1,2,3,4], function(accumulator, value, index, collection){
  return accumulator + value;
}, 0) // => 10

相关推荐