第2章{ 2-10 使用依賴表控制combo }

使用依賴表控制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失敗,請求如下圖:

http://img.mukewang.com/5440b8fc000139e209720346.jpg

那麼如何將 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

配置依賴後,看下請求:

http://img.mukewang.com/5440caad00012e9008800336.jpg

依賴表自動抽取

回顧下 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>

發佈了36 篇原創文章 · 獲贊 12 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章