第三方库与工程化学习指导
# 事件循环
1、javascript是一种单线程的语言，意味着，它只有一个主线程，这个主线程就是浏览器的渲染主线程，而这个渲染主线程承担了很多工作，渲染页面，执行js等等都在其中运行。如果说，渲染主线程上执行了一个长时间的任务，那么页面可能就会被锁定，无法响应用户的任何操作，为了避免这个情况，才有了事件循环
2、同步和异步，事件循环的基本思想，就是将任务分成两类，同步和异步任务。同步任务在主线程执行，异步任务(网络请求，定时器，事件监听)交给其他的线程去指向，当主线程的任务结束之后，才会转而去执行后续的代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾，等待着主线程去调度。
以前说起事件循环，其实就是
宏任务：定时器，用户交互，网络请求，IO任务，script
微任务：Promise....
随着浏览器复杂度的提升，W3C不再使用宏任务(队列)的说法
- 延时队列 用于存放定时器到达之后的回调任务，优先级-中低级
- 交互队列 用于存放用户操作后产生的事件处理任务 优先级-高
- 微队列 用于存放需要最快执行的任务，优先级-最高
一句话定义事件循环--- 浏览器渲染主线程的工作方式。单线程是异步产生的原因，事件循环是异步的实现方式。
事件循环，在chrome浏览器底层源码中，就是一个不会结束的循环，每次循环，从消息队列中，取出第一个任务执行。而其他的线程只需要在合适的时候将任务加入到队列末尾即可
# 示例1
console.log(1);
setTimeout(()=> console.log(2));
Promise.resolve().then(()=>console.log(3));
Promise.resolve().then(()=>setTimeout(()=>console.log(4)));
Promise.resolve().then(()=>console.log(5));
setTimeout(()=> console.log(6));
console.log(7);
1
7
3
5
2
6
4
# 示例2
观察案例，熟悉事件循环过程
# 工程化
是我们前端学习承上启下的一个重点。
中级其中一个标准---工程化玩的熟悉不熟悉
# 模块化
commonjs
// 下面是ESM
import xxx as XXXX from "vue"
import xxx from "./views/ShowComp"
commonjs由于是在node环境中，因此，可以帮我们查找具体的文件
区分相对路径和第三方库路径(bare import)
添加.js后缀
添加文件夹同名文件或者index.js的读取
esModule
由于是浏览器规范，因此路径只支持绝对路径，并不支持省略后缀，帮助查找index.js文件等写法。在工程中，之所以我们可以这么做，是由于打包工具帮我们处理了这些事情。
nodejs14版本之后，支持ESM，为了区分CJS和ESM的写法一般有几种处理方式：
1. 后缀名区分
后缀名.cjs或者.cts 表示支持commonjs
后缀名.mjs或者.mts 表示支持esModule
2. package.json中限定
type: 'module' 限定工程支持esModule写法
es模块化的一个问题
要注意：通过es module模块化导出的话，尽量导出函数或者常量，不要直接导出变量，简单来说
就是不要让引入方能直接引入导出的变量
所以，能用const声明，尽量使用const声明
# 包管理器
- npm
- yarn
- cnpm
- pnpm
npm i xxx --force 或者 --legacy-peer-deps
peerDependence 对等依赖
有一些第三方包的作者，估计增加的peerDependence配置
自己的工程
|-- lodash.4.x
|-- xxx.lib
| |-- lodash.3.x
# 预处理器
- Sass/Scss
- Less
- Stylus
# 后处理器
post-css css兼容性，前缀 --webkit --moz
# css原子化
tailwind 通过固定写类名的方式，直接写css
# nodejs版本的问题
nvm
n
nodejs请安装偶数版本
Vue-cli 5.x 需要nodejs 14以上版本
# 打包工具
为什么需要打包工具：简单来说，一句话，开发阶段的期望和生产环境的期望是不一样的
开发阶段：最好能用最新的，开发效率最高的，模块化组织更细腻的。
生产环境：兼容性要求更高，网络要求更高，安全性要求更高
rust化 绣化
webpack
vite
rollup
esbuild