JS模块化—CJS&AMD&CMD&ES6-前端面试知识点查漏补缺

本文从以时间为轴从以下几个方面进行总结JS模块化。从无模块化 => IIFE => CJS => AMD => CMD => ES6 => webpack这几个阶段进行分析。

历史

幼年期：无模块化

方式

1. 需要在页面中加载不同的js，用于动画，组件，格式化
2. 多种js文件被分在了不同的文件中
3. 不同的文件被同一个模板所引用

<script src="jquery.js"></script>
<script src="main.js"></script>
<script src="dep1.js"></script>

此处写法文件拆分是最基础的模块化（第一步）

* 面试中的追问

script标签的参数：async & defer

<script src="jquery.js" async></script>

总结

• 三种加载

1. 普通加载：解析到立即阻塞，立刻下载执行当前script
2. defer加载：解析到标签开始异步加载，在后台下载加载js，解析完成之后才会去加载执行js中的内容，不阻塞渲染
3. async加载：（立即执行）解析到标签开始异步加载，下载完成后开始执行并阻塞渲染，执行完成后继续渲染

• 兼容性：> IE9

• 问题可能被引导到 => 1. 浏览器的渲染原理 2.同步异步原理 3.模块化加载原理

• 出现的问题

1. 污染全局作用域

成长期（模块化前夜） - 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);