面试之《commonjs,requirejs和es6 Module的区别》

设计理念

  • CommonJS:是为服务器端环境设计的模块化规范,以同步加载模块为核心思想。服务器端读取文件速度快,同步加载不会造成明显性能问题,方便开发者在代码执行前就确定模块间的依赖关系,便于管理和维护。
  • RequireJS(AMD):为浏览器环境量身打造,遵循异步模块定义(AMD)规范。考虑到浏览器中网络请求的异步性,采用异步加载模块的方式,避免同步加载导致的页面阻塞,提升页面响应性能。
  • ES6 Module:是 JavaScript 官方推出的标准化模块系统,旨在统一服务器端和浏览器端的模块化开发。它既考虑了代码的静态分析,又支持动态导入,为 JavaScript 提供了更规范、更强大的模块化方案。

语法格式

  • CommonJS:使用 require() 函数引入模块,module.exportsexports 导出模块。
// 导出模块,math.js
const add = (a, b) => a + b;
module.exports = {
    add
};

// 引入模块,main.js
const math = require('./math');
console.log(math.add(1, 2)); 
  • RequireJS(AMD):用 define() 函数定义模块,require() 函数加载模块。
// 定义模块,math.js
define([], function () {
    const add = (a, b) => a + b;
    return {
        add
    };
});

// 加载模块,main.js
require(['math'], function (math) {
    console.log(math.add(1, 2)); 
});
  • ES6 Module:使用 import 关键字引入模块,export 关键字导出模块,有默认导出和命名导出两种方式。
// 导出模块,math.js
export const add = (a, b) => a + b;
export default {
    add
};

// 引入模块,main.js
import { add } from './math.js';
import math from './math.js';
console.log(add(1, 2)); 
console.log(math.add(1, 2)); 

加载方式

  • CommonJS:同步加载模块。执行 require() 函数时,会立即加载并执行被引入的模块,后续代码在模块加载完成前会被阻塞。
// 同步加载模块
const fs = require('fs'); 
const data = fs.readFileSync('file.txt', 'utf8');
  • RequireJS(AMD):异步加载模块。require() 函数发起异步请求加载模块,不阻塞后续代码执行,模块加载完成后执行回调函数并传入模块。
// 异步加载模块
require(['jquery'], function ($) {
    $('body').css('background-color', 'red');
});
  • ES6 Module:静态加载模块(在编译阶段就确定模块依赖关系),默认是异步加载资源。在浏览器中,模块通过

你可能感兴趣的:(面试,笔记,面试,es6,前端)