kmdjs和循環(huán)依賴

AlienZHOU 發(fā)布于2019-08-19 18:31 / 1195人閱讀

摘要：從很早的版本就開始，是支持循環(huán)依賴的。比如下面的代碼會(huì)被編譯成要支持循環(huán)依賴其實(shí)有個(gè)要求，就是。不是的循環(huán)依賴是無解的循環(huán)依賴。所以在初始化階段，這樣的循環(huán)依賴是被允許的，因?yàn)槎际恰?/p>

循環(huán)依賴

循環(huán)依賴是非常必要的，有的程序?qū)懼鴮懼脱h(huán)依賴了，可以提取出一個(gè)對(duì)象來共同依賴解決循環(huán)依賴，但是有時(shí)會(huì)破壞程序的邏輯自封閉和高內(nèi)聚。所以沒解決好循環(huán)依賴的模塊化庫、框架、編譯器都不是一個(gè)好庫、框架、編譯器。

kmdjs的本質(zhì)就是{}，從{}擴(kuò)展出的tree。從很早的版本就開始，是支持循環(huán)依賴的。比如下面的代碼：

define("namespace1.A",["namespace2"], {
    ctor: function () {
        this.b = new B();
    }
})

define("namespace2.B",["namespace1"] , {
    ctor: function () {

    },
    xx: function () {
        var a = new A();
    }
})

會(huì)被kmdjs編譯成：

var namespace1 = {};
var namespace2 = {};

namespace1.A = Class.extend({
    ctor: function () {
        this.b = new namespace2.B();
    }
})

namespace2.B = Class.extend({
    ctor: function () {

    },
    xx: function () {
        var a = new namespace1.A();
    }
})

要支持循環(huán)依賴其實(shí)有個(gè)要求，就是lazy using。不是lazy using的循環(huán)依賴是無解的循環(huán)依賴。
怎么理解上面這句話呢？看上面的代碼，Class.extend執(zhí)行完之后，各自依賴的東西是不會(huì)被調(diào)用的。
A代碼里的new namespace2.B()要在new namespace1.A的時(shí)候才會(huì)被調(diào)用。
B代碼里的new namespace1.A()要var a = new namespace1.A;a.xx()之后被調(diào)用后才會(huì)被執(zhí)行。
所以在初始化階段，這樣的循環(huán)依賴是被允許的，因?yàn)槎际?strong>lazy using。只要滿足lazy using，執(zhí)行順序就不重要了，如果不是lazy using（如靜態(tài)屬性方法的設(shè)置），執(zhí)行順序就必須把依賴的項(xiàng)先執(zhí)行。
如上面所說，不是所有的循環(huán)依賴都能夠解決的，比如看C#里面的無解的循環(huán)依賴的例子：

namespace Project1
{
    public class A
    {
        public static B b = new B();
    }
}

namespace Project1
{
    public class B
    {
        public static A a = new A();
    }
}

上面的代碼編譯時(shí)候就會(huì)報(bào)錯(cuò)。怎么改成有解，那么就要lazy using：

namespace Project1
{
    public class A
    {
        public static B b = new B();
    }
}

namespace Project1
{
    public class B
    {
        public int testMethod()
        {
            A a = new A();
            return 1;
        }
    }
}

這樣的依賴編譯器是可以解決的。

kmdjs 0.1.4

kmd的意思是 kernel module definition。該版本和以前的主要變化如下：

kmdjs文件大小從以前的一萬多行代碼變成了一百多行代碼

從以前的namespace+class組織項(xiàng)目變成namespace+module組織項(xiàng)目

kmdjs API

kmdjs.config
用于配置 namespace + module和文件路徑的mapping

kmdjs.config({
    "util.bom":"js/util/bom.js",
    "app.Ball":"js/ball.js",
    "util.dom":"js/util/dom.js",
    "util.dom.test":"js/util/test.js",
    "main": "js/main.js"
});

kmdjs.main
程序的入口代碼。
kmdjs.define
定義模塊

kmdjs.define("main",["util.bom","app.Ball","util.dom.test"], function(bom,Ball,test) {

    var ball = new Ball(0, 0, 28, 1, -2, "kmdjs");
    alert(test.m(3, 3));
    var vp = bom.getViewport();

    setInterval(function () {
        ball.tick();
        (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);
    }, 15);

});

如果只傳兩個(gè)參數(shù)，代表不依賴任何模塊。這里和AMD一樣，在factory的回調(diào)里把依賴注入到里面。
但是也直接在代碼里把namespace寫進(jìn)去訪問，如下所示：

kmdjs.define("main",["util.bom","app.Ball"], function() {

    var ball = new app.Ball(0, 0, 28, 1, -2, "kmdjs");
    var vp = util.bom.getViewport();

    setInterval(function () {
        ball.tick();
        (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);
    }, 15);

});

而有的時(shí)候必須使用上面這種方式用來解決循環(huán)依賴導(dǎo)致執(zhí)行順序問題帶來的注入undefined：如：

kmdjs.define("util.dom",["util.bom"] ,function(bom){
    var Dom={};

    Dom.add = function(a,b){
        //循環(huán)依賴導(dǎo)致的bom undefined，所以這里寫上namespace
        return util.bom.sub(a,b);
    }

    return Dom;
});

和

kmdjs.define("util.bom",["util.dom"], function(dom){
    var Bom={};

    Bom.getViewport=function() {
        alert(dom.add(1,4));
      
    };

    Bom.sub = function(a,b){
        return a-b;
    };
    return Bom;
});

bundler

可以通過main傳入回調(diào)函數(shù)，在回調(diào)函數(shù)中拿到編輯打包好的字符串。

kmdjs.main(function(bundler){
    alert(bundler)
});

如上面的例子打包出來的代碼：

var util={};
var app={};
util.dom={};
var main={};

util.dom = (function (bom){
    var Dom={};

    Dom.add = function(a,b){
        return util.bom.sub(a,b);
    }

    return Dom;
})(util.bom);

app.Ball = (function (){
    var Ball = 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.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);

    };

    Ball.prototype.tick= function () {
        this.x += this.vx;
        this.y += this.vy;
        this.element.style.left = this.x + "px";
        this.element.style.top = this.y + "px";
    };

    return Ball;
})();

util.dom.test = (function (){
    var Element={};

    Element.m = function(a,b){
        return a*b;
    }

    return Element;
})();

util.bom = (function (dom){
    var Bom={};

    Bom.getViewport=function() {
        alert(dom.add(1,4));
        var d = document.documentElement, b = document.body, w = window, div = document.createElement("div");
        div.innerHTML = "  ";
        var lt = !(div.firstChild.nodeType === 3) ?
        { left: b.scrollLeft || d.scrollLeft, top: b.scrollTop || d.scrollTop } :
        { left: w.pageXOffset, top: w.pageYOffset };
        var wh = w.innerWidth ?
        { width: w.innerWidth, height: w.innerHeight } :
            (d && d.clientWidth && d.clientWidth != 0 ?
            { width: d.clientWidth, height: d.clientHeight } :
            { width: b.clientWidth, height: b.clientHeight });

        return [lt.left, lt.top, wh.width, wh.height]
    };

    Bom.sub = function(a,b){
        return a-b;
    };
    return Bom;
})(util.dom);

main = (function (bom,Ball,test) {

    var ball = new Ball(0, 0, 28, 1, -2, "kmdjs");
    alert(test.m(3, 3));
    var vp = bom.getViewport();

    setInterval(function () {
        ball.tick();
        (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);
    }, 15);

})(util.bom,app.Ball,util.dom.test);

Github

https://github.com/kmdjs/kmdjs