緣由

“懶”在軟件設計中，有著重大的意義。最常見的兩種“懶”，便是：

懶得計算

懶得加載

“懶得計算”常見于服務器端：

比如Multiplayer Online Role-PlayingGame，客戶端主動計算，游戲服務器平滑過渡，在性能、游戲同步性找一個合適恰當的點。其目的是節約服務器端CPU、內存等的消耗，把許多消耗性能的計算分布在玩家電腦上；

比如cache，任何cache的目的都是：懶得重新計算，因為我已經計算過了。

比如web應用的表單校驗，在數據提交給服務器前進行數據有效性校驗，當然這樣的目的不是為了省去服務器端的校驗，客戶端與服務器雙校驗是必須的，只是過濾一部分正常手段提交錯了的格式信息，從而偷一定程度的懶；

“懶得加載”常見于瀏覽器端：比如圖片、視頻、音頻、css、js等的加載。

拿最常見的焦點圖滾動來說：焦點圖什么時候初始化完畢？等所有圖片加載完成還是第一張圖片加載完成？這里可以好好考慮延遲加載。

比如一三屏的網頁，用戶打開時候處于第一屏？第二屏和第三屏的圖片是否要加載？還是根據用戶所處的viewport去加載viewport內部的圖片？

OK，上面說的都跟本文無關，本文主要講的是js按需加載。

舉個場景

有這樣一個頁面：

如你所見，用戶打開網站，頁面有一個a標簽，點擊可跳轉到美女網站，頁面還有一個按鈕，點擊可產生一個運動的小球。如下圖所示：

所以專門正對小球抽象出一個對象Ball.js：

define("Ball", {
    init: function (x,y,r,vx,vy,text) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.d = 2 * r;
        this.vx = vx;
        this.vy = vy;
        this.text = text;
        this.element = document.createElement("div");
        this.element.innerHTML = text;
        this.element.style.cssText = "text-align:center;position:absolute; -moz-border-radius:" + this.d + "px; border-radius: " + this.d + "px; width: " + this.d + "px; height: " + this.d + "px;background-color:green;line-height:" + this.d + "px;color:white;";
        document.body.appendChild(this.element);
        var self = this;
        this.loop = setInterval(function () {
            self.tick();
        }, 15)
    },
    tick: function () {
        this.x += this.vx;
        this.y += this.vy;
        this.element.style.left = this.x + "px";
        this.element.style.top = this.y + "px";
    }
})

后來，網站架構師經過隨機抽樣統計，發現打開這個頁面的10000人當中，其中有9999人點擊了美女網站直接跳轉去看美女了，而僅剩的1人還是個女同胞，打開該頁面后立馬直接關閉，生怕自己老公發現這塊寶地。最后統計的結果就是：那個create a ball 的就根本沒有人按過。

既然create a ball從未有人點擊，那么這個Ball.js就白白加載了，浪費了用戶帶寬。

這種場景在各種網站中太多了，比如youku登錄相關的彈出層的js，彈出層里表單驗證的js。用戶進入頁面的時候可能僅僅只是想要看視頻。所以登錄相關的js可以延遲到用戶點擊登錄之后再進行加載和執行。當然這個是js非常小，影響甚微，但是如果某一項目板塊特別大粒度，按需加載執行就特別重要。

解決方案

KMDjs作為JS工程化終極解決方案，以Kill AMD和CMD為己任，肯定會提供相關的解決方案。

先說一下，KMDjs的懶執行。這點KMDjs開銷真的是太小了，因為大部分邏輯都在init才真正執行，所以KMDjs模塊ready的開銷僅僅是創建類。

KMDjs又是怎么解決懶加載的呢？不賣關子，直接上碼：

var crtBtn = document.getElementById("crtBtn");
var balls = [];
crtBtn.onclick = function () {
    kmdjs.get("HelloKMD.Ball", function (Ball) {
        var ball = new Ball(100, 100, 28, 1, 2, "KMD.js");
        balls.push(ball);
    });        
}

當然，也支持 promise style：

kmdjs.get("HelloKMD.Ball").then(function (Ball) {
    var ball = new Ball(100, 100, 28, 1, 2, "KMD.js");
    balls.push(ball);
});

初衷受挫

其實，上面不是我最初想要的lazy方式。我最初想要的是這樣的結果：

kmdjs.config({
    name:"HelloKMD",
    baseUrl: "js",
    classes: [
        { name: "HelloKMD.Ball", lazy:true },
        { name: "Util.Bom",url:"Util" }
    ]

});
define("Main",["Util"], {
    init: function () {

        var crtBtn = document.getElementById("crtBtn");
        var balls = [];
        crtBtn.onclick = function () {
            var ball = new Ball(100, 100, 28, 1, 2, "KMD.js");
            balls.push(ball);
        }
        var vp = Bom.getViewport();
        setInterval(function () {
            for (var i = 0, len = balls.length; i < len; i++) {
                var ball = balls[i];
                (ball.x + ball.r * 2 > vp[2] || ball.x < 0) && (ball.vx *= -1);
                (ball.y + ball.r * 2 > vp[3] || ball.y < 0) && (ball.vy *= -1);
            }          
        }, 100)
    }
})

可以看到代碼沒有任何更改，只不過在config里稍微配置了一番，但這幾乎要把wind.js集成進來，把

var ball = new Ball(100, 100, 28, 1, 2, "KMD.js");

變成

var ball=$await(new Ball(……..));

而且要去分析ast，還要去分析current scope，還要遍歷scope tree，還要去考慮build的問題，還要去…

最終我放棄！選擇了這種kmdjs.get的還不錯的方式。如果你有更好的想法、建議或意見，請第一時間告訴我，我會將其糅合進0.0.3版本當中。

地址

https://github.com/kmdjs/kmdjs

目前還是0.02版本，kmdjs.get將在0.0.3出現…