前言
這篇文章是為之後的underscore現版本的源碼做鋪墊，先感受下最先版本
- 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;
}
};
總結
- 後面的模板實現挺亮眼。
- try catch 設計each的跳出。
>>取半的快捷- 函數的複用。(有部分也許是不高效)
- 整個版本時間很前。所以我們可以從中看到一些現代api的影子，也許是在現代api中看到它們的影子。
- 源碼篇幅較少，加上註釋也不過400行左右。整篇閲讀下來也沒有很大的障礙，就是有複用性相對較高，但是對着test文件看看測試用例也就好了~~~
可以通過這些地方聯繫我
我的博客
我的郵箱:kang95630@gmail.com
