【前端100问】Q26：介绍模块化发展历程

写在前面

此系列来源于开源项目：前端 100 问：能搞懂 80%的请把简历给我
为了备战 2021 春招
每天一题，督促自己
从多方面多角度总结答案，丰富知识
介绍模块化发展历程
简书整合地址：前端 100 问

正文回答

模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。

IIFE

使用自执行函数来编写模块化

特点：在一个单独的函数作用域中执行代码，避免变量冲突。

(function () {
  return {
    data: [],
  };
})();

AMD

使用 requireJS 来编写模块化

特点：依赖必须提前声明好。

define("./index.js", function (code) {
  // code 就是index.js 返回的内容
});

CMD

使用 seaJS 来编写模块化

特点：支持动态引入依赖文件。

define(function (require, exports, module) {
  var indexCode = require("./index.js");
});

CommonJS

nodejs 中自带的模块化。

var fs = require("fs");

UMD

兼容 AMD，CommonJS 模块化语法。

webpack(require.ensure)：webpack 2.x 版本中的代码分割。

ES Modules

ES6 引入的模块化，支持 import 来引入另一个 js 。

import a from "a";