JS模块化

• 现代模块化机制要解决的问题如下

1. 命名污染，全局污染，变量冲突等基础问题
2. 内聚且私有，变量不能被外界污染到
3. 怎么引入（依赖）其它模块，怎样暴露出接口给其它模块
4. 依赖顺序问题，比如以前的 Jquery 问题
5. 循环引用问题，等边界情况

一、CommonJS

服务端模块规范，可以实现服务器端模块重用，拷贝方式是是值拷贝；但加载模块是同步的，只有加载完成后才能执行后面的操作 。

//定义一个module.js文件
var A = function() {
    console.log('我是定义的模块');
}
//导出这个模块
//1.第一种返回方式 module.exports = A; 
//2.第二种返回方式 module.exports.test = A
//3.第三种返回方式 exports.test = A;
exports.test = A;



//再写一个test.js文件，去调用刚才定义好的模块，这两个文件在同一个目录下
var module = require("./module");  //加载这个模块

//调用这个模块，不同的返回方式用不同的方式调用
//1.第一种调用方式 module();
//2.第二种调用方式 module.test();
//3.第三种调用方式 module.test();
module.test();


// 执行: node test.js
node test.js
// 输出结果：我是定义的模块

二、AMD

可以实现异步加载依赖模块，并且会提前加载 ，require的时候加载；但使用需要先下载 require.js 文件，开发成本高，代码的阅读和书写比较困难。

// 编写一个module1.js文件
// 对象形式定义独立的模块
define({
    methodA: function() {
        console.log('我是module1的methodA');    
    },
    methodB: function() {
        console.log('我是module1的methodB');    
    }
});



// 编写一个module2.js文件
// 函数返回对象形式定义独立模块
define(function () {
    return {
        methodA: function() {
            console.log('我是module2的methodA');    
        },
        methodB: function() {
            console.log('我是module2的methodB');    
        }
    };
});



// 编写一个module3.js文件
// 定义非独立的模块（这个模块依赖其他模块）
define(['module1', 'module2'], function(m1, m2) {
    return {
        methodC: function() {
            m1.methodA();
            m2.methodB();
        }
    };

});



//再定义一个main.js，去加载这些个模块
require(['module3'], function(m3){
    m3.methodC();
});


// 在一个html文件中去通过RequireJS加载这个main.js
<script data-main="main" src="require.js"></script>

// 浏览器控制台输出结果:
// 我是module1的methodA
// 我是module2的methodB

三、CMD

依赖就近，延迟执行；但需要下载seaJS模块 ，模块的加载逻辑偏重 ，依赖 SPM 工具打包。

// cmd.js
define(function(require, exports, module) {
    var a = require('./a');
    a.doSomething();
    // 此处略去 100 行
    var b = require('./b');   // 依赖可以就近书写
    b.doSomething();
    // ... 
})

// main.js
require(['cmd']);

四、ES6

在ES6之前，要想在前端做模块化开发，必须依赖第三方框架来实现，如：requireJS与seaJS。ES6的出现，完全可以取代AMD 、CMD规范和NodeJS支持的CommonJS 规范，浏览器和服务端都支持。

export default A
import A from './moduleA.js'

export class myClass { }
export var a = 'a'
export let b = 'b'
export const c = 'c'
export {
  good,
  nice
}

import { myClass, a, b, c, good, nice } from './export'