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

54 阅读 0 评论 36 点赞

我是靠谱客的博主糟糕大船，最近开发中收集的这篇文章主要介绍【前端】CommonJS和ES Module的区别面试向CommonJSES Module面试题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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 模块的区别是什么？

参考答案：

CMJ 是社区标准，ESM 是官方标准
CMJ 是使用 API 实现的模块化，ESM 是使用新语法实现的模块化
CMJ 仅在 node 环境中支持，ESM 各种环境均支持
CMJ 是动态的依赖，同步执行。ESM 既支持动态，也支持静态，动态依赖是异步执行的。
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);