es6常用语法学习笔记—Module语法

在CommonJS中，模块就是对象，输入时必须查找对象属性，模块的加载为“运行时加载”，因为只有运行时才能得到相关对象，导致完全没办法在编译时做“静态优化”。

在ES6中， 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。这种加载方式成为“编译时加载”或静态加载。

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

1、export命令

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

第一种输出方式

//export.js
export var name = "张三";
export var age = 23;

第二种输出方式

//export.js
var name = "张三";
var age = 23;
export {name,age}

两种方式是等价的，但是从便利性考虑来说，可以优先考虑第二种方式，这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

export除了输出变量，还可以导出函数和类

export function person(){
    console.log(111)
}

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

function v1(){
  console.log(111)  
}
function v2(){
  console.log(222)  
}
export {
  v1 as a1,
  v2 as a2,
  v3 as b2      
}

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

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

//第一种形式
var a = 1;
export a; //此时会报错
//第二种形式
export 1; //此时也会报错

以下写法均正确

//写法一
export var a = 1;
//写法二
var a = 1;
export {a};
//写法三
var a = 1;
export {a as b}

同样function和class的写法也是这样

function f(){
  console.log(11)  
}
export f //报错

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

var a = 1;
export {a};
setTimeout(()=>{
   a = 2 
},1000)

以上代码先输出1,1秒后会变成2。这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存，不存在动态更新。

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

function foo(){
  export var a= 1  
}
foo()//会报错

 2、import命令

使用export命令定义了模块的对外接口后，其它js文件就可以使用import命令接收了。

//person.js
export var name = 'zs';
export var age = 20;
export var sex = 'male'
//info.js
import {name,age,sex} from person.js

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

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

//person.js
export var name = 'zs';
export var age = 20;
export var sex = 'male'
//info.js
import {name as username,age,sex} from person.js

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

import {a} from "a.js"
a = {} //报错

如果a是一个对象，改写a的属性是允许的

import {a} from "a.js"
a.name = "zs"

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

import后面的from指定模块文件的位置，可以是相对路径也可以是绝对路径，.js后缀可以省略。

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

foo()
import {foo} from a.js

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

由于import是静态执行，所以不能使用表达式和变量等这些只有运行时才有结果的语法结构。

//以下写法会报错
import {"f"+"oo"} from "a.js"

let a = "a.js"
import {foo} from a 

if(x ===1 ){
  import {a} from "a.js"  
}else{
  import {b} from "b.js"  
}

3、模块的整体加载

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

//method.js
export var a = 1;
export var b = 2;
export var c = 3;

方法一：逐一加载

import {a,b,c} from "method.js"
console.log(a,b,c)//1,2,3

方法二：整体加载

import * as obj from "method.js"
console.log(obj.a,obj.b,obj.c)//1,2,3

注意：模块整体加载所在的那个对象，不允许运行时改变，以下写法均会报错。

//改变a的值
obj.a = 10;
//新增d的值
obj.d = 4;

4、export default命令

使用import命令的时候，用户需要知道所要加载的变量名和函数名，否则无法加载。

为了给用户提供方便，就要用到export default命令，为模块指定默认输出。

export default function foo() {console.log(1)}

上述模块指定输出一个匿名函数，其他函数在加载时，import命令可以为该匿名函数指定任意名字。

import a from "export-default.js"
a() //1

这时import命令后面不使用大括号

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

//写法1
function foo() {
  console.log(1)  
}
export default foo
//写法2
export default function foo() {
  console.log(1)  
}

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

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

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许i为它取任意名字。

//a.js
function add() {
    console.log(1)
}
export {add as default}
//等同于 export default add

//b.js
import {default as foo} from "a.js"
//等同于 import foo from "a.js"

export default命令只是输出一个叫做default的变量，它后面不能跟变量声明语句。

//正确
var a = 1;
export default a;

//正确
export var a = 1;

//正确
export default 100

//错误
export default var a = 1;

上述代码中eport default a的含义是将a的值赋给default。

 

转载于:https://www.cnblogs.com/zmyxixihaha/p/10919179.html