JavaScript 事件设计模式

最简单的事件设计模式:

function class1() ...{
    //构造函数
}

class1.prototype = ...{
    show: function() ...{
        //show函数的实现
        this.onShow();  //触发onShow事件
    },
    
    onShow: function()...{}  //定义事件接口
}

使用方法:

//创建class1的实例
var obj=new class1();
//创建obj的onShow事件处理程序
obj.onShow=function()...{
    alert("onshow event");
}
//调用obj的show方法 触发事件
obj.show();

有参数传递的事件处理:

// 将有参数的函数封装为无参数的函数
function createFunction(obj,strFunc) ...{
    var args = [];
    if (!obj) obj = window; // 如果是全局函数,obj将传null进来
    for (var i = 2; i < arguments.length; i++)
        args.push(arguments[i]);
    return function()...{
        obj[strFunc].apply(obj,args);
    }
}

// 定义类class1
function class1() ...{
    //构造函数
}

class1.prototype = ...{
    show: function() ...{
        //show函数的实现
        this.onShow();  //触发onShow事件
    },
    
    onShow: function () ...{} //定义事件接口
}

// 创建class1的实例
var obj1 = new class1();

// 创建obj的onShow事件处理程序
function objOnShow (userName) ...{
    alert("hello,"+userName);
}

//定义变量userName
var userName ="coffee";
// 绑定obj的onShow事件
obj1.onShow = createFunction(null,"objOnShow",userName);
// 调用obj的show方法
obj1.show();


var obj2 = new class1();

var evt = ...{
    sayHi: function(time, userName) ...{
        alert("Good " + time + ", " + userName + "!");
    }
};
obj2.onShow = createFunction(evt, "sayHi", "morning", "coffee");
obj2.show();

使自定义事件支持多绑定:

// 定义类class1
function class1() ...{
    //构造函数
}

//定义类成员
class1.prototype = ...{
    show:function()...{
        //show的代码
        //...
        
        //如果有事件绑定则循环onshow数组，触发该事件
        if (this.onshow) ...{
            for(var i = 0; i < this.onshow.length; i++)...{
                this.onshow[i](); //调用事件处理程序
            }
        }
    },
    
    attachOnShow: function(_eHandler) ...{
        if(!this.onshow)this.onshow=[]; //用数组存储绑定的事件处理程序引用
        this.onshow.push(_eHandler);
    }
}

var obj = new class1();
//事件处理程序1
function onShow1() ...{
    alert("哈哈");
}

//事件处理程序2
function onShow2()...{
    alert("呵呵");
}

//绑定两个事件处理程序
obj.attachOnShow(onShow1);
obj.attachOnShow(onShow2);

//调用show，触发onshow事件
obj.show();