前端模块化整理汇总-CSDN博客

本文链接：https://blog.csdn.net/hymuuuu/article/details/138080233

异步加载，依赖前置，前置依赖建议写在前引用，在所有模块加载完成后立即执行回调函数，用户体验好，不容易造成卡顿
需要引用require.js

//math.js
define([], function () {
  function add(a, b) {
    return a + b;
  }
  return { add };
});

//main.js
require(["./math.js"], function(mathObj) {
  res = mathObj.add(5, 6);
  console.log(res);
})

//index.html
<html>
  <body></body>
</html>

<script src="./require.js"></script>
<script src="./main.js"></script>

//控制台打印11

异步加载，依赖就近，按需加载，在require引用的地方执行代码，性能好
需要引用sea.js

//math.js
define(function (require, exports, module) {
  function add(a, b) {
    return a + b;
  }
  exports.add = add;
});

//main.js
define(function (require, exports, module) {
  const add = require('./math');
  const res = add(5, 6);
  console.log(res);
});

//index.html
<html>
  <body></body>
</html>

<script src="./sea.js"></script>
<script src="./main.js"></script>

//控制台打印11

同步加载，运行时加载执行，容易阻塞进程，造成卡顿，一般用在服务端Node开发中，输出拷贝值，原始值改变不影响引用值
需要引用node.js

//math.js
module.exports = {
  add: function(a, b) {
    return a + b;
  }
}

//main.js
const math = require('./math.js');
const res = math.add(1, 2);

ES6

同步加载，编译时加载执行，因此必须放在代码块最顶层，输出原始值的引用，因此原始值改变会影响引用值
需要使用ES6标准

//math.js
const add = function(a, b) {
  return a + b;
}
export { add };

//main.js
import { add } from './math';

const res = add(1, 2);