esModule与CommonJS(Node)

谁借莪１个温暖的怀抱￠ 2024-04-17 05:41 68阅读 0赞

# esModule #

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

### export命令 ###

export var firstName = 'Michael';
    export var year = 1958;
    export function multiply(x, y) {
      return x * y;
    };

var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    function fn(){}
    
    export {
        firstName as a, 
        lastName, 
        year,
        fn
    };

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

export var foo = 'bar';
    setTimeout(() => foo = 'baz', 500);

### import命令 ###

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

import {firstName, lastName as name, year} from './profile';
    // 整体加载
    import * as obj from './profile';

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

### export default命令 ###

export：

// export.js
    export default function foo() {
      console.log('foo');
    }
    export var name = 'a'
    export var age = 1
    
    // 或者写成
    
    function foo() {
      console.log('foo');
    }
    
    export default foo;

import：

// 只输入默认方法的变量
    import obj from './export.js'
    // 同时输入默认方法和其他变量
    import obj,{name,age} from './export.js'

因为**`export default`**命令其实只是输出一个叫做`default`的变量，所以它后面不能跟变量声明语句。

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

>     export { es6 as default } from './someModule';
>     
>     // 等同于
>     import { es6 } from './someModule';
>     export default es6;
>     
>     
> 
>

### 模块的继承 ###

//a.js
    export var name = 'dd'
    
    //b.js
    export var age= '11'

//c.js
    export {name as a} from './a,js'
    export * from './b,js'

--------------------

> esModule是静态导入
> 
> CommonJS是动态导入
> 
> esModule输出的是值的引用，而CommonJS模块输出的是值的缓存，不存在动态更新

--------------------

# import() #

使用import命令只可以在top level中使用，import()可以在其他作用域去动态的导入，并且导入的是一个promise对象

import('./file').then(data=>{
            console.log(data);
    });
    // 动态的使用jsonp加载一个新的文件