偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Underscore整體架構(gòu)淺析

開發(fā) 架構(gòu)
之前寫的文章,關(guān)注點(diǎn)大多在具體的方法,具體的知識細(xì)節(jié),也有讀者留言建議樓主講講整體架構(gòu),這是必須會講的,只是樓主把它安排在了最后,也就是本文,因?yàn)闃侵饔X得不掌握整體架構(gòu)對于具體方法的理解也是沒有大的問題的。Underscore 大多數(shù)時(shí)候的調(diào)用形式為 _.funcName(xx, xx),這也是 文檔中 的調(diào)用方式。

[[175426]]

前言

終于,樓主的「Underscore 源碼解讀系列」underscore-analysis 即將進(jìn)入尾聲,關(guān)注下 timeline 會發(fā)現(xiàn)樓主最近加快了解讀速度。十一月,多事之秋,最近好多事情搞的樓主心力憔悴,身心俱疲,也想盡快把這個(gè)系列完結(jié)掉,也好了卻一件心事。

本文預(yù)計(jì)是解讀系列的倒數(shù)第二篇,***一篇那么顯然就是大總結(jié)了。樓主的 Underscore 系列解讀完整版地址https://github.com/hanzichi/u...

常規(guī)調(diào)用

之前寫的文章,關(guān)注點(diǎn)大多在具體的方法,具體的知識細(xì)節(jié),也有讀者留言建議樓主講講整體架構(gòu),這是必須會講的,只是樓主把它安排在了***,也就是本文,因?yàn)闃侵饔X得不掌握整體架構(gòu)對于具體方法的理解也是沒有大的問題的。

Underscore 大多數(shù)時(shí)候的調(diào)用形式為 _.funcName(xx, xx),這也是 文檔中 的調(diào)用方式。 

  1. _.each([1, 2, 3], alert); 

最簡單的實(shí)現(xiàn)方式,我們可以把 _ 看做一個(gè)簡單的對象:

  1. var _ = {}; 
  2. _.each = function() { 
  3.   // ... 
  4. };  

在 JavaScript 中,一切皆對象,實(shí)際上,源碼中的 _ 變量是一個(gè)方法:

  1. var _ = function(obj) { 
  2.   if (obj instanceof _) return obj; 
  3.   if (!(this instanceof _)) return new _(obj); 
  4.   this._wrapped = obj; 
  5. };  

為什么會是方法?我們接下去看。

OOP

Underscore 支持 OOP 形式的調(diào)用:

  1. _([1, 2, 3]).each(alert); 

這其實(shí)是非常經(jīng)典的「無 new 構(gòu)造」,_ 其實(shí)就是一個(gè) 構(gòu)造函數(shù),_([1, 2, 3]) 的結(jié)果就是一個(gè)對象實(shí)例,該實(shí)例有個(gè) _wrapped屬性,屬性值是 [1, 2, 3]。實(shí)例要調(diào)用 each 方法,其本身沒有這個(gè)方法,那么應(yīng)該來自原型鏈,也就是說 _.prototype 上應(yīng)該有這個(gè)方法,那么,方法是如何掛載上去的呢?

方法掛載

現(xiàn)在我們已經(jīng)明確以下兩點(diǎn):

  1. _ 是一個(gè)函數(shù)(支持無 new 調(diào)用的構(gòu)造函數(shù))
  2. _ 的屬性有很多方法,比如 _.each,_.template 等等

我們的目標(biāo)是讓 _ 的構(gòu)造實(shí)例也能調(diào)用這些方法。仔細(xì)想想,其實(shí)也不難,我們可以遍歷 _ 上的屬性,如果屬性值類型是函數(shù),那么就將函數(shù)掛到 _ 的原型鏈上去。

源碼中用來完成這件事的是 _.mixin 方法:

  1. // Add your own custom functions to the Underscore object. 
  2. // 可向 underscore 函數(shù)庫擴(kuò)展自己的方法 
  3. // obj 參數(shù)必須是一個(gè)對象(JavaScript 中一切皆對象) 
  4. // 且自己的方法定義在 obj 的屬性上 
  5. // 如 obj.myFunc = function() {...} 
  6. // 形如 {myFunc: function(){}} 
  7. // 之后便可使用如下: _.myFunc(..) 或者 OOP _(..).myFunc(..) 
  8. _.mixin = function(obj) { 
  9.   // 遍歷 obj 的 key,將方法掛載到 Underscore 上 
  10.   // 其實(shí)是將方法淺拷貝到 _.prototype 上 
  11.   _.each(_.functions(obj), function(name) { 
  12.     // 直接把方法掛載到 _[name] 上 
  13.     // 調(diào)用類似 _.myFunc([1, 2, 3], ..) 
  14.     var func = _[name] = obj[name]; 
  15.  
  16.     // 淺拷貝 
  17.     // 將 name 方法掛載到 _ 對象的原型鏈上,使之能 OOP 調(diào)用 
  18.     _.prototype[name] = function() { 
  19.       // ***個(gè)參數(shù) 
  20.       var args = [this._wrapped]; 
  21.  
  22.       // arguments 為 name 方法需要的其他參數(shù) 
  23.       push.apply(args, arguments); 
  24.       // 執(zhí)行 func 方法 
  25.       // 支持鏈?zhǔn)讲僮?nbsp;
  26.       return result(this, func.apply(_, args)); 
  27.     }; 
  28.   }); 
  29. }; 
  30.  
  31. // Add all of the Underscore functions to the wrapper object. 
  32. // 將前面定義的 underscore 方法添加給包裝過的對象 
  33. // 即添加到 _.prototype 中 
  34. // 使 underscore 支持面向?qū)ο笮问降恼{(diào)用 
  35. _.mixin(_);  

_.mixin 方法可以向 Underscore 庫增加自己定義的方法:

  1. _.mixin({ 
  2.   capitalize: function(string) { 
  3.     return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase(); 
  4.   } 
  5. }); 
  6. _("fabio").capitalize(); 
  7. => "Fabio"  

同時(shí),Underscore 也加入了一些 Array 原生的方法:

  1. // Add all mutator Array functions to the wrapper. 
  2. // 將 Array 原型鏈上有的方法都添加到 underscore 中 
  3. _.each(['pop''push''reverse''shift''sort''splice''unshift'], function(name) { 
  4.   var method = ArrayProto[name]; 
  5.   _.prototype[name] = function() { 
  6.     var obj = this._wrapped; 
  7.     method.apply(obj, arguments); 
  8.  
  9.     if ((name === 'shift' || name === 'splice') && obj.length === 0) 
  10.       delete obj[0]; 
  11.  
  12.     // 支持鏈?zhǔn)讲僮?nbsp;
  13.     return result(this, obj); 
  14.   }; 
  15. }); 
  16.  
  17. // Add all accessor Array functions to the wrapper. 
  18. // 添加 concat、join、slice 等數(shù)組原生方法給 Underscore 
  19. _.each(['concat''join''slice'], function(name) { 
  20.   var method = ArrayProto[name]; 
  21.   _.prototype[name] = function() { 
  22.     return result(this, method.apply(this._wrapped, arguments)); 
  23.   }; 
  24. });  

鏈?zhǔn)秸{(diào)用

Underscore 也支持鏈?zhǔn)秸{(diào)用:

  1. // 非 OOP 鏈?zhǔn)秸{(diào)用 
  2. _.chain([1, 2, 3]) 
  3.   .map(function(a) {return a * 2;}) 
  4.   .reverse() 
  5.   .value(); // [6, 4, 2] 
  6.  
  7. // OOP 鏈?zhǔn)秸{(diào)用 
  8. _([1, 2, 3]) 
  9.   .chain() 
  10.   .map(function(a){return a * 2;}) 
  11.   .first() 
  12.   .value(); // 2  

乍一看似乎有 OOP 和非 OOP 兩種鏈?zhǔn)秸{(diào)用形式,其實(shí)只是一種,_.chain([1, 2, 3]) 和 _([1, 2, 3]).chain() 的結(jié)果是一樣的。如何實(shí)現(xiàn)的?我們深入 chain 方法看下。

_.chain = function(obj) {

  1. _.chain = function(obj) { 
  2.   // 無論是否 OOP 調(diào)用,都會轉(zhuǎn)為 OOP 形式 
  3.   // 并且給新的構(gòu)造對象添加了一個(gè) _chain 屬性 
  4.   var instance = _(obj); 
  5.  
  6.   // 標(biāo)記是否使用鏈?zhǔn)讲僮?nbsp;
  7.   instance._chain = true
  8.  
  9.   // 返回 OOP 對象 
  10.   // 可以看到該 instance 對象除了多了個(gè) _chain 屬性 
  11.   // 其他的和直接 _(obj) 的結(jié)果一樣 
  12.   return instance; 
  13. };  

我們看下 _.chain([1, 2, 3]) 的結(jié)果,將參數(shù)代入函數(shù)中,其實(shí)就是對參數(shù)進(jìn)行無 new 構(gòu)造,然后返回實(shí)例,只是實(shí)例多了個(gè)_chain 屬性,其他的和直接 _([1, 2, 3]) 一模一樣。再來看 _([1, 2, 3]).chain(),_([1, 2, 3]) 返回構(gòu)造實(shí)例,該實(shí)例有chain 方法,調(diào)用方法,為實(shí)例添加 _chain 屬性,返回該實(shí)例對象。所以,這兩者效果是一致的,結(jié)果都是轉(zhuǎn)為了 OOP 的形式。

說了這么多,似乎還沒講到正題上,它是如何「鏈」下去的?我們以如下代碼為例:

  1. _([1, 2, 3]) 
  2.   .chain() 
  3.   .map(function(a){return a * 2;}) 
  4.   .first() 
  5.   .value(); // 2  

當(dāng)調(diào)用 map 方法的時(shí)候,實(shí)際上可能會有返回值。我們看下 _.mixin 源碼:

  1. // 執(zhí)行 func 方法 
  2. // 支持鏈?zhǔn)讲僮?nbsp;
  3. return result(this, func.apply(_, args));  

result 是一個(gè)重要的內(nèi)部幫助函數(shù)(Helper function ):

  1. // Helper function to continue chaining intermediate results. 
  2. // 一個(gè)幫助方法(Helper function
  3. var result = function(instance, obj) { 
  4. // 如果需要鏈?zhǔn)讲僮?,則對 obj 運(yùn)行 chain 方法,使得可以繼續(xù)后續(xù)的鏈?zhǔn)讲僮?nbsp;
  5. // 如果不需要,直接返回 obj 
  6. return instance._chain ? _(obj).chain() : obj; 
  7. };  

如果需要鏈?zhǔn)讲僮?實(shí)例會有帶有 _chain 屬性),則對運(yùn)算結(jié)果調(diào)用 chain 函數(shù),使之可以繼續(xù)鏈?zhǔn)秸{(diào)用。

小結(jié)

Underscore 整體架構(gòu),或者說是基礎(chǔ)實(shí)現(xiàn)大概就是這個(gè)樣子,代碼部分就講到這了,接下去系列解讀***一篇,講講這段時(shí)間(幾乎也是歷時(shí)半年了)的一些心得體會吧,沒錢的就捧個(gè)人場吧!

責(zé)任編輯:龐桂玉 來源: segmentfault
相關(guān)推薦

2017-07-17 11:52:54

jQuery源碼分析前端框架類庫

2017-02-27 09:21:23

Kubernetes架構(gòu)service

2009-06-24 14:25:13

JSF整體架構(gòu)

2009-09-21 12:50:34

Hibernate架構(gòu)

2016-11-25 13:14:50

Flume架構(gòu)源碼

2017-02-27 09:03:37

Mesos架構(gòu)源碼

2019-09-25 09:28:54

Linux系統(tǒng)架構(gòu)

2016-10-09 14:48:14

Linux整體架構(gòu)跳板機(jī)

2021-08-10 18:23:38

架構(gòu)Flink雙維度

2017-04-14 15:42:14

2024-08-26 10:31:23

2020-03-16 08:55:34

云架構(gòu)SLA云服務(wù)

2015-04-27 14:42:24

技術(shù)架構(gòu)服務(wù)器性能

2017-12-12 14:26:16

數(shù)據(jù)庫PostgreSQL邏輯優(yōu)化

2011-08-04 08:52:08

架構(gòu)

2015-07-01 14:24:29

開源云平臺CloudStack

2021-06-10 10:51:27

程序基礎(chǔ)架構(gòu)

2013-06-20 10:28:39

MVVM框架avalon架構(gòu)

2010-05-25 17:35:18

IT架構(gòu)

2018-03-08 08:53:10

云計(jì)算架構(gòu)服務(wù)器
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號