什么是模块化?
模块化可以更加清晰的将文件与文件之间的引用关系更好的配合.当文件与文件之间有很多引用关系时,我们不必要知道底层的文件A与文件B如何引用,只需要引入最上层的文件,剩下的都自动引用了.如果不使用模块化,在文件引用时,这个函数必须是全局变量,那样则会造成全局的污染
AMD
- requirejs.js
- 全局define函数
- 全局requier函数
- JS会自动异步加载
Demo
使用AMD要在html中引入require.js,其中data-main是入口
<script src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js" data-main="./main.js"></script>
util.js
它不依赖任何模块,也就不需要引入依赖了
define(function(){
var util = {
getFormatDate:function(date,type){
if (type === 1) {
return '2017-06-20'
}
if (type === 2) {
return '2017年6月20日'
}
}
}
return util
})
a-util.js
define(['./util.js'],function(util){
var aUtil = {
aGetFormatDate: function(date){
return util.getFormatDate(date,2)
}
}
return aUtil
})
a.js
define(['./a-util.js'],function(aUitl){
var a = {
printDate:function(date){
console.log(aUitl.aGetFormatDate(date))
}
}
return a
})
main.js
最后,main.js作为一个入口,不需要定义任何东西了.所以使用require()
require(['./a.js'],function(a){
var date = new Date()
a.printDate(date)
})
CommonJS
nodejs模块化规范,现在被大量的应用于前端
前端开发依赖的插件和库,都可以从npm中获取
构建工具的高度自动化,使得使用npm的成本非常低
CommonJS不会异步加载JS,而是同步一次性加载出来
Demo
module.exports = {
print:function(){
console.log(123)
}
}
var aUtil = require('./a-util.js')
aUtil.print()
