模块化
知识点
- 不使用模块化的情况
- 使用模块化
- 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)
})
//每个异步模块都会异步加载
<!--加载使用main.js-->
<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