建站
咨詢
售后
建站咨詢
新聞中心
前言
終于，樓主的「Underscore 源碼解讀系列」underscore-analysis 即將進(jìn)入尾聲，關(guān)注下 timeline 會發(fā)現(xiàn)樓主最近加快了解讀速度。十一月，多事之秋，最近好多事情搞的樓主心力憔悴，身心俱疲，也想盡快把這個系列完結(jié)掉，也好了卻一件心事。
本文預(yù)計是解讀系列的倒數(shù)第二篇，***一篇那么顯然就是大總結(jié)了。樓主的 Underscore 系列解讀完整版地址https://github.com/hanzichi/u...
常規(guī)調(diào)用
之前寫的文章，關(guān)注點大多在具體的方法，具體的知識細(xì)節(jié)，也有讀者留言建議樓主講講整體架構(gòu)，這是必須會講的，只是樓主把它安排在了***，也就是本文，因為樓主覺得不掌握整體架構(gòu)對于具體方法的理解也是沒有大的問題的。
Underscore 大多數(shù)時候的調(diào)用形式為 _.funcName(xx, xx)，這也是 文檔中 的調(diào)用方式。
- _.each([1, 2, 3], alert);
最簡單的實現(xiàn)方式，我們可以把 _ 看做一個簡單的對象：
- var _ = {};
- _.each = function() {
- // ...
- };
在 JavaScript 中，一切皆對象，實際上，源碼中的 _ 變量是一個方法：
- var _ = function(obj) {
- if (obj instanceof _) return obj;
- if (!(this instanceof _)) return new _(obj);
- this._wrapped = obj;
- };
為什么會是方法?我們接下去看。
OOP
Underscore 支持 OOP 形式的調(diào)用：
- _([1, 2, 3]).each(alert);
這其實是非常經(jīng)典的「無 new 構(gòu)造」，_ 其實就是一個 構(gòu)造函數(shù)，_([1, 2, 3]) 的結(jié)果就是一個對象實例，該實例有個 _wrapped屬性，屬性值是 [1, 2, 3]。實例要調(diào)用 each 方法，其本身沒有這個方法，那么應(yīng)該來自原型鏈，也就是說 _.prototype 上應(yīng)該有這個方法，那么，方法是如何掛載上去的呢?
方法掛載
現(xiàn)在我們已經(jīng)明確以下兩點：
- _ 是一個函數(shù)(支持無 new 調(diào)用的構(gòu)造函數(shù))
- _ 的屬性有很多方法，比如 _.each，_.template 等等
我們的目標(biāo)是讓 _ 的構(gòu)造實例也能調(diào)用這些方法。仔細(xì)想想，其實也不難，我們可以遍歷 _ 上的屬性，如果屬性值類型是函數(shù)，那么就將函數(shù)掛到 _ 的原型鏈上去。
源碼中用來完成這件事的是 _.mixin 方法：
- // Add your own custom functions to the Underscore object.
- // 可向 underscore 函數(shù)庫擴(kuò)展自己的方法
- // obj 參數(shù)必須是一個對象（JavaScript 中一切皆對象）
- // 且自己的方法定義在 obj 的屬性上
- // 如 obj.myFunc = function() {...}
- // 形如 {myFunc: function(){}}
- // 之后便可使用如下: _.myFunc(..) 或者 OOP _(..).myFunc(..)
- _.mixin = function(obj) {
- // 遍歷 obj 的 key，將方法掛載到 Underscore 上
- // 其實是將方法淺拷貝到 _.prototype 上
- _.each(_.functions(obj), function(name) {
- // 直接把方法掛載到 _[name] 上
- // 調(diào)用類似 _.myFunc([1, 2, 3], ..)
- var func = _[name] = obj[name];
- // 淺拷貝
- // 將 name 方法掛載到 _ 對象的原型鏈上，使之能 OOP 調(diào)用
- _.prototype[name] = function() {
- // ***個參數(shù)
- var args = [this._wrapped];
- // arguments 為 name 方法需要的其他參數(shù)
- push.apply(args, arguments);
- // 執(zhí)行 func 方法
- // 支持鏈?zhǔn)讲僮?nbsp;
- return result(this, func.apply(_, args));
- };
- });
- };
- // Add all of the Underscore functions to the wrapper object.
- // 將前面定義的 underscore 方法添加給包裝過的對象
- // 即添加到 _.prototype 中
- // 使 underscore 支持面向?qū)ο笮问降恼{(diào)用
- _.mixin(_);
_.mixin 方法可以向 Underscore 庫增加自己定義的方法：
- _.mixin({
- capitalize: function(string) {
- return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
- }
- });
- _("fabio").capitalize();
- => "Fabio"
同時，Underscore 也加入了一些 Array 原生的方法：
- // Add all mutator Array functions to the wrapper.
- // 將 Array 原型鏈上有的方法都添加到 underscore 中
- _.each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
- var method = ArrayProto[name];
- _.prototype[name] = function() {
- var obj = this._wrapped;
- method.apply(obj, arguments);
- if ((name === 'shift' || name === 'splice') && obj.length === 0)
- delete obj[0];
- // 支持鏈?zhǔn)讲僮?nbsp;
- return result(this, obj);
- };
- });
- // Add all accessor Array functions to the wrapper.
- // 添加 concat、join、slice 等數(shù)組原生方法給 Underscore
- _.each(['concat', 'join', 'slice'], function(name) {
- var method = ArrayProto[name];
- _.prototype[name] = function() {
- return result(this, method.apply(this._wrapped, arguments));
- };
- });
鏈?zhǔn)秸{(diào)用
Underscore 也支持鏈?zhǔn)秸{(diào)用：
- // 非 OOP 鏈?zhǔn)秸{(diào)用
- _.chain([1, 2, 3])
- .map(function(a) {return a * 2;})
- .reverse()
- .value(); // [6, 4, 2]
- // OOP 鏈?zhǔn)秸{(diào)用
- _([1, 2, 3])
- .chain()
- .map(function(a){return a * 2;})
- .first()
- .value(); // 2
乍一看似乎有 OOP 和非 OOP 兩種鏈?zhǔn)秸{(diào)用形式，其實只是一種，_.chain([1, 2, 3]) 和 _([1, 2, 3]).chain() 的結(jié)果是一樣的。如何實現(xiàn)的?我們深入 chain 方法看下。
_.chain = function(obj) {
- _.chain = function(obj) {
- // 無論是否 OOP 調(diào)用，都會轉(zhuǎn)為 OOP 形式
- // 并且給新的構(gòu)造對象添加了一個 _chain 屬性
- var instance = _(obj);
- // 標(biāo)記是否使用鏈?zhǔn)讲僮?nbsp;
- instance._chain = true;
- // 返回 OOP 對象
- // 可以看到該 instance 對象除了多了個 _chain 屬性
- // 其他的和直接 _(obj) 的結(jié)果一樣
- return instance;
- };
我們看下 _.chain([1, 2, 3]) 的結(jié)果，將參數(shù)代入函數(shù)中，其實就是對參數(shù)進(jìn)行無 new 構(gòu)造，然后返回實例，只是實例多了個_chain 屬性，其他的和直接 _([1, 2, 3]) 一模一樣。再來看 _([1, 2, 3]).chain()，_([1, 2, 3]) 返回構(gòu)造實例，該實例有chain 方法，調(diào)用方法，為實例添加 _chain 屬性，返回該實例對象。所以，這兩者效果是一致的，結(jié)果都是轉(zhuǎn)為了 OOP 的形式。
說了這么多，似乎還沒講到正題上，它是如何「鏈」下去的?我們以如下代碼為例：
- _([1, 2, 3])
- .chain()
- .map(function(a){return a * 2;})
- .first()
- .value(); // 2
當(dāng)調(diào)用 map 方法的時候，實際上可能會有返回值。我們看下 _.mixin 源碼：
- // 執(zhí)行 func 方法
- // 支持鏈?zhǔn)讲僮?nbsp;
- return result(this, func.apply(_, args));
result 是一個重要的內(nèi)部幫助函數(shù)(Helper function )：
- // Helper function to continue chaining intermediate results.
- // 一個幫助方法(Helper function)
- var result = function(instance, obj) {
- // 如果需要鏈?zhǔn)讲僮?，則對 obj 運行 chain 方法，使得可以繼續(xù)后續(xù)的鏈?zhǔn)讲僮?nbsp;
- // 如果不需要，直接返回 obj
- return instance._chain ? _(obj).chain() : obj;
- };
如果需要鏈?zhǔn)讲僮?實例會有帶有 _chain 屬性)，則對運算結(jié)果調(diào)用 chain 函數(shù)，使之可以繼續(xù)鏈?zhǔn)秸{(diào)用。
小結(jié)
Underscore 整體架構(gòu)，或者說是基礎(chǔ)實現(xiàn)大概就是這個樣子，代碼部分就講到這了，接下去系列解讀***一篇，講講這段時間(幾乎也是歷時半年了)的一些心得體會吧，沒錢的就捧個人場吧!
網(wǎng)頁題目：Underscore整體架構(gòu)淺析
文章路徑：http://www.dlmjj.cn/article/dpjgjos.html
