Fixjs介绍
Fixjs是我打算在javascript技术领域开始积累的一个框架项目，这套框架主要为开发复杂组件提供底层的框架支持。
框架的类与接口我会尽量参考flash框架的实现。同时，我也会开放Fixjs的源代码，欢迎同仁一起学习、交流。
Fixjs 0.1.0已实现的内容
【基础方法，基础类】
trace()：页面调试输出
fixjs.Class：类定义
fixjs.Object：提供对象初始化，释放控制，克隆接口
fixjs.DisposeUtil：释放资源工具类
fixjs.CloneUtil：克隆资源工具类
fixjs.Map：哈希数据结构
【事件处理】
fixjs.events.Event：事件类
fixjs.events.EventDispatcher：事件派发类
自定义事件处理
本文的主角是fixjs.events.Event和fixjs.events.EventDispatcher，看看实际的使用例子：
<head>
<title></title>
<scriptsrc="js/fixjs/global.js"type="text/javascript"></script>
<scriptsrc="js/fixjs/events.js"type="text/javascript"></script>
<scriptsrc="js/fixjs/jquery-1.9.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
init()
});
function init() {
trace("fixjs framework", fixjs.VERSION);
var listener = new fixjs.events.EventDispatcher();
listener.addEventListener(fixjs.events.Event.COMPLETE,func1);
listener.addEventListener(fixjs.events.Event.COMPLETE,func1);
listener.addEventListener(fixjs.events.Event.RESIZE,func2);
var e1 = new fixjs.events.Event(fixjs.events.Event.COMPLETE);
var e2 = new fixjs.events.Event(fixjs.events.Event.RESIZE);
listener.dispatchEvent(e1);
listener.dispatchEvent(e2);
listener.removeEventListener(fixjs.events.Event.COMPLETE,func1);
listener.dispatchEvent(e1);
listener.dispatchEvent(e2);
listener.dispose();
}
functionfunc1(e) {
trace("func1:",e);
}
functionfunc2(e) {
trace("func2:",e);
}
</script>
</head>
<body>
<divid="trace">
</div>
</body>
输出
fixjs framework 0.1.0
func1： [fixjs.events.Event]complete
func1： [fixjs.events.Event]complete
func2： [fixjs.events.Event]resize
func2： [fixjs.events.Event]resize
使用语法上非常接近flash框架的事件处理。
fixjs.events.Event和fixjs.events.EventDispatcher的代码实现
/*
fixjs.events.Event：
*/
fixjs.events.Event = fixjs.Object.extend({
init: function (type) {
this.bubbles = false; //to do...
this.cancelable = false; //to do...
this.currentTarget = null;
this.eventPhase = 2; //to do...，1，2，3分别表示捕获，目标，冒泡
this.target = null;
this.type = type;
this._prevented = false;
},
disposing: function() {
this.target = null;
this.currentTarget = null;
},
clone: function() {
vare = new fixjs.Event(this.type);
return e;
},
isDefaultPrevented: function () {
return this._prevented;
},
preventDefault: function () {
this._prevented = true;
},
stopImmediatePropagation:function () {
//to do...
},
stopPropagation: function () {
//to do...
},
toString: function () {
return "[fixjs.events.Event]"+ this.type;
}
});
fixjs.events.Event.COMPLETE = "complete";
fixjs.events.Event.CHANGE = "change";
fixjs.events.Event.CLOSE = "close";
fixjs.events.Event.RESIZE = "resize";
/*
fixjs.EventDispatcher：
*/
fixjs.events.EventDispatcher = fixjs.Object.extend({
init: function (target) {
this._target = target;
this._events = new fixjs.Map();
},
disposing: function() {
this._events.dispose();
this._events = null;
this._target = null;
},
_isFunction: function(func) {
return String.prototype.slice.call(func, 0, 8) == "function";
},
addEventListener: function (type, func) {
if (!this._isFunction(func)){
return;
}
varlist = this._events.get(type);
if (!list) {
list = [];
this._events.set(type, list);
}
list.push(func);
},
removeEventListener: function (type, func) {
varlist = this._events.get(type);
if (!this._isFunction(func)|| !list || !list.length) {
return;
}
for (var i = list.length - 1; i >= 0; i--) {
list[i] == func && list.splice(i, 1);
}
},
dispatchEvent: function (event) {
if (!(event instanceof fixjs.events.Event))
return;
varlist = this._events.get(event.type);
if (!list || !list.length) {
return;
}
if (!event.target){
event.target = this;
if (this._target)
event.target = this._target;
}
event.currentTarget = this;
if (this._target)
event.currentTarget = this._target;
for (var i = 0, l = list.length; i < l; i++) {
list[i](event);
}
}
});
TODO…
上述的实现缺少一些高级事件处理：
l 事件的捕获阶段、目标阶段、冒泡阶段支持；
l 事件冒泡执行的阻止(stopPropagation和stopImmediatePropagation的实现)；
源码下载链接
http://download.csdn.net/detail/hunkcai/5392189
相关文章
作者推荐
MyReport：一款非常实用的报表引擎插件，提供Web报表设计、展现、打印、导出等功能集，集成简单。
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
