制造自己的榫卯
最后更新于：2022-04-02 06:12:03
## 一、榫卯
榫卯（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)，欢迎阅读。
';