Module 的语法

Module 的语法

概述

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

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

浏览器环境下和IDE的NodeJS环境下，会略微不同，我们先看浏览器环境下的

export 命令

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

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

// profile.js
export var anum = 10;
export var afloat = 11.12;
export var astring = "hello world";

上面代码是profile.js文件，保存了用户信息。ES6 将其视为一个模块，里面用export命令对外部输出了三个变量。

export的写法，除了像上面这样，还有另外一种。

// profile.js
var anum = 10;
var afloat = 11.12;
var astring = "hello world";

export {anum,afloat,astring};

上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在var语句前）是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

我们试一下在HTML文件中引入

<script type="module">
    import {anum,afloat,astring} from "./ES6Module.js";
    console.log(anum)
    console.log(afloat)
    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>

上面代码对外输出一个函数add。

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

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

上面代码使用as关键字，重命名了函数sub和add的对外接口。重命名后，add可以用不同的名字输出两次。

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

// 报错
export 1;

// 报错
var m = 1;
export m;

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

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

上面三种写法都是正确的，规定了对外的接口m。其他脚本可以通过这个接口，取到值1。它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系。

同样的，function和class的输出，也必须遵守这样的写法。

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

另外，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 模块的设计初衷。

function foo() {
  export a = 'AAA' // SyntaxError
}
foo()

上面代码中，export语句放在函数之中，结果报错。

import 命令

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

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

上面代码的import命令，用于加载ES6Module.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（ES6Module.js）对外接口的名称相同。

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

import { anum as otherName } from './ES6Module.js';

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

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

a = {}; // Syntax Error : 'a' is read-only;

上面代码中，脚本加载了变量a，对其重新赋值就会报错，因为a是一个只读的接口。但是，如果a是一个对象，改写a的属性是允许的。

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>

注意，模块整体加载所在的那个对象，应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

import * as myModule from './ES6Module';

// 下面两行都是不允许的
myModule.anum = 20;
myModule.foo = 'hello';

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命令后面，不使用大括号。

export default命令用在非匿名函数前，也是可以的。

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

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

当让也可以这样玩：

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
    }
}

var myModule = {
    anum,
    afloat,
    abool,
    astring,
    AClass,
    foo
}

export default myModule;

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

（选）

简单看一下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(‘模块’);