您的位置:首页 > Web前端 > JavaScript

My own JScript Event Register mechanism

2007-12-10 14:09 204 查看
A few days ago,I wrote a little code for my own simple JScript Event Register mechanism.I am trying to imitate the Event Register mechanism in .NET.

It includes the following two parts:

Delegate.js
Event.js

Delegate.js imitate delegate in .NET, and it can be used independently just like one in .NET. Here is the code:




/**///////////////////////////


// returntype:返回类型 ///


// args:参数对象 ///




/**///////////////////////////




// 此函数是委托对象的构造器,返回一个委托对象(委托对象本身也是函数,是Handler对象的构造器)


function delegate(returntype,args)// 委托规定了处理函数的返回类型和参数






{




/**//////////////////////////////////////////////


// method:要给返回的Handler对象绑定的方法 ///


// onobj:method所在的上下文对象 ///




/**//////////////////////////////////////////////





// delegateObject正是要返回的委托对象,是Handler对象的构造器,返回一个Handler对象


function delegateObject(method,onobj)






{


// handlerObject正是要返回的Handler对象,


function handlerObject(sender,args)






{


for(var i=0; i<handlerObject.methodList.length; i++)// 以原有的method上下文执行method列表






{


handlerObject.methodList[i].m.call(handlerObject.methodList[i].o,sender,args);


}


}





handlerObject.methodList = [];// 绑定到handlerObject上的method列表





handlerObject.add = function(obj)// obj是另外一个handlerObject,把其中的method列表导进来






{


if (obj != null && obj.methodList != null)






{


for(var j=0; j<obj.methodList.length; j++)






{


var ifExisted = false;


for(var i=0; i<handlerObject.methodList.length; i++)






{


if(handlerObject.methodList[i].m === obj.methodList[j].m && handlerObject.methodList[i].o === obj.methodList[j].o)






{


ifExisted = true;


break;


}


}


if(!ifExisted) handlerObject.methodList.push(obj.methodList[j]);


}


// handlerObject.methodList.concat(obj.methodList);


}


};




handlerObject.del = function(obj)// obj是另外一个handlerObject,从对象中删除obj中的method列表中的方法(如果存在)






{


if (obj != null && obj.methodList != null)






{


for(var j=0; j<obj.methodList.length; j++)






{


for(var i=0; i<handlerObject.methodList.length; i++)






{


if(handlerObject.methodList[i].m === obj.methodList[j].m && handlerObject.methodList[i].o === obj.methodList[j].o)






{


   handlerObject.methodList.splice(i,1);


break;


   }


}


}


}


};





handlerObject.checkMethod = function(theMethod)






{


// 检查要绑定到handlerObject上的method是否符合返回类型和参数的规定,尚未实现


return true;


}




if (method != null && onobj != null && handlerObject.checkMethod(method))






{




handlerObject.methodList.push(

{"m":method,"o":onobj});


}





return handlerObject;


}


delegateObject.returntype = returntype;


delegateObject.args = args;


return delegateObject;// 返回委托对象


}

Event.js is a good sample that shows how the delegate is used, this is also similar to events in .NET, Here is the code:




/**//////////////////////////////////


// master:要添加事件的对象 ///


// eventName:事件对象的名称 ///




/**//////////////////////////////////




// 此函数是事件对象的构造器,返回一个事件对象


function event(master,eventName,delegateObject)






{


// 给对象添加关于事件的属性


eval("master.On" + eventName + " = null");// 可以用"On+事件名"的属性给事件对象绑定一个处理方法


eval("master.On" + eventName + "Context = null");// "On+事件名"的属性给事件对象绑定的处理方法的上下文对象


function eventObject(sender,args)






{


var tmpobj;


var temp;


var method;


eval("temp = master.On" + eventName);


eval("tmpobj = master.On" + eventName + "Context");


if (temp != null && tmpobj != null)






{


method = new Function("return " + temp + ";").call(tmpobj);


}





if (method != null && eventObject.handlerObject.checkMethod(method))






{


for(var i=0; i<eventObject.handlerObject.methodList.length; i++)






{


if(eventObject.handlerObject.methodList[i].m === method && eventObject.handlerObject.methodList[i].o === tmpobj)




  

{


   eventObject.handlerObject.methodList.splice(i,1);


   break;


   }


}




eventObject.handlerObject.methodList.unshift(

{"m":method,"o":tmpobj});// 添加master的"On+事件名"属性指定的处理方法到eventObject.handlerObject的方法列表


}


eventObject.handlerObject(sender,args);


}


eventObject.handlerObject = new delegateObject(null,null);// 事件对象包装的Handler对象


eventObject.add = function(obj)






{


if (obj != null)






{


eventObject.handlerObject.add(obj);


}


}


eventObject.del = function(obj)






{


if (obj != null)






{


eventObject.handlerObject.del(obj);


}


}


return eventObject;


}

Following is a demo that demonstrates how to use the above code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<title>Untitled Page</title>


<script type="text/javascript" src="Delegate.js"></script>


<script type="text/javascript" src="Event.js"></script>


<script type="text/javascript">


var DelegateObject = new delegate("void","args");






function F()

{


this.test = new event(this,"test",DelegateObject);


}






function F2()

{


}




F2.a = function(sender,args)

{


alert(this.text + args);


};






function F3()

{




return function()

{


this.text = "JJJJ"




this.OntestHanler = function(sender,args)

{


alert(this.text + args);


}


}


}




var f = new F();


f.Ontest = "OntestHanler";


f.OntestContext = this;






function OntestHanler(sender,args)

{


this.text = "sender";


alert(this.text + args);


}




var f3 = new new F3()();




var object = new DelegateObject(f3.OntestHanler,f3);


var object2 = new DelegateObject(f3.OntestHanler,f3);


object.add(object2);


f.test.add(object);


f.test.del(object2);




object = new DelegateObject(OntestHanler,this);


f.test.add(object);






object = new DelegateObject(function(sender,args)

{alert(this.text + 123);},this);


f.test.add(object);




object = new DelegateObject(F2.a,this);


f.test.add(object);




f.test(f,"args");


</script>


</head>


<body>




</body>


</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: