## 一、榫卯   榫卯（sǔn mǎo），是古代中國建筑、家具及其它器械的主要結構方式，是在兩個構件上采用凹凸部位相結合的一種連接方式。   若榫卯使用得當，兩塊木結構之間就能嚴密扣合，達到“天衣無縫”的程度，并且不用釘子。 :-:    下面這張圖來自于山西懸空寺，屋檐下面的那些都是用榫卯做成的，沒有用一顆釘子。 :-:  ## 二、JavaScript與榫卯   在開發頁面的時候，或多或少的要寫JavaScript，除了些業務邏輯的代碼外。   還有DOM操作，AJAX處理，事件綁定，實用功能，Promises/A+規范實現，樣式、集合、數組、函數、對象、時間、URL、動畫、模版、cookie等各種操作。   現在網上相關的開源庫很多，例如封裝DOM操作的，有[Zepto](https://github.com/madrobby/zepto)、[Sizzle引擎](https://github.com/jquery/sizzle)等，實用庫[Underscore](http://underscorejs.org/)、[Sugar](http://sugarjs.com/)等。 :-:    這些封裝好的庫使用起來方便兼容性好，但是有些時候我僅僅是需要使用里面的個別方法，例如做活動頁面。   就為了這幾個個別方法而把整個庫都引進來，有種殺雞用牛刀的感覺。   當看到下面那位非洲朋友用圣劍來切牛排，囧，瞬間就能體會那種感覺。 :-:    而如果想把里面的個別方法抽出來，又不能直接用，因為這些方法可能引用了庫中的私有方法屬性等，就好像建筑里的釘子，需要釘子來銜接。   所以這個時候就需要使用自己封裝的函數，就好比榫卯，拿來即可用，而不需要特定的釘子。 ## 三、構建榫卯結構   要想構建，最方便的還是要參考下現有的庫是如何做的，這樣能少走些彎路。   在Github上面看到了兩個頁面，專門記錄了各種類庫《[Front-End-Develop-Guide](https://github.com/icepy/Front-End-Develop-Guide)》與《[Awesome JavaScript](https://github.com/sorrycc/awesome-javascript)》   有些時候也不用一定要自己寫，有相關的類庫就直接收錄進來，要用的時候就不用再到網上去各種搜索啦！ **1）DOM選擇器**   這是在平時開發頁面必用的，ES5規范出來后，定義了很多實用的方法，可以不再像以前那樣編寫大量的兼容代碼。   原生的“[querySelectorAll](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/querySelectorAll)”和“[querySelector](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector)”非常強大，語法和JQuery中的選擇器大致一樣。 [Sizzle](https://sizzlejs.com/)也就是是[jQuery](https://jquery.com/)的選擇器引擎，將近2000行的代碼，不過很多代碼是在兼容IE6、IE7等古老的PC瀏覽器，關于這個引擎可以參考《[jQuery中的Sizzle引擎分析](http://www.cnblogs.com/strick/p/5078435.html)》   我現在都是在移動端開發，移動端的瀏覽器都要高級些，所以我打算參考[Zepto](https://github.com/madrobby/zepto)來封裝。   這個是針對移動端瀏覽器，并且是模塊化的，想參考里面的3個模塊，event是事件模塊。 :-:    還看到兩個更小的庫，[HTML](http://nbubna.github.io/HTML/)和[140 medley](https://github.com/honza/140medley)。 **2）實用庫**   實用庫我打算參考[Underscore](http://underscorejs.org/)與[Sugar](http://sugarjs.com/)，這兩個庫都有各自的主頁，分類也很清晰。   Underscore還有個帶注釋的[源代碼頁面](http://underscorejs.org/docs/underscore.html)。   Underscore分為Collection、Array、Function、Object、Utility幾大部分。   Sugar分為Array、String、Number、Date、Object、Function、RegExp、Range幾大部分。   根據他們的分類，兩個庫之間有些地方應該還能互補一下。 :-:  **3）其他相關的庫** 1. 對時間的各種操作，有兩個庫用的人蠻多，[Datejs](http://www.datejs.com/)和[moment](http://momentjs.com/)。我是比較前者，代碼比較少，比較容易看源碼。 2. Promises/A+規范的實現，相關庫比較多，[when.js](https://github.com/cujojs/when)、[Zepto中的deferred.js](https://github.com/madrobby/zepto/blob/master/src/deferred.js)還有[promise-polyfill](https://github.com/taylorhakes/promise-polyfill)。如果對這個規范概念不是很清楚，可以參考《[Promises/A+規范的實現](http://www.cnblogs.com/strick/p/5092092.html)》 3. 模板喜歡用[mustache](https://github.com/janl/mustache.js)，代碼簡潔，但功能不簡潔，用了以后就會知道很方便。 4. 本地存儲的封裝，可以借鑒或直接引用[store.js](https://github.com/marcuswestin/store.js)，代碼就100多行，完全能看懂。 5. cookie的各種操作，可以借鑒或直接引用[js-cookie](https://github.com/js-cookie/js-cookie)，源碼也是我喜歡的100多行。 6. 對URL的基本操作，可以借鑒或直接引用[domurl](https://github.com/Mikhus/domurl)。   我選擇庫都會選擇小巧、功能比較單一、而且不依賴第三方庫。   源碼看起來也能方便點，抽出代碼的時候也能少費點時間。   這里只是做個拋磚引玉，具體怎么構建可以根據實際情況來操作。 ***** 參考資料： [Zepto源碼分析](https://github.com/mominger/blog) [前端開發指南](https://github.com/icepy/Front-End-Develop-Guide) [Awesome JavaScript](https://github.com/sorrycc/awesome-javascript) ***** > 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。