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

比眉伴天荒 2021-11-02 10:40 473阅读 0赞

在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