Javascript中的模块化详解

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)

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

2.JavaScript模块化的历史

8.CMD