[转载]淘宝Kissy框架分析【二】 – BlueDream – 博客园.
首先,让我们从kissy核心文件夹开始. 第一个文件kissy.js也是主架构文件.
源码如下:
/**
* @module j1616
* @author liangchaoyjs@163.com
*/
(function(win, J, undefined) {
if (win[J] === undefined) win[J] = {};
J = win[J];
var doc = win.document,
mix
= function(r, s, ov, wl) {
if (!s || !r) return r;
if (ov === undefined) ov = true;
var i, p, l;
if (wl && (l = wl.length)) {
for (i = 0; i < l; i++) {
p = wl[i];
if (p in s) {
if (ov || !(p in r)) {
r[p] = s[p];
}
}
}
} else {
for (p in s) {
if (ov || !(p in r)) {
r[p] = s[p];
}
}
}
return r;
},
isReady
= false,
readyList
= [],
readyBound
= false;
mix(J, {
version:
‘@VERSION@‘,
_init:
function() {
this.Env = { mods: {} };
},
add:
function(name, fn) {
var self = this;
self.Env.mods[name]
= {
name: name,
fn: fn
}
fn(self);
return self;
},
ready:
function(fn) {
if (!readyBound) this._bindReady();
if (isReady) {
fn.call(win, this);
} else {
readyList.push(fn);
}
return this;
},
_bindReady:
function() {
var self = this,
doScroll = doc.documentElement.doScroll,
eventType = doScroll ? ‘onreadystatechange‘ : ‘DOMContentLoaded‘,
COMPLETE = ‘complete‘;
readyBound
= true;
if (doc.readyState === COMPLETE) {
return self._fireReady();
}
//w3c mode
if (doc.addEventListener) {
function domReady() {
doc.removeEventListener(eventType, domReady, false);
self._fireReady();
}
doc.addEventListener(eventType, domReady, false);
}
else {
// IE mode
if (win != win.top) { // iframe
function stateChange() {
if (doc.readyState === COMPLETE) {
doc.detachEvent(eventType, stateChange);
self._fireReady();
}
}
doc.attachEvent(eventType, stateChange);
}
else {
function readyScroll() {
try {
doScroll(‘left‘);
self._fireReady();
} catch(e) {
setTimeout(readyScroll, 1);
}
}
readyScroll();
}
win.attachEvent(
‘onload‘, function() {
self._fireReady()
});
}
},
_fireReady:
function() {
if (isReady) return;
isReady
= true;
if (readyList) {
var fn, i = 0;
while (fn = readyList[i++]) {
fn.call(win, this);
}
readyList
= null;
}
},
mix: mix,
merge:
function() {
var o = {}, i, l = arguments.length;
for (i = 0; i < l; ++i) {
mix(o, arguments[i]);
}
return o;
},
augment:
function(r, s, ov, wl) {
mix(r.prototype, s.prototype || s, ov, wl);
return r;
},
extend:
function(r, s, px, sx) {
if (!s || !r) return r;
var OP = Object.prototype,
O = function(o) {
function F() {}
F.prototype = o;
return new F();
},
sp = s.prototype,
rp = O(sp);
r.prototype
= rp;
rp.constructor = r;
r.superclass = sp;
if (s !== Object && sp.constructor === OP.constructor) {
sp.constructor = s;
}
if (px) {
mix(rp, px);
}
if (sx) {
mix(r, sx);
}
return r;
},
namespace:
function() {
var l = arguments.length, o = null, i, j, p;
for (i = 0; i < l; ++i) {
p = (” + arguments[i]).split(‘.‘);
[‘app‘, ‘Shop‘]
o = this;
for (j = (win[p[0]] === o) ? 1 : 0; j < p.length; ++j) {
o = o[p[j]] = o[p[j]] || {};
}
}
return o;
},
app:
function(name, sx) {
var O = win[name] || {};
mix(O,
this, true, [‘_init‘, ‘add‘, ‘namespace‘]);
O._init();
return mix((win[name] = O), typeof sx === ‘function‘ ? sx() : sx);
},
log:
function(msg, cat, src) {
if (this.Config.Debug) {
if (src) {
msg = src + ‘: ‘ + msg;
}
if (win[‘console‘] !== undefined && console.log) {
console[cat && console[cat] ? cat : ‘log‘](msg);
}
}
return this;
},
error:
function(msg) {
if (this.Config.Debug) {
throw msg;
}
}
});
J._init();
J.Config
= { Debug: ‘@DEBUG@‘ };
})(window,
‘J1616‘);
首先整个函数通过简单的闭包机制实现了沙箱.然后将win[J]暴露给全局.所以我们就可以J1616.xx引用属性了.
1. mix函数
作用:将s的属性拷贝给r. ov(默认为true)为true则属性覆盖,为false则不覆盖. wl如果定义了.那么只有当s中含有wl定义的属性才会进行属性拷贝.
测试用例:
var r = {‘version‘: ‘beta0.0.1‘};
var s = {
version: ‘beta0.0.2‘,
_init: function() {
alert(‘init‘);
},
_login: function() {
alert(‘login‘);
},
_logout: function() {
alert(‘logout‘);
}
};
var J = J1616;
//////////////////////////////
//J.mix(r, s);
//alert(r.version); // beta0.0.2
//r._logout(); // logout
/////////////////////////////
//J.mix(r, s, false);
//alert(r.version); // beta 0.0.1
/////////////////////////////
//J.mix(r, s, true, [‘_init’, ‘_login’]);
//r._init(); // init
//r._login(); // login
//r._logout(); // error
/////////////////////////////
紧接着便用mix(J, {‘_init’:xx}); 实现了将属性赋予J上 其实就 等价于var J = {‘_init’:xxx};
2._init和add函数
作用:
当j1616.js一加载的时候便会执行_init函数. 这个函数给J维护了一个Env对象. 目前没太大作用.但应该是为了以后扩展接口方便.
add函数. 是注册一个模块. 并将J1616实例传入到回调函数中.
测试用例:
(function() {
var J = J1616;
J.add(‘module-name‘, function(J) {
alert(J.version); // 可以获取实例
J.DOM = {
info: function() {
alert(‘注册了一个DOM模块‘);
}
};
});
// 使用定义的module
J.DOM.info();
})();
3. ready函数
作用: 替代onload函数. onload函数需要图片等资源完全加载完毕才调用. 而ready在document构建完毕就开始执行.要更快一些.
原理:
两个标志: (1) isReady记录document是不是已经ready完毕. (2)readyBound记录是不是已经绑定了ready函数.
一个数组: readyList用来存储排队的需ready执行的函数.
整个流程就是:
如果没有绑定ready 就开始绑定domReady函数. 如果已经绑定并且isReady为true 即文档已经ready完毕.那么就直接执行. 否则就放入readyList列表中存储. 一旦ready完毕 就循环列表,依次执行存储在数组中的函数.
监听domReady的方法:
w3c 使用DOMContentLoaded IE下如果是在iframe中使用onreadystatechange, 非iframe中使用doScroll(‘left’)去检测. 最后使用onload函数兜底.防止onreadystatechange和doScroll晚于onload执行. 由于fireReady中有if (isReady) return;所以保证了函数只会运行一次.
注意: Kissy源码有些问题,在IE下.如果没有图片等资源.页面很快就加载完毕. load函数要早于ready函数…. 所以这里我将ready函数给修正了.
_bindReady: function() {
var self = this, DOMContentLoaded = null;
doScroll = doc.documentElement.doScroll,
eventType = doScroll ? ‘onreadystatechange‘ : ‘DOMContentLoaded‘,
COMPLETE = ‘complete‘;
readyBound
= true;
if (doc.readyState === COMPLETE) {
return self._fireReady();
}
//w3c model
if (doc.addEventListener) {
DOMContentedLoaded = function() {
doc.removeEventListener(eventType, DOMContentedLoaded, false);
self._fireReady();
}
doc.addEventListener(eventType, DOMContentedLoaded, false);
}
// IE model
else {
DOMContentedLoaded = function() {
if (doc.readyState === COMPLETE) {
doc.detachEvent(eventType, DOMContentedLoaded);
self._fireReady();
}
}
// 主要是这句 onreadystatechange会确保在onload之前执行.而kissy只用在iframe分支里
// 所以会出现onload要早于domready执行
doc.attachEvent(eventType, DOMContentedLoaded);
win.attachEvent(‘onload‘, function() {
self._fireReady()
});
var toplevel = false;
try {
toplevel = win.frameElement == null;
} catch(e) {}
if (doScroll && toplevel) {
function readyScroll() {
try {
doScroll(‘left‘);
} catch(e) {
setTimeout(readyScroll, 1);
return;
}
self._fireReady();
}
readyScroll();
}
}
},
_fireReady:
function() {
if (isReady) return;
isReady
= true;
if (readyList) {
var fn, i = 0;
while (fn = readyList[i++]) {
fn.call(win, this);
}
readyList
= null;
}
},
测试用例:
<body>
<img id=“inline-image“ src=“http://veimages.gsfc.nasa.gov/2429/globe_west_2048.jpg“/>
<script>
(function() {
var J = J1616;
J.ready(function(J) {
alert(‘domReady: ‘ + J.version);
});
window.onload = function() {
alert(‘onload: ‘ + J.version);
}
})();
</script>
</body>
4.merge函数
作用: 将多个对象合并为1个对象.进行的是浅拷贝. 一般用于设置默认参数时候使用:
测试用例:
(function() {
J1616.ready(function(J) {
var source = {
version: ‘beta0.0.1‘,
name: ‘kissy‘
};
var property = {
version: ‘beta0.0.2‘
};
var prototype = {
name: ‘j1616‘
}
var config = J.merge(source, property, prototype);
alert([config.version, config.name]);
// version: ‘beta0.0.2’ name: ‘j1616’
});
})();
5.augment函数
作用: 将一个函数的原型和另一个函数的原型或者一个对象合并. 然后也有ov和wl属性, 相当于改进版的mix函数.
测试用例:
(function() {
function Base() {};
Base.prototype = {
name: ‘kissy‘,
show: function() {
alert(this.name);
}
};
var Base2 = {
name: ‘j1616‘,
};
function Child() {};
Child.prototype = {
version: ‘beta0.0.1‘,
show: function() {
alert(this.version);
}
};
// 1.用Base的prototype覆盖Child的prototype. 覆盖的函数列表为show
// 2.用Base2的属性去覆盖Child的prototype.
//J1616.augment(Child, Base, true, [‘show’]);
//J1616.augment(Child, Base2);
//new Child().show(); // j1616
// 1.将Base的prototype和Child的prototype.属性合并但不覆盖
// 2.用Base2的属性去覆盖Child的prototype.
//J1616.augment(Child, Base, false);
//J1616.augment(Child, Base2);
//new Child().show(); // beta0.0.1
})();
Mikel
