AMD、CommonJS模块化规范及ES6模块系统

模块化

将大程序拆分成互相依赖的小文件,再用简单的方法将它们拼装起来。

为何需要模块化

原始情况

规模较大的前端项目,不可能使用一个 JS 文件就能写完,不同的功能需要封装到不同的 JS 文件中,这样便于开发也便于维护。



这样使用的问题:

  • 这些代码中的函数必须是全局变量,才能暴露给使用方,但是全局变量会造成很严重的污染,很容易覆盖别人的或者被别人覆盖;并且依赖关系不明确,可能会出现加载问题。

使用模块化之后

ES6模块功能主要由export和import两个命令构成,export用于规定模块的对外接口,impotr用于输入其他模块的功能。

a.js

// 1.使用 export 
export const name = "zhangsan";
export const age = "18";

// 2.使用 export default 
//( export default 输出一个叫作default的变量或者方法,可以给他取任意名字)
function fn(){
}

export default fn

b.js

// 1.
import { name, age } from './a.js'
//或者
import * as person from './a.js'
console.log(person.name, person.age)
//2.
import xxx from './a.js'
}

AMD

AMD规范全称是Asynchronous Module Definition,即异步模块加载机制。代表工具是require.js,使用之后它会定义两个全局函数:

  • define 定义一个变量并返回,可供其他js引用
  • require 引用其他已经定义好的变量
  • 依赖的代码会自动、异步加载

首先是 a.js

define(function () {
    return {
        fn: function (data) {
            // code
            console.log(data)
        }
    }
})

然后是 b.js

require(['./a.js'], function (a) {
    a.fn('A')
})

然后在页面中引用,运行时注意,各个js文件会异步加载

CommonJS

CommonJS 是 nodejs 中模块定义的规范,但是这种规范越来越被放在前端开发来使用(当然这需要构建工具的编译),原因如下

  • 前端开发依赖的插件和库,都可以从 npm 中获取
  • 构建工具的高度自动化,使得使用 npm 的成本非常低

CommonJS 不会异步加载各个JS,而是同步一次性加载出来。CommonJS的一个模块就是一个脚本文件

我们先来看一下 CommonJS 的输入和输出都是什么规范。

util.js

module.exports = {
    getFormatDate: function (date, type) {
        if (type === 1) {
            return '2017-06-15'
        }
        if (type === 2) {
            return '2017年6月15日'
        }
    }
}

a-util.js

var util = require('util.js')
module.exports = {
    aGetFormatDate: function (date) {
        return util.getFormatDate(date, 2)
    }
}

AMD 和 CommonJS 的不同使用场景

CommonJS 解决的问题和 AMD 一样,不过是不同的标准,不同的工具使用场景不一样而已。

  • 使用 AMD:各种代码都是自己定义的,不用依赖于 npm
  • 使用 CommonJS:依赖于 npm

你可能感兴趣的:(javascript)