<sdt id="89512093" sdtlocked="t" contentlocked="t" sdtgroup="t"></sdt>
Fixjs介绍
Fixjs是我打算在javascript技术领域开始积累的一个框架项目，这套框架主要为开发复杂组件提供底层的框架支持。
框架的类与接口我会尽量参考flash框架的实现。同时，我也会开放Fixjs的源代码，欢迎同仁一起学习、交流。
InteractiveObject
InteractiveObject 类是用户可以使用鼠标、键盘或其他用户输入设备与之交互的所有显示对象的抽象基类。随着移动设备的普及，还应该支持触摸的交互，这个留待日后完善。
实现InteractiveObject主要就是处理鼠标、键盘等交互事件，在Fixjs中，我是这样处理的：通过注册DOM元素的事件，然后再派发Fixjs的事件，说的直接些就是在DOM元素事件上面包了一层。
例如：实现“click”事件
重新addEventListener方法
addEventListener: function(type, func) {
switch (type) {
case fixjs.events.MouseEvent.CLICK:
$(this.ele).off("click", this._onDOMMouseEvent);
$(this.ele).on("click", this._onDOMMouseEvent);
break;
}
fixjs.display.InteractiveObject.base.addEventListener.call(this, type, func);
}
在DOM事件处理_onDOMMouseEvent中，会重新派发fixjs.events.MouseEvent.CLICK事件
_onDOMMouseEvent:function (event) {
if (event.target!= event.currentTarget)
return;
var obj = event.target.fixjsObj;
if (!obj.mouseEnabled)
return;
var type = fixjs.events.MouseEvent.CLICK;
var e = new fixjs.events.MouseEvent(type);
e.altKey = event.altKey;
e.buttonDown = event.buttons >0;
e.ctrlKey = event.ctrlKey;
e.localX = event.offsetX;
e.localY = event.offsetY;
if (event.relatedTarget)
e.relatedObject = event.relatedTarget.fixjsObj;
e.shiftKey = event.shiftKey;
e.stageX = event.pageX;
e.stageY = event.pageY;
obj.dispatchEvent(e);
if (e.isDefaultPrevented())
event.preventDefault();
}
MouseEvent
定义鼠标事件类，继承于Event。
fixjs.events.MouseEvent = fixjs.events.Event.extend({
init: function (type){
fixjs.events.MouseEvent.base.init.call(this, type);
this.altKey = false;
this.buttonDown = false;
this.ctrlKey = false;
this.delta = 0;
this.localX = 0;
this.localY = 0;
this.relatedObject = null;
this.shiftKey = false;
this.stageX = 0;
this.stageY = 0;
},
disposing:function () {
this.relatedObject = null;
fixjs.events.MouseEvent.base.disposing.call(this);
},
clone:function () {
var e = new fixjs.MouseEvent(this.type);
e.altKey = this.altKey;
e.buttonDown = this.buttonDown;
e.ctrlKey = this.ctrlKey;
e.delta = this.delta;
e.localX = this.localX;
e.localY = this.localY;
e.relatedObject = this.relatedObject;
e.shiftKey = this.shiftKey;
e.stageX = this.stageX;
e.stageY = this.stageY;
return e;
},
toString: function (){
return "[fixjs.events.MouseEvent]"+ this.type;
}
});
定义鼠标事件常量。
fixjs.events.MouseEvent.CLICK = "click";
fixjs.events.MouseEvent.DOUBLE_CLICK = "doubleClick";
fixjs.events.MouseEvent.MIDDLE_CLICK = "middleClick";
fixjs.events.MouseEvent.MIDDLE_MOUSE_DOWN = "middleMouseDown";
fixjs.events.MouseEvent.MIDDLE_MOUSE_UP = "middleMouseUp";
fixjs.events.MouseEvent.MOUSE_DOWN = "mouseDown";
fixjs.events.MouseEvent.MOUSE_MOVE = "mouseMove";
fixjs.events.MouseEvent.MOUSE_OUT = "mouseOut";
fixjs.events.MouseEvent.MOUSE_OVER = "mouseOver";
fixjs.events.MouseEvent.MOUSE_UP = "mouseUp";
fixjs.events.MouseEvent.MOUSE_WHEEL = "mouseWheel";
fixjs.events.MouseEvent.RIGHT_CLICK = "rightClick";//与右键菜单冲突，暂时不支持
fixjs.events.MouseEvent.RIGHT_MOUSE_DOWN = "rightMouseDown";
fixjs.events.MouseEvent.RIGHT_MOUSE_UP = "rightMouseUp";
InteractiveObject的完整代码
fixjs.display.InteractiveObject = fixjs.display.DisplayObject.extend({
init: function (ele) {
fixjs.display.InteractiveObject.base.init.call(this, ele);
this.mouseEnabled = true;
this.tabEnabled = false; //to do...
this.tabIndex = -1; //to do...
},
disposing:function () {
fixjs.display.InteractiveObject.base.disposing.call(this);
},
addEventListener: function(type, func) {
switch (type) {
case fixjs.events.MouseEvent.CLICK:
case fixjs.events.MouseEvent.MIDDLE_CLICK:
case fixjs.events.MouseEvent.RIGHT_CLICK:
$(this.ele).off("click", this._onDOMMouseEvent);
$(this.ele).on("click", this._onDOMMouseEvent);
break;
case fixjs.events.MouseEvent.DOUBLE_CLICK:
$(this.ele).off("dblclick", this._onDOMMouseEvent);
$(this.ele).on("dblclick", this._onDOMMouseEvent);
break;
case fixjs.events.MouseEvent.MOUSE_DOWN:
case fixjs.events.MouseEvent.MIDDLE_MOUSE_DOWN:
case fixjs.events.MouseEvent.RIGHT_MOUSE_DOWN:
$(this.ele).off("mousedown", this._onDOMMouseEvent);
$(this.ele).on("mousedown", this._onDOMMouseEvent);
break;
case fixjs.events.MouseEvent.MOUSE_MOVE:
$(this.ele).off("mousemove", this._onDOMMouseEvent);
$(this.ele).on("mousemove", this._onDOMMouseEvent);
break;
case fixjs.events.MouseEvent.MOUSE_OUT:
$(this.ele).off("mouseout", this._onDOMMouseEvent);
$(this.ele).on("mouseout", this._onDOMMouseEvent);
break;
case fixjs.events.MouseEvent.MOUSE_OVER:
$(this.ele).off("mouseover", this._onDOMMouseEvent);
$(this.ele).on("mouseover", this._onDOMMouseEvent);
break;
case fixjs.events.MouseEvent.MOUSE_UP:
case fixjs.events.MouseEvent.MIDDLE_MOUSE_UP:
case fixjs.events.MouseEvent.RIGHT_MOUSE_UP:
$(this.ele).off("mouseup", this._onDOMMouseEvent);
$(this.ele).on("mouseup", this._onDOMMouseEvent);
break;
case fixjs.events.MouseEvent.MOUSE_WHEEL:
$(this.ele).off("mousewheel ", this._onDOMMouseEvent);
$(this.ele).on("mousewheel", this._onDOMMouseEvent);
break;
case fixjs.events.KeyboardEvent.KEY_DOWN:
$(this.ele).off("keydown ", this._onDOMKeyboardEvent);
$(this.ele).on("keydown", this._onDOMKeyboardEvent);
break;
case fixjs.events.KeyboardEvent.KEY_UP:
$(this.ele).off("keyup ", this._onDOMKeyboardEvent);
$(this.ele).on("keyup", this._onDOMKeyboardEvent);
break;
case fixjs.events.FocusEvent.FOCUS_IN:
$(this.ele).off("focusin", this._onDOMFocusEvent);
$(this.ele).on("focusin", this._onDOMFocusEvent);
break;
case fixjs.events.FocusEvent.FOCUS_OUT:
$(this.ele).off("focusout", this._onDOMFocusEvent);
$(this.ele).on("focusout", this._onDOMFocusEvent);
break;
}
fixjs.display.InteractiveObject.base.addEventListener.call(this, type, func);
},
_onDOMMouseEvent:function (event) {
if (event.target!= event.currentTarget)
return;
var obj = event.target.fixjsObj;
if (!obj.mouseEnabled)
return;
var type;
switch (event.type){
case "click":
switch (event.button) {
case 0:
type = fixjs.events.MouseEvent.CLICK;
break;
case 1:
type = fixjs.events.MouseEvent.MIDDLE_CLICK;
break;
case 2:
type = fixjs.events.MouseEvent.RIGHT_CLICK;
break;
}
break;
case "dblclick":
type = fixjs.events.MouseEvent.DOUBLE_CLICK;
break;
case "mousedown":
switch (event.button) {
case 0:
type = fixjs.events.MouseEvent.MOUSE_DOWN;
break;
case 1:
type = fixjs.events.MouseEvent.MIDDLE_MOUSE_DOWN;
break;
case 2:
type = fixjs.events.MouseEvent.RIGHT_MOUSE_DOWN;
break;
}
break;
case "mousemove":
type = fixjs.events.MouseEvent.MOUSE_MOVE;
break;
case "mouseout":
type = fixjs.events.MouseEvent.MOUSE_OUT;
break;
case "mouseover":
type = fixjs.events.MouseEvent.MOUSE_OVER;
break;
case "mouseup":
switch (event.button) {
case 0:
type = fixjs.events.MouseEvent.MOUSE_UP;
break;
case 1:
type = fixjs.events.MouseEvent.MIDDLE_MOUSE_UP;
break;
case 2:
type = fixjs.events.MouseEvent.RIGHT_MOUSE_UP;
break;
}
break;
case "mousewheel":
type = fixjs.events.MouseEvent.MOUSE_WHEEL;
break;
}
var e = new fixjs.events.MouseEvent(type);
e.altKey = event.altKey;
e.buttonDown = event.buttons >0;
e.ctrlKey = event.ctrlKey;
e.localX = event.offsetX;
e.localY = event.offsetY;
if (event.relatedTarget)
e.relatedObject = event.relatedTarget.fixjsObj;
e.shiftKey = event.shiftKey;
e.stageX = event.pageX;
e.stageY = event.pageY;
if (e.type== fixjs.events.MouseEvent.MOUSE_WHEEL)
e.delta = event.originalEvent.wheelDelta;
obj.dispatchEvent(e);
if (e.isDefaultPrevented())
event.preventDefault();
},
_onDOMKeyboardEvent:function (event) {
if (event.target != event.currentTarget)
return;
var obj = event.target.fixjsObj;
var type;
switch (event.type){
case "keydown":
type = fixjs.events.KeyboardEvent.KEY_DOWN;
break;
case "keyup":
type = fixjs.events.KeyboardEvent.KEY_UP;
break;
}
var e = new fixjs.events.KeyboardEvent(type);
e.altKey = event.altKey;
e.ctrlKey = event.ctrlKey;
e.keyCode = event.keyCode;
e.shiftKey = event.shiftKey;
obj.dispatchEvent(e);
if (e.isDefaultPrevented())
event.preventDefault();
},
_onDOMFocusEvent:function (event) {
if (event.target!= event.currentTarget)
return;
var obj = event.target.fixjsObj;
var type;
switch (event.type){
case "focusin":
type = fixjs.events.FocusEvent.FOCUS_IN;
break;
case "focusout":
type = fixjs.events.FocusEvent.FOCUS_OUT;
break;
}
var e = new fixjs.events.FocusEvent(type);
if (event.relatedTarget)
e.relatedObject = event.relatedTarget.fixjsObj;
e.shiftKey = event.shiftKey;
obj.dispatchEvent(e);
if (e.isDefaultPrevented())
event.preventDefault();
}
});
Fixjs_0.2.0源码下载
下载地址：http://download.csdn.net/detail/hunkcai/5469395
Fixjs_0.2.0已实现的内容：
【基础方法，基础类】
trace()：页面调试输出
fixjs.Class：类定义
fixjs.Object：提供对象初始化，释放控制，克隆接口
fixjs.DisposeUtil：释放资源工具类
fixjs.CloneUtil：克隆资源工具类
fixjs.Map：哈希数据结构
【事件处理】
fixjs.events.Event：事件类
fixjs.events.EventDispatcher：事件派发类
fixjs.events.MouseEvent：鼠标事件类
fixjs.events.KeyboardEvent：键盘事件类
fixjs.events.FocusEvent：焦点事件类
【几何数据结构】
fixjs.geom.Point
fixjs.geom.Rectangle
【显示类】
fixjs.display.DisplayObject
fixjs.display.InteractiveObject
相关文章
Fixjs专栏
相关推荐
C#——帮助类基类大全，涵盖大部分日常使用
博客《Cpp 对象模型探索 —— 含有虚基类的类的内存布局》的图片原文档，网址：https://blog.csdn.net/itworld123/article/details/102890062。
（3） 使用继承的方法构造3个类，（即雇员类——虚基类，教师类和工人类——派生类），教师教师工资由基本工资+级别工资+工龄工资+课时工资构成；工人工资由基本工资+级别工资+工龄工资+奖励工资构成 （4） 编写同名...
C++进阶学习——线程基类的设计（Linux），相关教程链接如下： http://blog.csdn.net/tennysonsky/article/details/48809725
dao层基类dao层基类dao层基类dao层基类dao层基类
C++多线程基类C++多线程基类C++多线程基类C++多线程基类C++多线程基类C++多线程基类C++多线程基类C++多线程基类C++多线程基类
我收集的C#基类，比较全.我收集的C#基类，比较全. 包含有： ASP.NET类库 C#读取AD域里用户名或组 Common类库 DotNet基础类大全 SqlHelper基类 字符串加密
DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类DBUNIT 基类...
1.定义基类Shape，这有求面积的虚方法Mianji（）；求周长的虚方法Zhouchang()。...点击按钮，根据用户所选择的形状接收用户输入的参数，申明基类引用，通过基类引用接收派生类对象将求出的面积和周长值显示到窗体。
C#基类集合
c# xml 操作 基类
函数隐藏是指派生类中函数与基类中的函数同名，但是这个函数在基类中并没有被定义为虚函数，这种情况就是函数的隐藏。 所谓隐藏是指使用常规的调用方法，派生类对象访问这个函数时，会优先访问派生类中的这个函数，...
很好的控件基类
使用Winform窗体程序进行测试： 点击按钮，根据用户所选择的形状接收用户输入的参数，申明基类引用，通过基类引用接收派生类对象将求出的面积和周长值显示到窗体。 PS：此资源适合作为初学者的参考资料。
虚基类的演示：说明为什么使用虚基类，是用虚基类与不使用虚基类的区别，通过声音图像等多媒体说明使用虚基类的优点。
数据类型的基类
使用vc6.0编写的关于虚基类的程序的cpp文件，文件来自某大学的大一c++课堂练习
recyclerview 封装基类适配器和基类holder 以及分割线使用
在各类中分别增加以下成员： base1中增加私有数据成员int b1 base2中增加私有数据成员int b2 level1中增加私有数据成员int l1 level2中增加私有数据成员int l2 toplevel中增加私有数据成员int t
基类，派生类