underscore 0.1.0版本源碼閱讀

時間 2019-11-15
標籤 underscore 0.1.0 版本源碼閱讀简体版
原文原文鏈接
前言

這篇文章是爲以後的underscore現版本的源碼作鋪墊，先感覺下最早版本node
0.1.0版本足夠小
這個版本已經有將近小10年的歷史了
仍是有一些不錯的地方。
0.1.0版本源碼分析
// Underscore.js
// (c) 2009 Jeremy Ashkenas, DocumentCloud Inc.
// Underscore is freely distributable under the terms of the MIT license.
// Portions of Underscore are inspired by or borrowed from Prototype.js, 
// Oliver Steele's Functional, And John Resig's Micro-Templating.
// For all details and documentation:
// http://documentcloud.github.com/underscore/
window._ = {
  
  VERSION : '0.1.0',
  
  /*------------------------ Collection Functions: ---------------------------*/
  // 集合函數
  // The cornerstone, an each implementation.
  // Handles objects implementing forEach, each, arrays, and raw objects.

  each : function(obj, iterator, context) {
    var index = 0;
    try {
      if (obj.forEach) {
        // 有forEach優先選擇forEach
        obj.forEach(iterator, context);
      } else if (obj.length) {
        // 使用自定義迭代器迭代
        for (var i=0; i<obj.length; i++) iterator.call(context, obj[i], i);
      } else if (obj.each) {
        // 若是是對象擁有each方法 // 這裏是兼容jq嗎？
        obj.each(function(value) { iterator.call(context, value, index++); });
      } else {
        var i = 0;
        for (var key in obj) {
          // 對象屬性迭代，可能會獲取到對象上可迭代的屬性
          var value = obj[key], pair = [key, value];
          pair.key = key;
          pair.value = value;
          // 迭代器綁定上下文且進行迭代
          // 迭代器形容each(function(value,index))
          iterator.call(context, pair, i++);
        }
      }
    } catch(e) {
      if (e != '__break__') throw e;
    }
    return obj;
  },
  
  // Return the results of applying the iterator to each element. Use Javascript
  // 1.6's version of map, if possible.
  // 
  map : function(obj, iterator, context) {
    // 沒有過濾對象其實。。
    // 判斷是否存在。map方法
    if (obj && obj.map) return obj.map(iterator, context);

    // map爲返回迭代後返回一個數組，因此咱們只要push迭代後的值
    // each方法僅僅是定義了一種迭代方法。
    // 後面的幾種方法均可以進行復用
    var results = [];
    _.each(obj, function(value, index) {
      results.push(iterator.call(context, value, index));
    });
    return results;
  },
  
  // Inject builds up a single result from a list of values. Also known as
  // reduce, or foldl.
  // 有點像簡化版的reducer
  inject : function(obj, memo, iterator, context) {
    _.each(obj, function(value, index) {
      memo = iterator.call(context, memo, value, index);
    });
    return memo;
  },
  
  // Return the first value which passes a truth test.
  detect : function(obj, iterator, context) {
    var result;
    // 當有一個完成條件。
    // 則經過try catch來跳出each迭代。// 這裏仍是有點意思的。
    _.each(obj, function(value, index) {
      if (iterator.call(context, value, index)) {
        result = value;
        // 前面的each try catch的目的在於利用自定義拋出錯誤令each遍歷中止
        throw '__break__';
      }
    });
    return result;
  },
  
  // Return all the elements that pass a truth test. Use Javascript 1.6's
  // filter(), if it exists.
  // filter
  select : function(obj, iterator, context) {
    if (obj.filter) return obj.filter(iterator, context);
    //若是是數組直接過濾輸出
    var results = [];
    _.each(obj, function(value, index) {
      if (iterator.call(context, value, index)) results.push(value);
    });
    //不是數組遍歷操做壓入數組返回
    return results;
  },
  
  // Return all the elements for which a truth test fails.
  // 有點像filter，過濾符合條件的
  reject : function(obj, iterator, context) {
    var results = [];
    _.each(obj, function(value, index) {
      // 注意感嘆號取反
      if (!iterator.call(context, value, index)) results.push(value);
    });
    return results;
  },
  
  // Determine whether all of the elements match a truth test. Delegate to
  // Javascript 1.6's every(), if it is present.
  // 有點像every
  all : function(obj, iterator, context) {
    // 設置默認迭代器
    iterator = iterator || function(v){ return v; };
    // 判斷是否存在every
    if (obj.every) return obj.every(iterator, context);
    // every即須要全部元素都知足迭代條件。
    var result = true;
    _.each(obj, function(value, index) {
      result = result && !!iterator.call(context, value, index);
      if (!result) throw '__break__';
    });
    return result;
  },
  
  // Determine if at least one element in the object matches a truth test. Use
  // Javascript 1.6's some(), if it exists.
  // any即some
  // some是隻要有值符合條件就
  any : function(obj, iterator, context) {
    iterator = iterator || function(v) { return v; };
    if (obj.some) return obj.some(iterator, context);
    var result = false;
    // 進行迭代，須要迭代器產值均爲負值
    _.each(obj, function(value, index) {
      // 賦值語句返回值是右值 
      // if(a = true){console.log(123)}
      // if(d = false){console.log(333)}
      if (result = !!iterator.call(context, value, index)) throw '__break__';
    });
    return result;
  },
  
  // Determine if a given value is included in the array or object, 
  // based on '==='.
  // 判斷一個值包含在數組或對象中時
  include : function(obj, target) {
    if (_.isArray(obj)) return _.indexOf(obj, target) != -1;
    var found = false;
    _.each(obj, function(pair) {
      if (pair.value === target) {
        found = true;
        throw '__break__';
      }
    });
    return found;
  },
  
  // Invoke a method with arguments on every item in a collection.
  // 藉助一個函數對集合內的全部元素進行操做。
  invoke : function(obj, method) {
    var args = _.toArray(arguments).slice(2);
    return _.map(obj, function(value) {
      return (method ? value[method] : value).apply(value, args);
    });
  },
  
  // Optimized version of a common use case of map: fetching a property.

  // 對數組的值作迭代，返回對應的key值
  pluck : function(obj, key) {
    var results = [];
    _.each(obj, function(value){ results.push(value[key]); });
    return results;
  },
  // 返回一個最大的元素
  // Return the maximum item or (item-based computation).
  max : function(obj, iterator, context) {
    // 這邊是若是沒有迭代函數的話直接使用Math.max.apply取最大值
    // Math.max.apply({}) === Math.max.apply([]) === -Infinity
    if (!iterator && _.isArray(obj)) return Math.max.apply(Math, obj);
    var result;
    // 進行迭代
    _.each(obj, function(value, index) {
      var computed = iterator ? iterator.call(context, value, index) : value;
      // 對迭代每次的值進行計算。
      if (result == null || computed >= result.computed) result = {value : value, computed : computed};
      // 對初始化以及每一次判斷computed大於當前值更新
    });
    return result.value;
  },
  
  // Return the minimum element (or element-based computation).
  min : function(obj, iterator, context) {
    if (!iterator && _.isArray(obj)) return Math.min.apply(Math, obj);
    var result;
    _.each(obj, function(value, index) {
      var computed = iterator ? iterator.call(context, value, index) : value;
      if (result == null || computed < result.computed) result = {value : value, computed : computed};
    });
    return result.value;
  },
  
  // Sort the object's values by a criteria produced by an iterator.
  sortBy : function(obj, iterator, context) {
    // 根據對象的一些值進行排序
    // 首先咱們只要關注每一個函數的目的便可
    // map一次遍歷，返回多個對象數組。而後根據數組對象排序
    // 而且對象均有值爲criteria表示咱們迭代函數的值(就是根據什麼排序)
    return _.pluck(_.map(obj, function(value, index) {
      return {
        value : value,
        criteria : iterator.call(context, value, index)
      };
    }).sort(function(left, right) {
      var a = left.criteria, b = right.criteria;
      // 判斷大於小於等於
      return a < b ? -1 : a > b ? 1 : 0;
    }), 'value');
    // 外面的一層pluck是爲了解開map函數的一層打包
  },
  
  // Use a comparator function to figure out at what index an object should
  // be inserted so as to maintain order. Uses binary search.
  // 這是利用二分查找吧
  // 利用二分查找找出元素應該插入到哪一個位置中
  sortedIndex : function(array, obj, iterator) {
    iterator = iterator || function(val) { return val; };
    // 初始化一個迭代器
    var low = 0, high = array.length;//不嚴謹直接去length
    // 初始化高低位
    // 
    while (low < high) {
      var mid = (low + high) >> 1;
      // 對中位取半(important快捷方法)
      iterator(array[mid]) < iterator(obj) ? low = mid + 1 : high = mid;
    }
    return low;
  },
  
  // Convert anything iterable into a real, live array.
  // 轉換數組(轉換一切可迭代的)
  toArray : function(iterable) {
    if (!iterable) return []; //爲假值直接返回[]
    if (_.isArray(iterable)) return iterable; //判斷是否爲數組
    return _.map(iterable, function(val){ return val; });//若是爲對象的話，利用map轉成數組
  },
  
  // Return the number of elements in an object.
  // 返回對象的元素數量
  size : function(obj) {
    return _.toArray(obj).length;
  },
  
  /*-------------------------- Array Functions: ------------------------------*/
  
  // Get the first element of an array.
  // 返回數組第一個元素
  first : function(array) {
    return array[0];
  },
  
  // Get the last element of an array.
  // 返回數組最後一個元素
  last : function(array) {
    return array[array.length - 1];
  },
  
  // Trim out all falsy values from an array.
  //去除假值的數組元素
  //須要傳入一個操做函數 false值在兩次取反會被去掉
  compact : function(array) {
    return _.select(array, function(value){ return !!value; });
  },
  
  // Return a completely flattened version of an array.
  //多維數組返回一個一維數組
  // 數組扁平化
  // 開始展示出函數式編程的靈活性了
  flatten : function(array) {
    return _.inject(array, [], function(memo, value) {
      // 這邊若是仍是數組的話進行一個遞歸的扁平
      if (_.isArray(value)) return memo.concat(_.flatten(value));
      memo.push(value);
      return memo;
    });
  },
  
  // Return a version of the array that does not contain the specified value(s).
  // 對傳入的數組進行篩選
  // 這裏有一個點，咱們在傳參形參定義了array
  // 而在下面的地方咱們能夠直接使用array且slice截取arguments
  
  without : function(array) {
    var values = array.slice.call(arguments, 0);
    return _.select(array, function(value){ return !_.include(values, value); });
  },
  
  // Produce a duplicate-free version of the array. If the array has already
  // been sorted, you have the option of using a faster algorithm.
  // 惟一的數組。有一個參數能夠選擇是否排序的數組，是的話會選擇最快的算法
  uniq : function(array, isSorted) {
    return _.inject(array, [], function(memo, el, i) {
      if (0 == i || (isSorted ? _.last(memo) != el : !_.include(memo, el))) memo.push(el);
      return memo;
    });
  },
  
  // Produce an array that contains every item shared between all the 
  // passed-in arrays.
  // 篩選多個元素數組的相同值
  intersect : function(array) {
    var rest = _.toArray(arguments).slice(1);
    // 得到其他多個參數
    // 最外面確定是一層篩選。
    // 裏面作篩選的條件
    return _.select(_.uniq(array), function(item) {
      return _.all(rest, function(other) { 
        // 目的在於取交集
        // 因此咱們使用外層的item 對比層的個個數組 據此咱們返回同時存在多個數組中的元素
        return _.indexOf(other, item) >= 0;
      });
    });
  },
  
  // Zip together multiple lists into a single array -- elements that share
  // an index go together.
  zip : function() {
    var args = _.toArray(arguments);
    var length = _.max(_.pluck(args, 'length'));
    // 返回最大數組的長度。
    var results = new Array(length);
    // 建立一個存放點
    for (var i=0; i<length; i++) results[i] = _.pluck(args, String(i));
    // 從對應數組中取出
    // 疑惑，這裏有一個小點。那便是當多個數組時，且多個數組長度不一致。會不會致使存入多個undefined值
    return results;
  },
  
  // If the browser doesn't supply us with indexOf (I'm looking at you, MSIE), 
  // we need this function. Return the position of the first occurence of an 
  // item in an array, or -1 if the item is not included in the array.
  // indexOf的profill
  // 先判斷是否支持了indexOf
  
  indexOf : function(array, item) {
    if (array.indexOf) return array.indexOf(item);
    var length = array.length;
    // 取長度
    for (i=0; i<length; i++) if (array[i] === item) return i;
    // 返回長度
    return -1;
    // 默認返回-1
  },
  
  /* ----------------------- Function Functions: -----------------------------*/
  
  // Create a function bound to a given object (assigning 'this', and arguments,
  // optionally). Binding with arguments is also known as 'curry'.
  
  bind : function(func, context) {
    if (!context) return func;
    // 判斷有否須要綁定上下文
    var args = _.toArray(arguments).slice(2);
    // 類數組轉數組 且截取除形參的部分
    return function() {
      // 這個arguments應該是再內層的arguments吧
      var a = args.concat(_.toArray(arguments));
      // 而後用apply 傳補全的上下層參數。
      // bind 方法就是返回一個綁定上下文的函數
      return func.apply(context, a);
    };
  },
  
  // Bind all of an object's methods to that object. Useful for ensuring that 
  // all callbacks defined on an object belong to it.
  // bind 多個
  bindAll : function() {
    var args = _.toArray(arguments);
    var context = args.pop();
    // 這裏得到一個上下文對象。
    _.each(args, function(methodName) {
      context[methodName] = _.bind(context[methodName], context);
    });
  },
  
  // Delays a function for the given number of milliseconds, and then calls
  // it with the arguments supplied.
  // 延遲一個數組的執行 能夠傳入一個數字當延遲毫秒數
  // 以提供的參數調用
  delay : function(func, wait) {
    var args = _.toArray(arguments).slice(2);
    // setTimeout作延遲
    return window.setTimeout(function(){ return func.apply(func, args); }, wait);
  },
  
  // Defers a function, scheduling it to run after the current call stack has 
  // cleared.
  defer : function(func) {
    return _.delay.apply(_, [func, 1].concat(_.toArray(arguments).slice(1)));
  },
  
  // Returns the first function passed as an argument to the second, 
  // allowing you to adjust arguments, run code before and after, and 
  // conditionally execute the original function.
  // 返回做爲參數傳遞給第二個的第一個函數，容許你調整參數，在先後運行代碼以及有條件地執行原始函數
  wrap : function(func, wrapper) {
    return function() {
      // 內層arguments 與第一個形參的函數所結合
      var args = [func].concat(_.toArray(arguments));
      // wrapper apply調用
      return wrapper.apply(wrapper, args);
    };
  },
  
  /* ------------------------- Object Functions: ---------------------------- */
  // 一下能夠很好的聯想到咱們的pair對象附加了key value值
  // Retrieve the names of an object's properties.
  keys : function(obj) {
    // 拿到對象中全部屬性爲key的值
    return _.pluck(obj, 'key');
  },
  
  // Retrieve the values of an object's properties.
  values : function(obj) {
    // 拿到對象中全部屬性爲value的值。
    return _.pluck(obj, 'value');
  },
  
  // Extend a given object with all of the properties in a source object.
  // 簡單的for in複製值，這是一層淺複製
  extend : function(destination, source) {
    for (var property in source) destination[property] = source[property];
    return destination;
  },
  
  // Create a (shallow-cloned) duplicate of an object.
  // 複製一層淺複製
  clone : function(obj) {
    return _.extend({}, obj);
  },
  
  // Perform a deep comparison to check if two objects are equal.
  // 深判斷兩個對象是否相等
  isEqual : function(a, b) {
    // Check object identity.
    // 查看數組引用是否一致
    if (a === b) return true;
    // Different types?
    // 是否爲相同類型
    var atype = typeof(a), btype = typeof(b);
    if (atype != btype) return false;
    // 簡單的==判斷
    // Basic equality test (watch out for coercions).
    if (a == b) return true;
    // 也許他們有本身的isEqual方法能夠調用
    // One of them implements an isEqual()?
    if (a.isEqual) return a.isEqual(b);
    // 判斷類型是否不爲對象
    // If a is not an object by this point, we can't handle it.
    if (atype !== 'object') return false;
    // 深層次比對他們的屬性個數
    // Nothing else worked, deep compare the contents.
    var aKeys = _.keys(a), bKeys = _.keys(b);
    // Different object sizes?
    if (aKeys.length != bKeys.length) return false;
    // Recursive comparison of contents.
    // 判斷屬性值
    for (var key in a) if (!_.isEqual(a[key], b[key])) return false;
    return true;
  },
  
  // Is a given value a DOM element?
  // 判斷是否爲Dom元素
  // 也能夠判斷instanceof HTMLElement
  isElement : function(obj) {
    return !!(obj && obj.nodeType == 1);
  },
  
  // Is a given value a real Array?
  // 判斷是否爲數組
  // 使用Object.prototype.toString
  isArray : function(obj) {
    return Object.prototype.toString.call(obj) == '[object Array]';
  },
  
  // Is a given value a Function?
  // 判斷是否爲函數
  isFunction : function(obj) {
    return typeof obj == 'function';
  },
  
  // Is a given variable undefined?
  // 判斷是否爲undefined
  isUndefined : function(obj) {
    return typeof obj == 'undefined';
  },
  
  /* -------------------------- Utility Functions: -------------------------- */
  
  // Generate a unique integer id (unique within the entire client session).
  // Useful for temporary DOM ids.

  /**
   * eg
   * var ids = [], i = 0;
     while(i++ < 100) ids.push(_.uniqueId());
     equals(_.uniq(ids).length, ids.length, 'can generate a globally-unique stream of ids');
   */
  uniqueId : function(prefix) {
    // ||0是一次快速將假值初始化爲0的操做
    var id = this._idCounter = (this._idCounter || 0) + 1;
    // 而後每次的累加。
    // 那麼則是不存在的數
    return prefix ? prefix + id : id;
  },
  
  // Javascript templating a-la ERB, pilfered from John Resig's 
  // "Secrets of the Javascript Ninja", page 83.
  // 忍者祕籍83頁？這麼真實的嗎
  template : function(str, data) {
    // 這是簡單地使用new Function來作的一個`模板引擎`
    // with能夠幫助咱們注入上下文對象。因此拼接通常選擇with
    // 固然還有一些過濾提取操做例如標誌位的<% %>提取替換
    var fn = new Function('obj', 
      'var p=[],print=function(){p.push.apply(p,arguments);};' +
      'with(obj){p.push(\'' +
      str
        .replace(/[\r\t\n]/g, " ") 
        .split("<%").join("\t") 
        .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
        .replace(/\t=(.*?)%>/g, "',$1,'") 
        .split("\t").join("');") 
        .split("%>").join("p.push('") 
        .split("\r").join("\\'") 
    + "');}return p.join('');");
    return data ? fn(data) : fn;  
  }
  
};