JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

实例:事件分发器

这一节,我们通过学习一个面向对象的实例来对 JavaScript 的面向对象进行更深入的理解,这个例子不能太复杂,涉及到的内容也不能仅仅为继承,多态等概念,如果那样,会失去阅读的乐趣,最好是在实例中穿插一些讲解,则可以得到最好的效果。

本节要分析的实例为一个事件分发器(Event Dispatcher),本身来自于一个实际项目,但同时又比较小巧,我对其代码做了部分修改,去掉了一些业务相关的部分。

事件分发器通常是跟 UI 联系在一起的,UI 中有多个组件,它们之间经常需要互相通信,当 UI 比较复杂,而页面元素的组织又不够清晰的时候,事件的处理会非常麻烦。在本节的例子中,事件分发器为一个对象,UI 组件发出事件到事件分发器,也可以注册自己到分发器,当自己关心的事件到达时,进行响应。如果你熟悉设计模式的话,会很快想到观察者模式,例子中的事件分发器正式使用了此模式。
var uikit = uikit || {};
uikit.event = uikit.event || {};
uikit.event.EventTypes = {
    EVENT_NONE : 0,
    EVENT_INDEX_CHANGE : 1,
    EVENT_LIST_DATA_READY : 2,
    EVENT_GRID_DATA_READY : 3
};

定义一个名称空间 uikit,并声明一个静态的常量:EventTypes,此变量定义了目前系统所支持的事件类型。
uikit.event.JSEvent = Base.extend({
    constructor : function(obj){
        this.type = obj.type || uikit.event.EventTypes.EVENT_NONE;
        this.object = obj.data || {};
    },
    getType : function(){
        return this.type;
    },
    getObject : function(){
        return this.object;
    }
});

定义事件类,事件包括类型和事件中包含的数据,通常为事件发生的点上的一些信息,比如点击一个表格的某个单元格,可能需要将该单元格所在的行号和列号包装进事件的数据。
uikit.event.JSEventListener = Base.extend({
    constructor : function(listener){
        this.sense = listener.sense;
        this.handle = listener.handle || function(event){};
    },
    getSense : function(){
        return this.sense;
    }
});

定义事件监听器类,事件监听器包含两个属性,及监听器所关心的事件类型 sense 和当该类型的事件发生后要做的动作 handle。
uikit.event.JSEventDispatcher = function(){
    if(uikit.event.JSEventDispatcher.singlton){
        return uikit.event.JSEventDispatcher.singlton;
    }
    this.listeners = {};
    uikit.event.JSEventDispatcher.singlton = this;
    this.post = function(event){
    var handlers = this.listeners[event.getType()];
    for(var index in handlers){
        if(handlers[index].handle && typeof handlers[index].handle =="function")
            handlers[index].handle(event);
    }
};

this.addEventListener = function(listener){
    var item = listener.getSense();
    var listeners = this.listeners[item];
    if(listeners){
        this.listeners[item].push(listener);
    }else{
        var hList = new Array();
        hList.push(listener);
        this.listeners[item] = hList;
    }
};

uikit.event.JSEventDispatcher.getInstance = function(){
    return new uikit.event.JSEventDispatcher();
};