无模块化

JavaScript 并不支持 import 这种写法，也就是说在一个 JS 文件中根本无法引用别的 JS 文件中的方法。正确的解决方案是在 index.js 中直接调用 add 方法，同时在 index.html 中引用 math.js

<html>
  <head>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="math.js"></script>
  </head>
  <body>
    <p id="hello"> Hello Wrold </p>
    <input type="button" onclick="onPress()" value="Click me" />
  </body>
</html>

// math.js
var math = (function() {
    var base = 0;
    return {
        add: function(a, b) {
            return a + b + base;
        },
    };
})();
//好的处理方式是将 math 定义在一个闭包里，从而隐藏内部属性base,避免被外部修改。

// index.js
function onPress() {
    var p = document.getElementById('hello');
    p.innerHTML = add(1, 2);
}

//弊端：
//index.js 无法 import，依赖于 HTML 的引用
//index.js 中无法对 add 方法的来源做区分，缺少命名空间的概念

CommonJS规范

Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口（不推荐直接用exports），用require加载模块。 commonJS用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载，比如下边AMD规范。

// math.js
var base = 0;
function add(a, b) {
  return a + b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
  add: add,
  base: base
}

// 引用自定义的模块时，参数包含路径，可省略.js
var math = require('./math');
math.add(2, 5);

AMD规范和require.js

AMD规范是异步加载模块，允许指定回调函数，AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。这里介绍用require.js实现AMD规范的模块化

AMD写法:

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


require(['myModule1', 'myModule2'], function (m1, m2){
    // 主回调逻辑
    m1.printName();
    m2.printName();
});

具体例子如下：

//index.html
<!DOCTYPE html>
<html>
<head>
  <title>virtual dom test</title>
  <script src="js/require.js" data-main="js/index"></script>

</head>
<body>
<div id='sum'></div>
</body>
</html>


// 定义math.js模块
define(function () {
    var basicNum = 0;
    var add = function (x, y) {
        return x + y;
    };
    return {
        add: add,
        basicNum :basicNum
    };
});


//index.js
// 首先用config()指定各模块路径和引用名
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",  //实际路径为js/lib/jquery.min.js
    "math": "math"
  }
});
// 执行基本操作
// 引用模块，将模块放在[]内
require(['jquery', 'math'],function($, math){
  var sum = math.add(10,20);
  $("#sum").html(sum);
});


//由于这两个模块是异步下载，因此哪个模块先被下载、执行并不确定，
//但可以肯定的是主回调一定在所有依赖都被加载完成后才执行。
//Require.js 的这种写法也被称为前置加载，在写主逻辑之前必须指定所有的依赖，
//同时这些依赖也会立刻被异步加载。
//Require.js download link--> https://requirejs.org/docs/download.html
//缺点：不能按需加载、开发成本大

CMD和sea.js

AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。 AMD是依赖关系前置,在定义模块的时候就要声明其依赖的模块; CMD是按需加载依赖就近,只有在用到某个模块的时候再去require

CMD写法:

define(function(require, exports, module) {
    var a = require('./a'); //在需要时申明
    a.doSomething();
    if (false) {
        var b = require('./b');
        b.doSomething();
    }
});

sea.js

// 定义模块 math.js
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
// 加载模块
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

ES6 Module

其模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。由于ES6目前无法在浏览器中执行，我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。一个模块只能有一个export default。

//定义模块 math.js
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export default { basicNum, add };

// 引用模块
import math from './math';
function test(ele) {
    ele.textContent = math.add( 99 + math.basicNum);
}

JS之模块化

无模块化

CommonJS规范

AMD规范和require.js

CMD和sea.js

ES6 Module