kmdjs和循環(huán)依賴
2016-06-13 18:26 【當(dāng)耐特】 閱讀(1087) 評論(0) 收藏 舉報循環(huán)依賴
循環(huán)依賴是非常必要的，有的程序?qū)懼鴮懼脱h(huán)依賴了，可以提取出一個對象來共同依賴解決循環(huán)依賴，但是有時會破壞程序的邏輯自封閉和高內(nèi)聚。所以沒解決好循環(huán)依賴的模塊化庫、框架、編譯器都不是一個好庫、框架、編譯器。
kmdjs的本質(zhì)就是{}，從{}擴展出的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();
}
})
會被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)依賴其實有個要求，就是lazy using。不是lazy using的循環(huán)依賴是無解的循環(huán)依賴。
怎么理解上面這句話呢？看上面的代碼，Class.extend執(zhí)行完之后，各自依賴的東西是不會被調(diào)用的。
A代碼里的new namespace2.B()要在new namespace1.A的時候才會被調(diào)用。
B代碼里的new namespace1.A()要var a = new namespace1.A;a.xx()之后被調(diào)用后才會被執(zhí)行。
所以在初始化階段，這樣的循環(huán)依賴是被允許的，因為都是lazy using。只要滿足lazy using，執(zhí)行順序就不重要了，如果不是lazy using（如靜態(tài)屬性方法的設(shè)置），執(zhí)行順序就必須把依賴的項先執(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();
}
}
上面的代碼編譯時候就會報錯。怎么改成有解，那么就要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組織項目變成namespace+module組織項目
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);
});
如果只傳兩個參數(shù)，代表不依賴任何模塊。這里和AMD一樣，在factory的回調(diào)里把依賴注入到里面。
但是也直接在代碼里把namespace寫進去訪問，如下所示：
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);
});
而有的時候必須使用上面這種方式用來解決循環(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 = " <div></div>";
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);
浙公網(wǎng)安備 33010602011771號