製造本身的榫卯

1、榫卯

榫卯（sǔn mǎo），是古代中國建築、傢俱及其它器械的主要結構方式，是在兩個構件上採用凹凸部位相結合的一種鏈接方式。

若榫卯使用得當，兩塊木結構之間就能嚴密扣合，達到「完美無缺」的程度，而且不用釘子。

下面這張圖來自於山西懸空寺，屋檐下面的那些都是用榫卯作成的，沒有用一顆釘子。

 

2、JavaScript與榫卯

在開發頁面的時候，或多或少的要寫JavaScript，除了些業務邏輯的代碼外。

還有DOM操做，AJAX處理，事件綁定，實用功能，Promises/A+規範實現，樣式、集合、數組、函數、對象、時間、URL、動畫、模版、cookie等各類操做。

如今網上相關的開源庫不少，例如封裝DOM操做的，有Zepto、Sizzle引擎等，實用庫Underscore、Sugar等。

 

這些封裝好的庫使用起來方便兼容性好，可是有些時候我僅僅是須要使用裏面的個別方法，例如作活動頁面。

就爲了這幾個個別方法而把整個庫都引進來，有種殺雞用牛刀的感受。

當看到下面那位非洲朋友用聖劍來切牛排，囧，瞬間就能體會那種感受。

而若是想把裏面的個別方法抽出來，又不能直接用，由於這些方法可能引用了庫中的私有方法屬性等，就好像建築裏的釘子，須要釘子來銜接。

因此這個時候就須要使用本身封裝的函數，就比如榫卯，拿來便可用，而不須要特定的釘子。

 

3、構建榫卯結構

要想構建，最方便的仍是要參考下現有的庫是如何作的，這樣能少走些彎路。

在Github上面看到了兩個頁面，專門記錄了各類類庫《Front-End-Develop-Guide》與《Awesome JavaScript》

有些時候也不用必定要本身寫，有相關的類庫就直接收錄進來，要用的時候就不用再到網上去各類搜索啦！

1）DOM選擇器

這是在平時開發頁面必用的，ES5規範出來後，定義了不少實用的方法，能夠再也不像之前那樣編寫大量的兼容代碼。

原生的「querySelectorAll」和「querySelector」很是強大，語法和JQuery中的選擇器大體同樣。

Sizzle也就是是jQuery的選擇器引擎，將近2000行的代碼，不過不少代碼是在兼容IE六、IE7等古老的PC瀏覽器，關於這個引擎能夠參考《jQuery中的Sizzle引擎分析》

我如今都是在移動端開發，移動端的瀏覽器都要高級些，因此我打算參考Zepto來封裝。

這個是針對移動端瀏覽器，而且是模塊化的，想參考裏面的3個模塊，event是事件模塊。

還看到兩個更小的庫，HTML和140 medley。

 

2）實用庫

實用庫我打算參考Underscore與Sugar，這兩個庫都有各自的主頁，分類也很清晰。

Underscore還有個帶註釋的源代碼頁面。

Underscore分爲Collection、Array、Function、Object、Utility幾大部分。

Sugar分爲Array、String、Number、Date、Object、Function、RegExp、Range幾大部分。

根據他們的分類，兩個庫之間有些地方應該還能互補一下。

 

3）其餘相關的庫

1. 對時間的各類操做，有兩個庫用的人蠻多，Datejs和moment。我是比較前者，代碼比較少，比較容易看源碼。

2. Promises/A+規範的實現，相關庫比較多，when.js、Zepto中的deferred.js還有promise-polyfill。若是對這個規範概念不是很清楚，能夠參考《Promises/A+規範的實現》

3. 模板喜歡用mustache，代碼簡潔，但功能不簡潔，用了之後就會知道很方便。

4. 本地存儲的封裝，能夠借鑑或直接引用store.js，代碼就100多行，徹底能看懂。

5. cookie的各類操做，能夠借鑑或直接引用js-cookie，源碼也是我喜歡的100多行。

6. 對URL的基本操做，能夠借鑑或直接引用domurl。

 

我選擇庫都會選擇小巧、功能比較單1、並且不依賴第三方庫。

源碼看起來也能方便點，抽出代碼的時候也能少費點時間。

這裏只是作個拋磚引玉，具體怎麼構建能夠根據實際狀況來操做。

 

參考資料：

Zepto源碼分析

前端開發指南

Awesome JavaScript