前端模块化、防抖和节流

 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

前端模块化进化史：

（１）在没有模块化的年代里，前端是把HTML css javascript写到一个ＨＴＭＬ文件里面，这样的话代码耦合度，项目维护起来非常困难。

（２）把css javascript代码分开写，通过script、link标签的方式去导入css、javascript文件，缺点就是会发很多的二次请求。

（３）jquery时代：

jquery诞生的主要目的：第一就是简化ＤＯＭ操作，第二就是减少操作过程中跨浏览器的问题

jquery虽然明面上没有实现模块化，但是底层封装了好多插件，在实现插件的过程中其实就是在朝着模块化前进。

（４）CommonJS规范，主要内容就是module对象，它有一个exports属性，通过module.exports属性就可以对外暴露数据，通过require命令的方式去读入和执行一个js文件。缺点：CommonJS规范是同步加载的，也就是说，只有加载完成，才能执行后面的操作。由于Node.js主要用于服务端编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用服务端编程。

（５）为了实现非同步加载，就有了AMD规范：AMD 是 RequireJS 在推广过程中对模块定义的规范化产出，

主要内容就是定义了 define 函数该如何书写，只要按照这个规范去书写模块和依赖，RequireJS 就能正确进行解析。

缺点：AMD规范开发成本高，代码的阅读和书写比较困难，模块定义方式复杂。

（６）CMD规范：CMD 其实就是 SeaJS 在推广过程中对模块定义的规范化产出。

主要内容就是如何定义模块，如何引入模块，如何导出模块，只要按照这个规范去书写代码，SeaJS 就能正确的进行解析。

缺点：AMD规范和CMD规范依赖SPM打包，模块加载逻辑重。

AMD和CMD的区别：

 （1）AMD的依赖必须一开始就写好，CMD的依赖可以就近书写。

 （2）对于依赖的模块，AMD是提前执行，CMD是延迟执行。 也就是说AMD是将需要使用的模块先加载完再执行代码，CMD是在require的时候才去加载模块文件，加载完再接着执行。

    (3)    AMD和CMD都是基于浏览器端的模块化解决方案

（７）es６规范：ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系、以及输入和输出的变量。

es６是es5的加强版，所以ES6 是在语言标准的层面上，实现了模块功能，而且实现得比AMD和ＣＭＤ简单，成为了浏览器和服务器通用的模块解决方案。

至此：前端模块化已经进入了一个比较良好的阶段

但是这个时候的各种类型的文件，比如像.jsx文件、.cass文件、.css文件、以及一些图片等静态资源在项目上线的过程中都是需要人工去打包的，成本比较高。

（８）：webpack的时代：Webpack是一个模块打包器，它可以递归的打包项目中的所有模块，最后生成打包后的文件。现在比较流行的框架，不管是facebook出版的react 脚手架还是说由玉溪团队出版的vue cli，都是基于webpack构建的。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

防抖和节流

防抖：在规定时间内只能执行一次回调函数，如果在规定时间内又出触发了这个事件，则会清除之前定时器。

比如：input输入框内输入一段较长的文本，10ｓ设置了一个定时器，可能输到中间的时候，时间到了，就会触发定时器中的回调函数。当继续输入，再次到了10ｓ的时刻，它就会将上一个定时器清掉。

节流：当用户频繁地点击某个按钮时，没有到达规定时间，则什么都不做，不会重置定时器，不会触发对应事件；到达了规定时间，才会触发对应事件