模塊化本身就是一個面試的問題
知識點#####
- 不使用模塊化的情況
函數
//util.js getFormatDate函數
function getFormatDate(date,type){
//type===1返回2017-07-17
//type===2返回2017年7月17日
//...
}
//a-util.js aGetFormatDate函數 使用getFormatDate
function aGetFormatDate(date){
//要求返回 2017年7月17日
return getFormatDate(date,2)
}
//a.js
var dt=new Date()
console.log(aGetFormatDate(dt));
調用
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="a-util.js"></script>
<script type="text/javascript" src="a.js"></script>
1.js文件引入順序必須遵循函數層級引用的順序，最先引入util.js，然后a-util.js,以此類推
2.這些代碼中的函數必須是全局變量，才能暴露給使用方，會有全局變量污染的問題
3.a.js知道要引用a-util.js，但是它并不知道還依賴于util.js，代碼邏輯并不清晰，所以要使用模塊化
- 使用模塊化
//util.js
export{
getFormatDate:function(date,type){
//type===1返回2017-07-17
//type===2返回2017年7月17日
//...
}
}
//a-util.js
var getFormatDate=require('util.js')
export{
aGetFormatDate:function(date){
//要求返回 2017年7月17日
return getFormatDate(date,2)
}
}
//a.js
var aGetFormatDate=require('a-util.js')
var dt=new Date()
console.log(aGetFormatDate(dt));
1.直接使用<script type="text/javascript" src="a.js"></script>即可，其它會根據依賴關系自動引用
2.在util.js和a-util.js中沒有使用全局變量，不會帶來污染和覆蓋
3.以上代碼只是理想中的效果，用于描述模塊化的思想，和實際語法相比略有出入
- AMD
- A:異步 M:模塊 D:定義
- require.js <a>requirejs.org</a>
- 全局define函數
- 全局require函數
- 依賴JS會自動異步加載
- 使用requirejs完成剛才的例子
//util.js
define(function(){
var util={
getFormatDate:function(date,type){
if(type===1){
var month=date.getMonth()+1
var day=date.getDate()
if(month<10){
month='0'+month
}
if(day<10){
day='0'+day
}
return date.getFullYear()+'-'+month+'-'+day
}
if(type===2){
return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'
}
}
}
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(aUtil){
var a={
printDate:function(date){
console.log(aUtil.aGetFormatDate(date))
}
}
return a
})
//main.js
require(['./js/a.js'],function(a){
var date=new Date()
a.printDate(date)
})
//html
<script data-main="./js/main.js" src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js"></script>
-
CommonJS
CommonJS是Nodejs模塊化規范，現在被大量用前端
前端開發依賴的插件和庫，都可以從npm獲取
構建工具高度自動化，使npm成本非常低
CommonJS本身不會異步加載JS，而是一次性同步加載出來
module.exports={aaa:...,bbb:...}輸出模塊，require(xxx.js)引用模塊-
使用CommonJS
// util.js
module.exports={
getFormatDate:function(date,type){
if(type===1){
var month=date.getMonth()+1
var day=date.getDate()
if(month<10){
month='0'+month
}
if(day<10){
day='0'+day
}
return date.getFullYear()+'-'+month+'-'+day
}
if(type===2){
return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'
}
}
}//a-tuil var util=require('util.js') module.exports={ aGetFormatDate:function(date){ return util.getFormatDate(date,2) } }
-
AMD和CommonJS的使用場景
- 需要異步加載，使用AMD
- 使用npm后建議使用CommonJS
-
webpack
安裝
npm install webpack --save-dev
使用//webpack.config.js var path=require('path') var webpack=require('webpack') module.exports={ context:path.resolve(__dirname,'./src'), //找到src目錄 entry:{ //入口,在src下 app:'./app.js' }, output:{ path:path.resolve(__dirname,'./dist'), //輸出至dist目錄 filename:'bundle.js' //輸出文件名 }, plugins:[ new webpack.optimize.UglifyJsPlugin() //代碼壓縮 ] } //index.html <body> <div id="root"></div> <script src="dist/bundle.js"></script> </body> //hello.js module.exports={ print:function(){ console.log('hello'); } } //app.js var $=require('jquery') //調用npm安裝的jQuery var hello=require('./hello.js') var $root=$('#root') $root.html('<p>這是jquery插入的文字</p>') hello.print()
