Js模块化--AMD、CommonJS、ES6模块总结

这是我参与更文挑战的第17天，活动详情查看：更文挑战

CommonJS

• CommonJS采用同步加载的方式运行，主要应用与服务端，加载完成之后不会立即执行里面的函数

使用

var moduleB = require('./moduleB');//导入使用
// moduleB.js
module.exports = { //导出模块
	stuff: moduleB.doStuff();
};

• 在文件中多次引入同一个模块，只会加载一次，然后就会被缓存，后面继续引入时会去读取缓存，由于是同步加载，所以加载顺序与引入顺序有关

• 导出文件时，exports=module.exports,需要注意的是，使用exports导出时需要直接点出属性，而不是导出对象

module.exports={
    name:'tom'
}
//等同于
exports.name ='tom'
//这种是错误的
exports={}

• CommonJS模块加载可以嵌套在条件判断语句中，满足条件时会加载依赖，遵循只加载一次的规则，即使前面已经加载影响也不大

if (loadCondition) {
    require('./moduleA');
}

AMDJS

• AMDJS采用异步加载的方式，应用于客户端浏览器，加载完成之后会立即执行依赖它们的模块

使用

• 定义模块时，AMD在执行时所需要的依赖，并且指定该模块的唯一标识

//定义一个moduleA，她依赖于moduleB
define('moduleA', ['moduleB'], function(moduleB) {
    return {
        stuff: moduleB.doStuff();
    };
});

• AMD定义模块时，可以在它的内部使用CommonJS模块，也可以进行条件判断

define('moduleA', ['require', 'exports'], function(require, exports) {
    if(true){
        var moduleB = require('moduleB');
        exports.stuff = moduleB.doStuff();
    }
});

//使用 引入成功之后执行callback()
require(['moduleA'],function(moduleA){
    moduleA.stuff()
})

UMDJS

• 为了统一CommonJS和AMD,产生了这两种规范都可以使用的UMD，UMD定义模块在使用的时候会检测要使用那种模块加载规范

(function (root, factory) {
    if (typeof define === 'function' && define.amd) { // AMD。注册为匿名模块
        define(['moduleB'], factory);
    } else if (typeof module === 'object' && module.exports) { //CommonJS 环境下使用
        module.exports = factory(require(' moduleB '));
    } else { // 浏览器全局上下文（ root 是 window）
        root.returnExports = factory(root. moduleB);
    }
}(this, function (moduleB) {
    // 以某种方式使用 moduleB
    // 将返回值作为模块的导出
    // 这个例子返回了一个对象
    // 但是模块也可以返回函数作为导出值
    return {};
}));

ES6模块化

• ES6模块只在加载后执行
• 模块只加载一次
• 在模块中可以继续加载其他模块
• 异步加载

使用

• 导出模块时与CommonJS相似，可以有多个export

//moduleA.js
export const name ='tom'
export const age =12
//等同于
export {name,age}


//在其他文件引用的时候需要指定具体的名称
import {name,age} from 'moduleA.js'

• 但是只能有一个export default,否则会报错

//moduleB.js
export default{
	name:'tom',age:12
}
//在其他文件引入时可以自定义引入的标识名称
import person from  './moduleB'

as

• as可以用来重新命名导入或者导出的变量

const foo = 'foo', bar = 'bar', baz = 'baz';
export { foo, bar, baz }
import * as Foo from './foo.js';//将导出的这个集合重新命名
console.log(Foo.foo); // foo

import { foo, bar, baz as myBaz } from './foo.js';  //将baz重新命名

console.log(myBaz); // baz  

• 对于标签引入来说，标签中添加type='module'来表明她是一个模块，在页面渲染时，遇到这个模块时，会直接加载这个js模块，不会阻塞页面解析，当页面解析完成之后在依照顺序执行

<!-- 第二个执行 -->
<script type="module"></script>
<!-- 第三个执行 -->
<script type="module"></script>
<!-- 第一个执行 -->
<script></script>
另外，可以改为加载外部 JS 模块定义：
<!-- 第二个执行 -->
<script type="module" src="module.js"></script>
<!-- 第三个执行 -->
<script type="module" src="module.js"></script>
<!-- 第一个执行 -->
<script><script>