一、榫卯
榫卯（sǔn mǎo），是古代中國建築、家具及其它器械的主要結構方式，是在兩個構件上采用凹凸部位相結合的一種連接方式。
若榫卯使用得當，兩塊木結構之間就能嚴密扣合，達到“天衣無縫”的程度，並且不用釘子。
下面這張圖來自於山西懸空寺，屋檐下面的那些都是用榫卯做成的，沒有用一顆釘子。
二、JavaScript與榫卯
在開發頁面的時候，或多或少的要寫JavaScript，除了些業務邏輯的代碼外。
還有DOM操作，AJAX處理，事件綁定，實用功能，Promises/A+規范實現，樣式、集合、數組、函數、對象、時間、URL、動畫、模版、cookie等各種操作。
現在網上相關的開源庫很多，例如封裝DOM操作的，有Zepto、Sizzle引擎等，實用庫Underscore、Sugar等。
這些封裝好的庫使用起來方便兼容性好，但是有些時候我僅僅是需要使用里面的個別方法，例如做活動頁面。
就為了這幾個個別方法而把整個庫都引進來，有種殺雞用牛刀的感覺。
當看到下面那位非洲朋友用聖劍來切牛排，囧，瞬間就能體會那種感覺。
而如果想把里面的個別方法抽出來，又不能直接用，因為這些方法可能引用了庫中的私有方法屬性等，就好像建築里的釘子，需要釘子來銜接。
所以這個時候就需要使用自己封裝的函數，就好比榫卯，拿來即可用，而不需要特定的釘子。
三、構建榫卯結構
要想構建，最方便的還是要參考下現有的庫是如何做的，這樣能少走些彎路。
在Github上面看到了兩個頁面，專門記錄了各種類庫《Front-End-Develop-Guide》與《Awesome JavaScript》
有些時候也不用一定要自己寫，有相關的類庫就直接收錄進來，要用的時候就不用再到網上去各種搜索啦！
1）DOM選擇器
這是在平時開發頁面必用的，ES5規范出來后，定義了很多實用的方法，可以不再像以前那樣編寫大量的兼容代碼。
原生的“querySelectorAll”和“querySelector”非常強大，語法和JQuery中的選擇器大致一樣。
Sizzle也就是是jQuery的選擇器引擎，將近2000行的代碼，不過很多代碼是在兼容IE6、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。
我選擇庫都會選擇小巧、功能比較單一、而且不依賴第三方庫。
源碼看起來也能方便點，抽出代碼的時候也能少費點時間。
這里只是做個拋磚引玉，具體怎么構建可以根據實際情況來操作。
參考資料：