JavaScript模块化

JavaScript模块化的优点：

1. 可以直接加载最表层文件，其他文件会根据依赖关系自动引用
2. 工具函数中的函数，无需定义为全局变量，不会带来污染和覆盖

JavaScript现阶段主要的两种模块化方式为AMD和CommonJS

---

AMD

1. require.js 遵循AMD模块化加载规范
2. 全局 define 函数定义引用文件
3. 全局 require 函数用来引用文件
4. 依赖的JS文件会自动，异步加载

使用方法

// util.js
define(function(){
    // 底层工具函数，没有要引入依赖的文件
    return {
        getFormatDate: function (date, type) {
    		// type === 1 返回 2018-10-12
    		// type === 2 返回 2018年10月12日
    		// ...
		}
    }
})

// a-util.js
define(['./util.js'], function (util) {
    return {
        aGetFormatDate: function (date) {
    	return getFormatDate(date, 2)
		}
    }
})

// a.js
define(['./a-util.js'], function(aUtil) {
    // 只有define的函数才可以被require
    return {
        printDate: function (date) {
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})

// 首先定义入口文件main.js
require(['./a.js'], function(a) {
    // 引入a.js文件并把它返回的对象作为参数a传递进来
    var dt = new Date()
	console.log(aGetFormatDate(dt))
})

// 1.在html中引入require.js同时使用data-main属性加载入口文件main.js
// 2.一个页面只能引用一次requirejs，只能有一个入口文件，如强行引用多个requirejs与入口文件，则只会加载顺序最前面的那个。
<script src="/require.min.js" data-main="./main.js"></script>

---

CommonJS

1. nodejs 模块化规范，现在被大量的在前端使用
2. 前端开发依赖的插件和库，都可以从npm中获取
3. 构建工具的高度自动化，使得使用npm的成本非常低
4. CommonJS 不会异步加载JS，而是同步一次性加载出来

使用方法

配合打包工具webpack一起使用

// util.js
module.exports = {
    getFormatDate: function (date, type) {
        // ...
    }
}

// a-util.js
var util = require('util.js')
module.exports = {
    aGetFormatDate: function (date) {
        return util.getFormatDate(date)
    }
}

// a.js
var aUtil = require('a-util.js')
var today = aUtil.aGetFormatDate()
console.log(today)

---