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

相关文章

Fixjs专栏

作者推荐

MyReport：一款非常实用的报表引擎插件，提供Web报表设计、展现、打印、导出等功能集，集成简单。

Fixjs——自定义事件处理相关推荐

  1. delphi自定义事件处理

    http://www.cnblogs.com/ywangzi/archive/2012/09/06/2673414.html delphi自定义事件处理 为什么我们点击按钮,就会执行按钮的onclic ...

  2. SparkListener监听机制使用及自定义事件处理

    概述 Spark 提供了一系列整个任务生命周期中各个阶段变化的事件监听机制,通过这一机制可以在任务的各个阶段做一些自定义的各种动作.SparkListener便是这些阶段的事件监听接口类 通过实现这个 ...

  3. Spring 中的如何自定义事件处理(Custom Event)

    新建一个CustomEvent.java: import org.springframework.context.ApplicationEvent; public class CustomEvent ...

  4. Javascript框架的自定义事件(转)

    很多 javascript 框架都提供了自定义事件(custom events),例如 jquery.yui 以及 dojo 都支持"document ready"事件.而部分自定 ...

  5. Scott Mitchell 的ASP.NET 2.0数据教程之十一: 基于数据的自定义格式化

    介绍 我们可以通过控制HeaderStyle, RowStyle, AlternatingRowStyle和其他一些属性来改变GridView, DetailsView, 和 FormView的样式, ...

  6. FUN ALV TOOLBAR 增加自定义按钮

    1.到标准程序SAPLKKBL 拷出SCREEN STATUS STANDARD_FULLSCREEN至自己的程序中. 2.在拷过来的STATUS 中新增自己想要的按钮 3.在调用ALV显示时增加有如 ...

  7. ABAP：ALV中自定义搜索帮助

    如果希望ALV中某字段具有搜索帮助,第一种办法当然是对表中某字段的引用,设置ref_table.ref_field,将自动触发该字段所带的搜索帮助. 可不可以直接设置Searh Help呢?应该不可以 ...

  8. C#委托及事件处理机制浅析

       事件可以理解为某个对象所发出的消息,以通知特定动作(行为)的发生或状态的改变.行为的发生可能是来自用户交互,如鼠标点击:也可能源自其它的程序逻辑.在这里,触发事件的对象被称为事件(消息)发出者( ...

  9. java事件处理入门

    一.事件处理机制 (1)事件源:事件源回答事件是由谁发生的,也就是事件发生的场所或者来源,通常是组件的对象,例如按钮JButton.下拉框JComboBox.列表框JList.树JTree等. (2) ...

最新文章

  1. 系统级性能分析工具perf的介绍与使用
  2. 装机、做系统必备：秒懂MBR和GPT分区表____转载网络
  3. 去除导航栏的背景色和底部1像素黑色线条or隐藏导航栏
  4. mysql实例详解_MySQL 多实例详解
  5. linux memcacheQ的安装与使用
  6. 新的 HTML5 文档类型和字符集是,前端面试题--HTML5+CSS3(1)
  7. 怎么把4张图片合成一张_暴露年龄的20张图片，最后一张是什么？求解
  8. 素描滤镜c语言算法,python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现).pdf...
  9. 手写vue---部分实现
  10. 【渝粤题库】陕西师范大学800008 综合自然地理
  11. LinearLayout removeAllViews后再 addView页面不展示
  12. linux下怎样创建文本文件,如何使用Linux中的命令行快速创建文本文件 | MOS86
  13. 陀螺精选 | 2020年最值得重读的10篇文章
  14. 服务器 'xxx' 上的 MSDTC 不可用。
  15. windows 进程之csrss.ext
  16. php 显示探针_PHP探针
  17. 笔记本win7系统关闭触摸板功能的方法
  18. 朗道-西格尔零点猜想（the Landau-Siegel Zeros Conjecture）
  19. 实战之从阿里云dataworks的maxcomputer中导出数据
  20. logcat工具介绍

热门文章

  1. uhd630黑苹hdmi_【EFI】联想 ThinkCentre M920t-N000 i5-9500 UHD630 ALC662 10.14.6 HDMI 黑苹果Hackintosh 引导下载...
  2. 微信表情包储服务器,微信新功能！不用存图就能发出海量表情包
  3. js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
  4. java中finaljava中this_Java中this，static，final，const用法详解
  5. 21天jmeter打卡 day1
  6. linux有名管道大小,Linux中的pipe与named pipe（FIFO），即管道和命名管道
  7. 工作难找，朋友却一口气拿了5份大厂offer，他是怎么做到的？
  8. 软件测试：职场上那些你不得不学会的事儿
  9. PAT甲级1020（附带前中序遍历の绝对干货）
  10. 场论 梯度 旋度 散度