摘要：前面的的目的在于利用自定義拋出錯(cuò)誤令遍歷停止如果是數(shù)組直接過濾輸出不是數(shù)組遍歷操作壓入數(shù)組返回有點(diǎn)像，過濾符合條件的注意感嘆號(hào)取反有點(diǎn)像設(shè)置默認(rèn)迭代器判斷是否存在即需要所有元素都滿足迭代條件。

這篇文章是為之后的underscore現(xiàn)版本的源碼做鋪墊，先感受下最先版本

0.1.0版本足夠小

這個(gè)版本已經(jīng)有將近小10年的歷史了

還是有一些不錯(cuò)的地方。

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: ---------------------------*/
  // 集合函數(shù)
  // 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優(yōu)先選擇forEach
        obj.forEach(iterator, context);
      } else if (obj.length) {
        // 使用自定義迭代器迭代
        for (var i=0; i= result.computed) result = {value : value, computed : computed};
      // 對(duì)初始化以及每一次判斷computed大于當(dāng)前值更新
    });
    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) {
    // 根據(jù)對(duì)象的一些值進(jìn)行排序
    // 首先我們只要關(guān)注每個(gè)函數(shù)的目的即可
    // map一次遍歷，返回多個(gè)對(duì)象數(shù)組。然后根據(jù)數(shù)組對(duì)象排序
    // 并且對(duì)象均有值為criteria表示我們迭代函數(shù)的值(就是根據(jù)什么排序)
    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函數(shù)的一層打包
  },
  
  // Use a comparator function to figure out at what index an object should
  // be inserted so as to maintain order. Uses binary search.
  // 這是利用二分查找吧
  // 利用二分查找找出元素應(yīng)該插入到哪個(gè)位置中
  sortedIndex : function(array, obj, iterator) {
    iterator = iterator || function(val) { return val; };
    // 初始化一個(gè)迭代器
    var low = 0, high = array.length;//不嚴(yán)謹(jǐn)直接去length
    // 初始化高低位
    // 
    while (low < high) {
      var mid = (low + high) >> 1;
      // 對(duì)中位取半(important快捷方法)
      iterator(array[mid]) < iterator(obj) ? low = mid + 1 : high = mid;
    }
    return low;
  },
  
  // Convert anything iterable into a real, live array.
  // 轉(zhuǎn)換數(shù)組(轉(zhuǎn)換一切可迭代的)
  toArray : function(iterable) {
    if (!iterable) return []; //為假值直接返回[]
    if (_.isArray(iterable)) return iterable; //判斷是否為數(shù)組
    return _.map(iterable, function(val){ return val; });//如果為對(duì)象的話，利用map轉(zhuǎn)成數(shù)組
  },
  
  // Return the number of elements in an object.
  // 返回對(duì)象的元素?cái)?shù)量
  size : function(obj) {
    return _.toArray(obj).length;
  },
  
  /*-------------------------- Array Functions: ------------------------------*/
  
  // Get the first element of an array.
  // 返回?cái)?shù)組第一個(gè)元素
  first : function(array) {
    return array[0];
  },
  
  // Get the last element of an array.
  // 返回?cái)?shù)組最后一個(gè)元素
  last : function(array) {
    return array[array.length - 1];
  },
  
  // Trim out all falsy values from an array.
  //去除假值的數(shù)組元素
  //需要傳入一個(gè)操作函數(shù) false值在兩次取反會(huì)被去掉
  compact : function(array) {
    return _.select(array, function(value){ return !!value; });
  },
  
  // Return a completely flattened version of an array.
  //多維數(shù)組返回一個(gè)一維數(shù)組
  // 數(shù)組扁平化
  // 開始展現(xiàn)出函數(shù)式編程的靈活性了
  flatten : function(array) {
    return _.inject(array, [], function(memo, value) {
      // 這邊如果還是數(shù)組的話進(jìn)行一個(gè)遞歸的扁平
      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).
  // 對(duì)傳入的數(shù)組進(jìn)行篩選
  // 這里有一個(gè)點(diǎn)，我們?cè)趥鲄⑿螀⒍x了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.
  // 唯一的數(shù)組。有一個(gè)參數(shù)可以選擇是否排序的數(shù)組，是的話會(huì)選擇最快的算法
  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.
  // 篩選多個(gè)元素?cái)?shù)組的相同值
  intersect : function(array) {
    var rest = _.toArray(arguments).slice(1);
    // 獲得其余多個(gè)參數(shù)
    // 最外面肯定是一層篩選。
    // 里面做篩選的條件
    return _.select(_.uniq(array), function(item) {
      return _.all(rest, function(other) { 
        // 目的在于取交集
        // 所以我們使用外層的item 對(duì)比層的個(gè)個(gè)數(shù)組 據(jù)此我們返回同時(shí)存在多個(gè)數(shù)組中的元素
        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"));
    // 返回最大數(shù)組的長(zhǎng)度。
    var results = new Array(length);
    // 創(chuàng)建一個(gè)存放點(diǎn)
    for (var i=0; i提取替換
    var fn = new Function("obj", 
      "var p=[],print=function(){p.push.apply(p,arguments);};" +
      "with(obj){p.push("" +
      str
        .replace(/[
	
]/g, " ") 
        .split("<%").join("	") 
        .replace(/((^|%>)[^	]*)"/g, "$1
") 
        .replace(/	=(.*?)%>/g, "",$1,"") 
        .split("	").join("");") 
        .split("%>").join("p.push("") 
        .split("
").join(""") 
    + "");}return p.join("");");
    return data ? fn(data) : fn;  
  }
  
};

后面的模板實(shí)現(xiàn)挺亮眼。

try catch 設(shè)計(jì)each的跳出。

>> 取半的快捷

函數(shù)的復(fù)用。(有部分也許是不高效)

整個(gè)版本時(shí)間很前。所以我們可以從中看到一些現(xiàn)代api的影子，也許是在現(xiàn)代api中看到它們的影子。

源碼篇幅較少，加上注釋也不過400行左右。整篇閱讀下來也沒有很大的障礙，就是有復(fù)用性相對(duì)較高，但是對(duì)著test文件看看測(cè)試用例也就好了~~~

我的博客
我的郵箱:kang95630@gmail.com