Module 的语法

简述

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

export 命令

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

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

export var astring = "hello world";

<script type="module">
    import {astring} from "./ES6Module.js";
    console.log(astring)
</script>

一定要注意，浏览器默认的script标签类型为text/javascript，这里要改为module，module 的加载实现的是es6语法。

export命令除了输出变量，还可以输出函数或类（class）。

function add(x,y){
    return x + y;
}
export {add}

<script type="module">
    import {add} from "./ES6Module.js"
    console.log(add(1, 2));
</script>

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function add(x,y){
    return x + y;
}
function sub(x,y) {
    return x - y;
}
export {
    sub as bus,
    add as dda,
}

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export var someString = "hello"

setTimeout(()=>{
    someString = "world";
},5000)

<script type="module">
    import {someString} from "./ES6Module.js"
    console.log(someString)
    setTimeout(()=>{
        console.log(someString)
    },6000)
</script>

上面代码输出变量someString，值为hello，5000 毫秒之后变成world。

最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

import 命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。

import {a} from './xxx.js'

a.foo = 'hello'; // 合法操作

上面代码中，a的属性可以成功改写，并且其他模块也可以读到改写后的值。不过，这种写法很难查错，建议凡是输入的变量，都当作完全只读，不要轻易改变它的属性。

注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。

foo();

import { foo } from 'my_module';

上面的代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

下面是一个ES6Module.js文件，里边什么类型的变量都有。

var anum = 10
var afloat = 11.12
var abool = false
var astring = "hello world"

function foo() {
    console.log("模块中的foo调用")
}

class AClass {
    constructor(id) {
        this.id = id
    }

    getid(){
        return this.id
    }
}

export {
    anum,
    afloat,
    abool,
    astring,
    foo,
    AClass
}

现在，加载这个模块。

<script type="module">
    import {anum,astring,abool,afloat,AClass,foo} from "./ES6Module.js";
    console.log(anum)
    console.log(astring)
    console.log(abool)
    console.log(afloat)
    foo()
    let a = new AClass(666)
    console.log(a.getid())
</script>

上面写法是逐一指定要加载的方法，整体加载的写法如下。

<script type="module">
    import * as myModule from "./ES6Module.js";
    console.log(myModule.anum)
    console.log(myModule.astring)
    console.log(myModule.abool)
    console.log(myModule.afloat)
    myModule.foo()
    let a = new myModule.AClass(666)
    console.log(a.getid())
</script>

export default 命令

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// export-default.js
export default function () {
  console.log('foo');
}

上面代码是一个模块文件export-default.js，它的默认输出是一个函数。

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面代码的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面，不使用大括号。

简单看一下Nodejs里怎么玩？

导出模块

node中是模块作用域，默认文件中所有的成员只在当前文件模块有效对于希望可以被其他模块访问的成员，我们就需要把这些公开的成员都挂载到exports接口对象中就可以导出多个成员

导出多个成员（必须在对象中）

exports.a = 123;
exports.b ='hello';
exports.c=function(){
	console.log('ccc');
}

导出单个成员（函数,字符串）

module.exports='hello';

以下情况会覆盖

module.exports='hello';
//下面的会覆盖之前的hello
module.exports=function(x,y){
	return x+y;
}

exports 和 module.exports 的区别

相同点

在node中，每个模块中都有一个 module 对象
module对象中有一个exports对象（默认是空对象）
我们可以把需要导出的成员都挂载到module.exports接口对象中，也就是：[moudle.exports.xxx] = xxx 的方式，但是每次都 [moudle.exports.xxx] = xxx很麻烦，所以Node为了方便，同时在每一个模块中都提供了一个成员叫：exports
exports === module.exports 结果为 true，所以对于：[moudle.exports.xxx]= xxx 的方式完全可以：[expots.xxx] = xxx

不同点

当一个模块需要导出单个成员的时候，这个时候必须使用：module.exports = xxx 的方式
不要使用 exports = xxx，因为这样不管用
因为每个模块最终向外return的是module.exports
而 exports 只是 module.exports 的一个引用
所以即便为 exports = xx 重新赋值，也不会影响 module.exports
但是有一种赋值方式比较特殊：exports = module.exports 这个用来重新建立引用关系的，而和之前的 exports 就没有关系了

注意

exports只是一个module.exports的引用，尽量不要破坏他们之间的引用关系就好了。

导入

var 自定义变量名 = require('模块');

Module 模块的语法