使用依賴表控制combo
上一節我們學習了combo模塊用於減少http請求,但自動combo無法保證所有的模塊js都combo到一起,比如下面的代碼:
KISSY.use('kg/offline/2.0.0/index',function(s,Offline){
//use 表單校驗組件
KISSY.use('kg/auth/2.0.0/index');
});
二個use是有先後關係的,並不在一條鏈路上,就會導致二個組件js combo失敗,請求如下圖:
那麼如何將 offline 和 auth 組件combo到一塊呢?
KISSY.config('modules',{
'kg/offline/2.0.0/index':{
requires:['kg/auth/2.0.0/index']
}
});
這就是依賴表,我們定義了 offline 模塊依賴於 auth 模塊,相關於告訴 kissy ,我們要把這二個組件combo到一塊。
PS:留意關鍵字是 requires ,區別於上一節的別名設置 alias。
配置依賴後,看下請求:
依賴表自動抽取
回顧下 bee-demo 工程,build目錄就存在依賴表文件:http://demo.apebook.org/bee-demo/build/deps.js
內容如下:
/*generated by KMD*/
KISSY.config('modules',{
"bee-demo/index": {
"requires": [
"./mods/header",
"./mods/article"
]
}
});
這並非人肉書寫的依賴表,而是 KMD 自動抽取的,關於 KMD 的使用留待後面章節講解,大家知道有這文件即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dep</title>
<script src="//g.alicdn.com/kissy/k/1.4.8/seed-min.js" charset="utf-8" data-config="{combine:true}"></script>
</head>
<body>
<script>
KISSY.config('modules',{
'kg/offline/2.0.0/index':{
requires:['kg/auth/2.0.0/index']
}
});
KISSY.use('kg/offline/2.0.0/index',function(s,Offline){
//use 表單校驗組件
KISSY.use('kg/auth/2.0.0/index');
});
</script>
</body>
</html>