ES5模块化

模块化

知识点

• 不使用模块化的情况
• 使用模块化
• AMD
• CommonJS

不使用模块化

• util.js getFormatDate 函数里 （基础函数库）
• a-util.js aGetFormatDate函数 使用getFormatDate（a业务在util.js上二次封装）
• a.js aGetFormatDate 函数（a.js 引用a-util.js）

// util.js
function getFormatDate(date,type){
	//type === 1 返回 2017-06-15 格式的日期
	//type === 2 返回 2017年6月15日 格式日期
	//...
}
//a-util.js
function aGetFormatDate(date){
	//要求返回2017年6月15日格式
	return getFormatDate(date,2)
}
// a.js
var dt = new Date()
console.log(aGetFormatDate(dt))

使用

<script src="util.js"></script>
<script src="a-util.js"></script>
<script src="a.js"></script>
// 1. 这些代码中的函数必须是全局变量，才能暴露给使用方，全局变量污染，
//因为全局变量，可能被其他人覆盖掉
//强依赖，顺序不能乱
// 2. a.js 知道要引用a-util.js，但a.js不一定知道需要依赖util.js

使用模块化 （AMD异步模块加载规范）

require.js

引入require.js后，会有define、require这两个全局函数

• 全局define函数
• 全局require函数
• 依赖JS会自动、异步加载

//util.js
define(function(){
	var util = {
		getFormatDate: function(date, type){
			if(type === 1){
				return '2017-06-15'
			}
			if(type === 2){
				return '2017年6月15日'
			}
		}
	}
	return util
})
//a-util.js
define(['./util.js'],function(util){
//参数util就是util.js 返回出的对象 
	var aUtil = {
		aGetFormatDate: function(date){
			return util.getFormatDate(date,2)
		}
	}
	return aUtil
})
//a.js
define(['./a-util.js'],function(aUtil){
//参数aUtil就是a-util.js 返回出的对象 
	return {
		printDate: function(date){
			console.log(aUtil.aGetFormatDate(date))
		}
	}
})
//main.js //main.js作为入口文件
require(['./a.js'],function(a){
	var date = new Date()
	a.printDate(date)
})
//每个异步模块都会异步加载

<script data-main='./main.js' src='./requrie.js'>script>

异步加载，按需加载

CommonJS

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

使用CommonJS

//util.js
module.exports = {
	getFormatDate: function(date,type){
		if(type === 1){
			return '2017-06-15'
		}
		if(type === 2){
			return '2017年6月15日'
		}
	}
}
//a-util.js
var util = require('util.js')
module.exports = {
	aGetFormatDate: function(date){
		return util.getFormatDate(date,2)
	}
}

AMD和CommonJS的使用场景

• 需要异步加载JS，使用AMD
• 使用了npm之后建议使用CommonJS