《JavaScript总结》js模块化

模块化开发，可以让代码易于扩展、便于日后维护。

ES6中的模块化

我们先了解一下 export(导出) 和 import(导入) 这两个关键字。

新建一个文件a.js 并且导出变量test

export var test = "测试";

导入变量test  来源是a.js   然后输出test

import {test} from './a.js';
console.log(test);

如果想导出多个变量:

var test = "测试1";
var test2 = "测试2";
export {
    test,
    test2
}

import {test,test2} from './a.js';

如果你不想暴露模块当中的变量名字，可以通过as来进行操作:

var test = "测试1";
var test2 = "测试2";
export {
    test as asTest,
    test2 as asTest2
}

import {asTest,asTest2} from './a.js';

默认导出 (export default)

一个模块文件只能有一个默认导出，并且它的导入名称可以喝导出名称不一样。

export default test = "哈哈";

import test from './a.js';
import noTest from './a.js';//名字不一样也行

混合导入导出

/*导出文件  a.js*/
export var test = "Hello";
export default yuki = "Yuki";

/*导入*/
import yuki,{test} from './a.js';

CommonJS

commonJs是Node独有的规范，一般是用于服务端。module.exports(导出) 、require(导入)。具体看示例

module.exports = {
    test:'哈哈',
    yuki:'Yuki'
}
//下面这种方式也可以导出  exports不能直接赋值一个对象 也就说exports=对象aaa  这种写法是无效的
exports.test = "哈哈";
exports.yuki = "Yuki";

var obj = require('./a.js');
console.log(obj.test);
console.log(obj.yuki);

CommonJS与ES6中模块化的区别

1.commonJs支持动态导入，也就说require(${path}/xx.js) ，但ES6不支持。

2.commonJs是同步的，并且一般用于服务端，后者是异步的，一般用于客户端(浏览器)。

AMD

// AMD
define(['./a', './b'], function(a, b) {
    a.do()
    b.do()
})
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    var b = require('./b')
    b.doSomething()
})