本文从以时间为轴从以下几个方面进行总结JS模块化。从无模块化 => IIFE => CJS => AMD => CMD => ES6 => webpack这几个阶段进行分析。
历史
幼年期:无模块化
方式
- 需要在页面中加载不同的js,用于动画,组件,格式化
- 多种js文件被分在了不同的文件中
- 不同的文件被同一个模板所引用
<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="dep1.js"></script>
此处写法文件拆分是最基础的模块化(第一步)
* 面试中的追问
script标签的参数:async & defer
<script src="jquery.js" async></script>
总结
- 三种加载
- 普通加载:解析到立即阻塞,立刻下载执行当前script
- defer加载:解析到标签开始异步加载,在后台下载加载js,解析完成之后才会去加载执行js中的内容,不阻塞渲染
- async加载:(立即执行)解析到标签开始异步加载,下载完成后开始执行并阻塞渲染,执行完成后继续渲染
-
兼容性:> IE9
-
问题可能被引导到 => 1. 浏览器的渲染原理 2.同步异步原理 3.模块化加载原理
-
出现的问题
- 污染全局作用域
成长期(模块化前夜) - IIFE(语法测的优化)
作用域的把控
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
利用函数的块级作用域
(() => {
let count = 0;
...
})
//最基础的部分
实现一个最简单的模块
const iifeModule = (() => {
let count = 0;
const increase = () => ++count;
const reset = () => {
count = 0;
}
console.log(count);
increase(