前端模块化

模块化是什么？为什么？怎么做？

CommonJS

由社区提出的前端模块化方案，目前主要用于服务端。通过exports module.exports和require实现模块的导出和导入。

exports

在同一目录下分别编写两个文件。（以下代码均运行在node中）

//utils.js
const name = 'Jack'

function sayHello(){
    console.log('hello world')
}

function sayName(){
    console.log(`my name is ${name}`)
}

exports.name = name
exports.sayHello = sayHello
exports.sayName = sayName

//main.js
//导入模块的同时解构，方便同时导入多个模块
const {
    name,
    sayHello,
    sayName
} = require('./utils')

console.log(name)
console.log(sayHello())
console.log(sayName())

这种实现模块化的方式本质上是添加对于对象的引用。require本质上是添加一个对于exports对象的引用，也就是说，对于exports对象属性的修改，会同时反应在被导出模块和引用的模块的身上。

module.exports

CommonJS中是没有module的，但是Node实现模块的时候是使用module类来实现的。所以为了在符合CommomJS规范的同时，不违背Node的习惯，将exports和module.exports指向同一对象。开发中使用CommonJS最常见的写法是。

module.exports = {
    
}

也就是将module.exports指向一个新对象，里面书写需要导出的内容，避免和exports混淆。但是这样的方式也会有上面exports的缺点，即通过添加引用的方式实现模块的导出导入。

CommonJS中模块的导入者可以修改被导入的模块，虽然不推荐这么做，但这仍是CommonJS的一个隐患。

关于require

简述一下require如何寻找对应的模块。

传入路径参数。

以require('./utils')为例，首先会将utils当成一个文件名去对应目录中寻找对应文件，如没有找到，依次加上后缀.js .json .node去寻找。（可以省略后缀名的原因。）

以文件名方式没有找，将utils当成一个目录，去该目录下一次寻找index.js index.json index.node。（可以省略index.js的原因）

上述方式都没有找到则会报错。
以名称的方式引入模块。

首先会查找是否有内置的模块。比如path http等node内置的模块。

然后会在node_moules目录下去寻找对应的模块，若当前目录没有node_modules目录则会逐级向上寻找，直到找到根目录。

模块加载解析注意事项

require加载模块的时候，首先会执行一次被导入的模块中对的代码。
如果一个模块被多次导入，模块中的代码只会执行一次，因为缓存机制阻止了多次执行。
模块中存在循环引用的时候，Node采用策略是深度优先方法（DFS）寻找所有的依赖模块。

CommonJS的缺点

同步加载模块，在服务器端由于文件都是存储在本地，所以问题不大。但是在浏览器端会造成频繁的网络请求。
运行时加载，出问题只能在代码运行的时候才知道，不支持静态检查。

AMD/CMD

由于同步加载模块的方式与浏览器环境的格格不入，社区早起提出了一些浏览器端的模块化方案。

AMD

不是跟intel打架那个AMD！是一种浏览器端的模块化方案，采用异步加载模块的方式，但是依旧是运行时加载。目前也几乎不使用了。

require.js是对AMD规范的一个优秀实现。

CMD

同样的浏览器端的模块化方案，吸收了CommonJS的优点。

Sea.js是对于CMD规范的一个优秀实现。

AMD、CMD已经在ES Module提出之后以及逐渐退出前端舞台。这两种规范了解即可，不建议花费太多时间学习。

ES Module

ES6提出的全新的模块化方案，提供编译时加载，前端模块化方案的主流。ES Module默认开启严格模式

export import

最简单的一种ES Module的模块导入导出方式。

//foo.js
const name = 'Jack'
const age = 20
const sayHello = function (){
    console.log('hello world')
}

//或者可以直接在定义标识符的位置导出
export {
    name,
    age,
    sayHello
}

//main.js
import {name, age, sayHello} from "./foo.js"; //这里的.js后缀不能省略，否则会找不到文件
console.log(name)
console.log(age)
sayHello(

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./main.js" type="module"></script>
</body>
</html>

运行index.html就能看见效果。一个注意事项，使用vscode打开的时候必须要开启一个本地服务器，否则会受到浏览器同源策略的限制而无法加载foo.js模块。webstorm打开html会默认开启本地服务器，所以没有这个问题。（还得上ws）

default默认导出

export直接导出的方式需要直到被导入模块向外暴露了哪些东西以及名称才能实现正确导入，如果模块的功能比较简单，最后只暴露了一个变量或者函数，则可以使用default默认导出的方式。

//parse_lyric.js
export default function() {
  return ["新歌词"]
}

//main.js
import parseLyric from "./parse_lyric.js"

上述代码导出了一个匿名函数，但是在导入模块的时候确为它命名了，而且并且采用别名的方式而是直接命名的。这就是默认到处的好处，使用者无需知道具体的名称，可以根据需求自定义名称。

默认导出在一个模块中只能有一个，也就是只能默认导出一个变量或者函数。

import使用的注意事项

采用import方法导入模块的时候，必须将该语句放在js代码的最顶层，不能写在内部的代码逻辑中。下面的代码会报错：

let flag = true
if(flag){
    import debounce from './debounce.js'
}

如果的确需要在某些条件成立时才导入模块可以考虑一下写法：

let flag = true
if(flag){
    import('./debounce.js').then(res => {
        console.log(res)
    })
}

import函数返回一个Promise对象，异步加载模块，利用then方法可以查看导出的结果。