本文共 2354 字，大约阅读时间需要 7 分钟。

1. 为什么需要模块化

1.1 早期js开发的痛点

• 在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？直接将代码写在 script 标签中即可
• 随着ajax异步请求的出现，慢慢形成了前后端的分离。客户端需要完成的事情越来越多，代码量也是与日俱增。为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。但是这种维护方式，依然不能避免一些灾难性的问题。比如全局变量同名的问题。
• 后来可以使用匿名函数来解决变量的重名问题。但是如果我们希望在其他文件中引用这里的局部变量，该怎么办呢？
• 另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的。当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较同时的事情，而且即使你弄清楚顺序了，也不能避免上面出现的这种尴尬问题的发生。

1.2 使用模块作为出口

我们可以将需要暴露到外面的变量，使用一个模块作为出口，什么意思呢？

1. 在匿名函数内部定义一个对象

2. 给这个对象添加各种需要暴露到外面的属性和方法

3. 最后将这个对象返回，在外面使用一个变量接收

4. 最后我们只需要使用属于自己模块的属性和方法即可

下面举个例子：

我们在 aaa.js 和 bbb.js文件中分别定义一个对象，并且导出。

var moduleA = (function () {
       //1.定义一个对象    var obj = {
   };    //2.在对象内部添加变量和方法    var flag = false;    obj.flag = flag;    obj.decrement= function (num1,num2) {
           console.log(num1 - num2);    }    //3.返回    return obj;})()var moduleB = (function () {
       //1.定义一个对象    var obj = {
   };    //在对象内部添加变量和方法    var flag = true;    obj.flag = flag;    obj.increment= function (num1,num2) {
           console.log(num1 + num2);    }    return obj;})()

然后我们在main.js文件中使用之前那两个js文件中的变量。

if (moduleB.flag) {
       console.log('hello world');}moduleB.increment(11, 11);moduleA.decrement(11, 11);console.log(moduleA.flag);

最后在html文件中引用js文件（注意引用顺序！！）

上面的例子就是模块最基本的封装。

但是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。

常见的模块化规范有：CommonJS、AMD、CMD，也有ES6的Modules。

2. Common.js

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

Common.js的导出：

Common.js的导入：

注意：Common.js的使用必须依赖Node环境！

3. ES6的export和import命令

3.1 export

export可以用来导出变量、函数、类

1. 导出变量

let name = 'van.shu';let age = 22;let height = 1.77;export {
   name, age, height};

2. 导出函数

export function showInfo(info) {
       console.log(info);}

3. 导出类

class User {
       constructor(name, age) {
           this.name = name;        this.age = age;    }    play() {
           console.log(this.name + '在玩游戏');    }}export {
   User};

3.2 import

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

首先，我们需要在html文件中引入js文件，并将类型设置为module

import指令用于导入模块中的内容,比如main.js的代码

import {
   name,age,height} from "./info.js";import {
   showInfo} from "./func.js";import {
   User} from "./user.js";console.log(name, age, height);showInfo(111);let user = new User();user.name = 'van.shu';user.play();

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

import * as info from "./info.js"console.log(info.name + info.age + info.height);

转载地址：http://pqmbi.baihongyu.com/