模块化的总结——AMD/CommonJS/ES6

### 不使用模块化的情况

假如在项目中我们有如下三个文件

1.png

util.js为基础工具函数库文件,a-util.js中定义了aGetFormatDate函数,其定义中使用了util.js里的getFormatDate函数,a.js文件执行时则使用了aGetFormatDate函数.定义如下:

2.png

那么如果不使用模块化,我们在主文件main.html中加载这三个js文件就必须按照顺序如下加载:

pic3

我们很容易发现上图中备注所写明的两个问题,而模块化则能解决这些问题。
### 使用模块化
使用模块化的话,我们希望它能做些什么呢?

首先对于util.js,我们希望这个文件直接把这个工具函数传递出来,不需要传递其他的内容。其次对于a-util.js,当我们需要用什么,我们就引用什么,比如这里引用getFormatDate函数。引用过来后这个函数就在a-util函数作用域里了,并没有暴露给全局。 对于a.js也是一样,引用了a-util传递出来的aGetFormatDate。

这样子依赖关系明确,我们需要什么就引用什么,不需要知道我们引用的东西依赖于什么(a.js直接引用a-util.js里的函数即可,不需要知道a-util.js依赖于util.js,文件会根据依赖关系自动引用)。

pic4

### AMD

AMD是一个异步模块加载的定义规范。

比较代表的工具为require.js。

AMD包含一个全局的define函数和一个全局的require函数。依赖的JS会自动、异步加载。这样,我们只需要引用表层的函数,这个函数所依赖的底层函数会自动被加载。例子如下:

pic5

define和require里的第一个参数是依赖的文件(没有这个参数则没有依赖的)

在最表层的main.html则通过script标签调用require.js,如下

pic6

data-main指入口,指向表层文件main.js。其他文件通过main.js自动引用。

实例演示后,我们通过控制台可以看见如下:

pic7

可以看见是按照依赖顺序依次加载的。

### CommonJS

CommonJS适用于服务器端,属于nodejs模块化规范,和AMD最大的不同是CommonJS是一次性同步加载出来,而AMD则为异步加载。当然通过一些设置CommonJS是可以异步加载的,但本身是同步的。

使用例子如下:

pic8

CommonJS通常和npm一起使用,详细的写在另外一篇WEBPACK教程里。

### AMD和CommonJS的使用场景

需要异步加载JS,使用AMD

使用了npm之后建议使用CommonJS

### ES6模块化

#### 基本语法:

ES6包括export和import语法

export:
pic9

import:
pic10

import里的util1就是指util1.js导出来的包含a的对象,而fn1和fn2就是指util2.js里输出的两个函数。

如果是export default,就指的是只默认输出一个对象,引用的时候直接import就可以了,如果export好几个的话,import就需要用大括号将其包起来。

#### 使用babel进行es6编译

使用babel的操作如下:

pic11

pic12

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

该文件用来设置转码规则和插件,基本格式如下。


{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。


# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然后,将这些规则加入.babelrc


  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

注意,以下所有Babel工具和模块的使用,都必须先写好.babelrc

在webpack中的使用

babel可以解析es6的语法到普通js,但是针对于模块化中的引用关系babel是无能为力的,对此需要使用webpack来处理模块化。

基本操作:
pic13

webpack.config.js的配置示例:

pic14

package.json里的配置:

pic15

总结

  ES6的class总结及其使用
2018 - 雨に歌えば,雲は割れるか 
上一篇: ES6的class总结及其使用
下一篇:2018 - 雨に歌えば,雲は割れるか


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ