Module

模块

CommonJs(用于服务器),AMD(用于浏览器)

// CommonJS模块,生成对象
let { stat, exists, readfile } = require('fs');
// ES6模块
import { stat, exists, readFile } from 'fs';
//动态加载模式
const path = './' + fileName;
const myModual = require(path);
//新提案：
按需加载,可以用在代码块中,可以使用模块路径动态生成
button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});
//同时加载多个模块
Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

export:

// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};

import是静态执行的，不能使用表达式和变量.

import 'lodash';
import 'lodash';
//只执行一次
import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
//import语句是单例模式,只加载一次
import * as circle from './circle';//整体加载

//默认加载,使用default会当作匿名函数加载,否则对应的名称需要正确无误
export default function () {
  console.log('foo');
}
import customName from './export-default';
//export default 
var a = 1;
export default a;
//export default也可以用来输出类,本质是将后面的值输出给default变量
//导入导出
export { es6 as default } from './someModule';
// 等同于
import { es6 } from './someModule';
export default es6;

模块的继承

// circleplus.js
export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
  return Math.exp(x);
}

跨模块常量

// constants/db.js
export const db = {
  url: 'http://my.couchdbserver.local:5984',
  admin_username: 'admin',
  admin_password: 'admin password'
};
// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
export {db} from './db';
export {users} from './users';

模块加载

• 异步加载

//async和defer区别在defer是渲染完执行，而async是下载完就执行
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
<script type="module" src="./foo.js" defer></script>//模块的加载执行

注意模块中的this为undefined

CommonJs和ES6的差异

• CommonJs输出值的拷贝，ES6模块输出值的引用.

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};
// main.js,对于导入的值会被缓存，所以不管导入模块再怎么变化，都是最初读取的值
var mod = require('./lib');
console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3
//ES6是动态引用,根据只读引用到对应模块取值(符号连接),所以对于上面那个结果就会变。
不过注意：
obj.prop = 123; // OK
obj = {}; // TypeError

• CommonJs运行时加载，ES6编译时输出接口.

循环加载

// a.js
var b = require('b');
// b.js
var a = require('a');

• 对于CommonJS来说：

1. 加载模块，生成内存对象，需要使用时在exports属性取值，有缓存，只加载一次

{
 id: '...',
 exports: { ... },
 loaded: true,
 ...
}

在出现循环加载时可能会出现只导入一部分，或者出现了改写的问题，所以要小心出现undefined等情况

var a = require('a'); // 安全的写法
var foo = require('a').foo; // 危险的写法
exports.good = function (arg) {
  return a.foo('good', arg); // 使用的是 a.foo 的最新值
};
exports.bad = function (arg) {
  return foo('bad', arg); // 使用的是一个部分加载时的值
};

• ES6模块加载

在循环加载时出现接口未定义的现象，可以通过函数的提升作用来提前定义。

// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar());
function foo() { return 'foo' }
export {foo};
// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo());
function bar() { return 'bar' }
export {bar};