【前端】CommonJS和ES Module的区别面试向

ゞ浴缸里的玫瑰 2023-09-27 15:11 112阅读 0赞

## CommonJS ##

### 特点 ###

*  社区标准
 *  使用函数实现
 *  仅node环境支持
 *  动态依赖（需要代码运行后才能确定依赖，可以在各种代码里写）
 *  动态依赖是同步执行的（本质上就是个函数而已）

### 原理： ###

// require函数的伪代码---通过代码可以看到 this/exports/module.exports是一样的
    function require(path){
        
      if(该模块有缓存吗){
        
        return 缓存结果;
      }
      function _run(exports, require, module, __filename, __dirname){
        
        // 模块代码会放到这里
      }
      
      var module = {
        
        exports: {
        }
      }
      
      _run.call(
        module.exports, 
        module.exports, 
        require, 
        module, 
        模块路径, 
        模块所在目录
      );
      
      把 module.exports 加入到缓存;
      return module.exports;
    }

以下三种写法是一样的
    exports.a = 'a';
    module.exports.b = 'b';
    this.c = 'c';

## ES Module ##

### 特点： ###

*  官方标准
 *  使用新语法实现（import xx from ‘…/ XX’）
 *  所有环境均支持
 *  同时支持静态依赖和动态依赖
    
    静态依赖：在代码运行前就要确定依赖关系
 *  动态依赖是异步的（返回promise）
 *  符号绑定

关于符号绑定：

// module a.js
    export var a = 1;
    export function changeA(){
        
      a = 2;
    }
    
    // index.js
    // 导入位置的符号和导出的符号并非赋值，它们完全是一个东西
    import {
        a, changeA} from './a.js';
    console.log(a); // 1
    changeA();
    console.log(a); // 2

动态导入代码举例

import('/modules/my-module.js')
      .then((module) => {
        
        // Do something with the module.
      });

静态导入代码举例

import {
         count, increase } from './counter.js';

## 面试题 ##

### 1. commonjs 和 es6 模块的区别是什么？ ###

> 参考答案：
> 
> 1.  CMJ 是社区标准，ESM 是官方标准
> 2.  CMJ 是使用 API 实现的模块化，ESM 是使用新语法实现的模块化
> 3.  CMJ 仅在 node 环境中支持，ESM 各种环境均支持
> 4.  CMJ 是动态的依赖，同步执行。ESM 既支持动态，也支持静态，动态依赖是异步执行的。
> 5.  ESM 导入时有符号绑定，CMJ 只是普通函数调用和赋值

### 2. export 和 export default 的区别是什么？ ###

> 参考答案：
> 
> export 为普通导出，又叫做具名导出，顾名思义，它导出的数据必须带有命名，比如变量定义、函数定义这种带有命名的语句。在导出的模块对象中，命名即为模块对象的属性名。在一个模块中可以有多个具名导出
> 
> export default 为默认导出，在模块对象中名称固定为 default，因此无须命名，通常导出一个表达式或字面量。在一个模块中只能有一个默认导出。

### 3. 下面的模块导出了什么结果？ ###

exports.a = 'a';
    module.exports.b = 'b';
    this.c = 'c';
    module.exports = {
        
      d: 'd'
    }

> 参考答案：
> 
>     {
>           d: 'd' }

### 4. 下面的代码输入什么结果？ ###

// module counter
    var count = 1;
    export {
        count}
    export function increase(){
        
      count++;
    }
    
    // module main
    import {
         count, increase } from './counter';
    import * as counter from './counter';
    const {
         count: c } = counter;
    increase();
    console.log(count);
    console.log(counter.count);
    console.log(c);