Javascript中的模块化详解

1.什么是模块化、模块化开发？

• 事实上模块化开发最终的目的是将程序划分成一个个小的结构；
• 这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构；
• 这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；
• 也可以通过某种方式，导入另外结构中的变量、函数、对象等；

上面说提到的 结构 ，就是 模块 ；按照这种 结构划分 开发程序的过程，就是 模块化开发 的过程；

2.JavaScript模块化的历史

      在网页开发的早期， Brendan Eich 开发JavaScript仅仅作为一种 脚本语言 ，做一些简单的表单验证或动画实现等，那个时候代码还是很少的：

• 这个时候我们只需要讲JavaScript代码写到 // 首先用config()指定各模块路径和引用名 require.config({ baseUrl: './src', paths: { foo: "foo", // 实际路径为./src/foo bar: "bar" } }) // 引用模块的时候，我们将模块名放在[ ]中作为requier()的第一参数 require(["foo", "bar"], function(foo) { console.log("main:", foo) })

  // foo.js
  define(function() {
    const name = "why"
    const age = 18
    function sum(num1, num2) {
      return num1 + num2
    }
    return {
      name,
      age,
      sum
    }
  })
  

  如果我们定义的模块本身也依赖其他模块,那就需要将它们放在[ ]中作为define()的第一参数。

  // bar.js
  define(["foo"], function(foo) {
    console.log("bar:", foo)
    const name = "bar"
    return { name }
  })

  AMD 在依赖模块加载完成后就 直接执行依赖模块，依赖模块的执行顺序和我们书写的顺序不一定一致，并且即使在回调函数里面没有用到该模块，也会加载执行。

  define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
      // 等于在最前面声明并初始化了要用到的所有模块
      if (false) {
        // 即便没用到某个模块 b，但 b 还是提前执行了
        b.foo()
      } 
  });

8.CMD

这种方案采用 异步加载的方式来加载模块, CMD 在依赖模块 加载完成后并不执行，只是下载而已，等到所有的依赖模块都加载好后，进入回调函数逻辑， 遇到 require 语句 的时候才执行对应的模块，这样模块的执行顺序就和我们书写的顺序保持一致了。

sea.js 实现了 CMD 规范。它和require.js的区别在于对依赖模块的执行时机的处理不同。

// 定义模块 math.js
define(function(require, exports, module) {
    var a = require('./a'); //遇到require语句时，才会执行对于模块的代码
    a.doSomething();
    if (false) {
        var b = require('./b'); // 该语句不会执行，所以./b对应的模块也不会执行
        b.doSomething();
    }
   let add = function(a,b){
        return a+b;
    }
    exports.add = add; // 导出add
});

// 加载模块
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

参考：

一文了解js中导入模块import、import()和require()的区别 - 掘金 (juejin.cn)