前端模块化开发－发展过程及解决方案

为什么需要模块化

JavaScript原始功能

在网页开发的早期，js 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码很少，直接将代码写在

<script>
document.getElementById('button').onclick = function(){
   console.log('按钮发生了点击');
}
</script>

随着 ajax 异步请求的出现，慢慢形成了前后端的分离，客户端需要完成的事情越来越多，代码量也是与日俱增，为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护，但是这种维护方式，依然不能避免一些灾难性的问题。

比如全局变量同名问题：

// a.js文件中,小明定义了一个变量flag,值为true
flag = true

// b.js文件中,小红也定义了一个变量flag,值为false
flag = false

// main.js文件中,小明想通过flag进行一些判断,完成后续的事情
if (flag) {
  console.log('111'); // 结果可能会因为flag同名的问题，而出现逻辑错误
}

另外，这种代码的编写方式对 js 文件的依赖顺序几乎是强制性的，当 js 文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较麻烦的事情，而且即使你弄清楚顺序了，也不能避免上面出现的这种尴尬问题的发生。

这时，我们可以使用匿名函数来解决方面的重名问题。

匿名函数的解决方案

我们可以在a.js文件中使用匿名函数：

(function(){
  flag = true
})()

因为函数有自己的作用域，使用匿名函数虽然解决了重名问题，但是如果我们希望在 main.js 文件中用到 flag，应该如何处理呢？显然，另外一个文件中不方便使用，因为 flag 是一个局部变量。

这时，我们可以将需要暴露到外面的变量，使用一个模块作为出口。

使用模块作为出口

在匿名函数内部定义一个对象，给对象添加各种需要暴露到外面的属性和方法（不需要暴露的直接定义即可），最后将这个对象返回，并且在外面使用了一个 MoudleA 接收。

// a.js或b.js中

// 使用模块作为出口
var ModuleA = (function(){
  // 1. 定义一个对象
  var obj = {}
  // 2. 在对象内部添加变量和方法
  obj.flag = true
  obj.myFunc = function(info){
    console.log(info);
  }
  // 3. 将对象返回
  return obj
})()

接下来，在 main.js 中使用只需要使用属于自己模块的属性和方法即可:

// 使用模块
if(ModuleA.flag){
  console.log('111');
}
ModuleA.myFunc('222')
console.log(ModuleA);

这就是模块最基础的封装，事实上模块的封装还有很多高级的话题，幸运的是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。

常见的模块化规范：

• CommonJS
• AMD
• CMD
• ES6 Modules

CommonJS（了解）

模块化有两个核心，导出和导入

CommonJS的导出：

// 在a.js中：
module.exports = {
  flag: true,
  sum(a, b) {
    return a + b
  }
}

CommonJS的导入：

// 在main.js中
let {flag, sum} = require('a.js')

// 等同于
let _mA = require('a.js')
let flag = _mA.flag
let sum = _mA.sum

ES6 的 export 和 import

ES6新增了模块的概念，一个js文件就是一个模块。在这个模块中所有的变量都是对其他模块不可见的，除非我们导出它。在一个模块中可能需要引入其他模块, 也可能需要输出模块， 这时就需要使用export和import关键字了。

export基本使用

export用于导出, 可以导出一个变量,也可以导出一个函数或者类，有下面三种基本使用方式：

导出变量

// a.js
export let name = 'nnn'
export let age = '22'
export let height = '1.75'

另一种写法：

// a.js
let name = 'lyy'
let age = '18'
let height = '1.75'
export {name, age, height}

导出函数或类

// a.js
// 导出函数
export function test (content) {
  console.log(content)
}
// 导出类
export class Person {
  constructor(name,age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log('hello' + this.name)
  }
}

另一种写法：

// a.js
// 导出函数
function test (content) {
  console.log(content)
}
// 导出类
class Person {
  constructor(name,age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log('hello' + this.name)
  }
}
export {test, Person}

export default

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而希望让导入者可以自己来命名，这个时候就可以使用 export default。

需要注意的是，当使用export default时, 表示默认输出。 一个模块只能有一个默认输出,有多个default时只会取最后一个

// a.js
export default function(){
  conse.log('111')
}

来到 main.js 中，这样使用就可以了:

import myFunc from './a.js'
myFunc()

这里的myFunc可以根据自己的需要命名。

import使用

我们使用 export 指令导出了模块对外提供的接口，就可以通过 import 命令来加载对应的这个模块了。

首先，需要在index.html中引入两个 js 文件，并且类型需要设置为 type="module"：

<script src="a.js" type="module"></script>
<script src="main.js" type="module"></script>

在a.js中导出:

// a.js
let name = 'lyy'
let age = '18'
export {name, aget}

在main.js中导入：

// main.js
import {name,age} from "./a.js"

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦，这时候就可以导入模块中所有的export变量，但是通常情况下我们需要起一个别名，方便后续使用。

// main.js中
import * as info from "./a.js"
console.log(info.name,info.age)