前端模块化、防抖和节流

待我称王封你为后i 2022-01-27 06:34 166阅读 0赞

# #

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

前端模块化进化史：

（１）在没有模块化的年代里，前端是把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ｓ的时刻，它就会将上一个定时器清掉。

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

发表评论取消回复

表情：

评论列表（有 0 条评论，166人围观）

还没有评论，来说两句吧...

相关阅读

相关防抖和节流

前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去...

梦里梦外;/ 2024年04月18日 21:02/ 0 赞/ 86 阅读

相关防抖和节流

防抖：debounce(不停滑动鼠标时，数字不会累加，当停止滑动，1000ms之后数字才会累加) let num = 1; let div= docu

秒速五厘米/ 2023年07月17日 02:55/ 0 赞/ 25 阅读

相关防抖和节流

之前代码：滑动右侧A-Z导航条 handlerTouchMove(e) { if (this.touchStatus) {

怼烎@/ 2023年02月23日 03:58/ 0 赞/ 27 阅读

相关防抖和节流

防抖是为了防止频繁触发的操作，在指定时间内我们让用户的行为只触发一次在第一次点击时/最后一次点击时（只能识别一次） function debounce(

约定不等于承诺〃/ 2023年01月08日 02:06/ 0 赞/ 159 阅读

相关防抖和节流

防抖（debounce）:当持续触发事件时，保证只执行最后一次事件处理函数 > 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。如鼠标移动事件onmousemo

àì夳堔傛蜴生んèń/ 2022年11月05日 08:32/ 0 赞/ 216 阅读

相关防抖和节流

防抖所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。触发高频事件后n秒内函数只会执行一次，如果n秒

待我称王封你为后i/ 2022年08月30日 11:37/ 0 赞/ 227 阅读

相关前端必备-防抖节流

文章目录前端必备-防抖节流前端必备-防抖节流防抖节流—优化思想 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

怼烎@/ 2022年08月29日 11:58/ 0 赞/ 149 阅读

相关防抖和节流

1. 防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 \ 思路：每次触发事件时都取消之前的延时调用方法 function

朱雀/ 2022年03月18日 01:44/ 0 赞/ 319 阅读

相关前端模块化、防抖和节流

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－前端模块化进化史：（１）在没有模块化的年代里，前端是把HTML cs

待我称王封你为后i/ 2022年01月27日 06:34/ 0 赞/ 167 阅读

相关防抖和节流

防抖和节流一、什么是防抖二、防抖使用场景 1.输入框是按键触发请求时三、什么是节流四、节流的使用场景 1.鼠标连续

快来打我*/ 2021年09月07日 06:13/ 0 赞/ 496 阅读