Javascript模块化开发基础，最新美团点评前端团队面试题

export {a, b, c}
//main.js
import {a, b, c} from ‘./abc’; //接受的变量用大括号表示，以解构赋值的形式获取
console.log(a, b, c);
导入的时候也可以为变量重新取一个名字
import {a as aa, b, c};
console.log(aa, b, c)
如果想在一个模块中先输入后输出同一个模块，import语句可以和export语句写在一起。
// 正常写法
import {a, b, c} form ‘./abc’;
export {a, b, c}
// 使用简写, 可读性不好，不建议
export {a, b, c} from ‘./abc’;
//ES7 提议，在简化先输入后输出的写法。现在不能使用，也不建议使用，可读性不好
export a, b, c from ‘./abc’

// foo.js
export var foo = ‘foo’;
setTimeout(function() {
foo = ‘foo2’;
}, 500);
// main.js
import * as m from ‘./foo’;
console.log(m.foo); // foo

// abc.js
export var a = 1;
export var b = 2;
export var c = 3;
// main.js
import * as abc from ‘./abc’;
console.log(abc.a, abc.b, abc.c);
上面 main.js 中的整体加载可以用 module 关键字实现：
//暂时无法实现
module abc from ‘./abc’;
console.log(abc.a, abc.b, abc.c); //1 2 3

// abc.js
var a = 1, b = 2, c = 3;
export {a, b};
export default c; //等价于 export default 3;
// main.js
import {a, b} from ‘./abc’;
import num from ‘./abc’; // 不需要大括号, 而且可以直接改名(如果必须用原名不还得看手册么?)
console.log(a, b, num) // 1 2 3

// abc.js
var a = 20;
export {a as default};
// main.js
import a from ‘./abc’; // 这样也是可以的
console.log(a); // 20
// 这样也是可以的
import {default as aa} from ‘./abc’;
console.log(aa); // 20
如果需要同时输入默认方法和其他变量可以这样写 import:
import customNameAsDefaultExport, {otherMethod}, from ‘./export-default’;

// circleplus.js
export * from ‘circle’; //当然，这里也可以选择只继承其部分接口，甚至可以对接口改名
export var e = 2.71828182846;
export default function(x){ //重新定义了默认输出，如果不想重新定义可以：export customNameAsDefaultExport from ‘circle’;
return Math.exp(x);
}
//main.js
import * from ‘circleplus’; //加载全部接口
import exp from ‘circleplus’; //加载默认接口
//…use module here

// foo.js
export let counter = 3;
export function inc(){
counter++;
}
// main.js
import {counter, inc} from ‘./foo’;
console.log(counter); //3
inc();
console.log(counter); //4
我们看一个 CommonJS 的情况
// foo.js
let counter = 3;
function inc(){
counter++;
}
module.exports = {
counter: counter,
inc: inc
}