JavaScript注冊(cè)機(jī)的實(shí)現(xiàn)（類(lèi)似于觀察者模式）
之前一直在做一個(gè)webgis的前端開(kāi)發(fā)，用到了諸如ajax，WS等等技術(shù)。在項(xiàng)目結(jié)束后，自己的總結(jié)過(guò)程中，有了一個(gè)對(duì)javaScript 控制事件觸發(fā)的模型的概念，這段時(shí)間有拜讀了下設(shè)計(jì)模式中的觀察者模式，總算是有了些成熟的想法。
這些想法是我在做B/S的底層地圖控制的時(shí)候的一些想法，比如一個(gè)用戶在移動(dòng)地圖的同時(shí)會(huì)觸發(fā)多個(gè)事件，但是這個(gè)觸發(fā)的事件是動(dòng)態(tài)的。在之前的老辦法就是通過(guò)全局變量來(lái)控制，但是用全局變量的話，程序的可控制性太差，一點(diǎn)改動(dòng)就會(huì)引起其他地方的改動(dòng)，這個(gè)缺點(diǎn)在后期的維護(hù)的時(shí)候尤其明顯。所有就有了這個(gè)思考的結(jié)果。
廢話不多說(shuō)，直接上代碼：
上面的截圖是我用來(lái)做的測(cè)試界面，整體的想法是：用一個(gè)注冊(cè)機(jī)實(shí)現(xiàn)多個(gè)事件的同時(shí)觸發(fā)，并用這個(gè)注冊(cè)機(jī)去控制當(dāng)前注冊(cè)的事件。如上圖所示，舉例假設(shè)一共有三個(gè)待注冊(cè)的事件，用一個(gè)注冊(cè)機(jī)的對(duì)象來(lái)實(shí)現(xiàn)對(duì)這觸發(fā)三個(gè)事件的控制。
鏈表類(lèi)：
LinkedList();
這個(gè)自定義的鏈表類(lèi)，類(lèi)似于C#中的鏈表，代碼會(huì)在文章后面的貼出來(lái)。
自定義注冊(cè)機(jī)類(lèi)：
this.event=""; //事件執(zhí)行代碼
this.eventList=new LinkedList();//用于儲(chǔ)存事件的鏈表 屬于注冊(cè)機(jī)的屬性
this.addEvent=function(evnet){//將事件名加到事件鏈表中
for(var itr = this.eventList.iterator();itr.hasNext(); )//如果id有重復(fù)的事件者不重復(fù)注冊(cè)
{
var itm = itr.next();
if(itm.id==evnet.id){
return "";
}
}
this.eventList.add(evnet);
}
this.delEvent=function(id){//按照事件id注銷(xiāo)事件
var i=0;
for(var itr = this.eventList.iterator();itr.hasNext(); )
{
var itm = itr.next();
if(itm.id==id){
this.eventList.remove(i);//刪除鏈表中的元素
return "";
}
i++;
}
}
this.doEvent=function(){ //循環(huán)執(zhí)行注冊(cè)機(jī)內(nèi)已經(jīng)注冊(cè)的事件
for(var itr = this.eventList.iterator();itr.hasNext(); )
{
var itm = itr.next();
eval(itm.value);//通過(guò)eval函數(shù)執(zhí)行 函數(shù)字符串
}
}
}
function event(){
this.id="";//事件標(biāo)記id
this.value="alert(\"默認(rèn)事件！\")"; //事件值也就是要執(zhí)行的 代碼或者是事件名稱(chēng)
}
測(cè)試頁(yè)面：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js注冊(cè)機(jī)</title>
<script language="javascript" type="text/javascript">
//鏈表對(duì)象-----------------------------------------------------------------------------------------------------------------------
function Entry(next, data)
{
this.next = next
this.data = data
}
function Iterator(node)
{
this.cousor = node
this.hasNext = function ()
{
return (this.cousor.next != null);
}
this.next = function ()
{
var rt = this.cousor.next
this.cousor = this.cousor.next
return rt.data
}
this.replaceData=function(datar){
this.cousor.data=datar
}
}
function LinkedList()
{
this.head = new Entry(null, null)
this.size = function ()
{
var size = 0
if (this.head == null)
{
return size
}
var p = this.head.next
for(; p!=null; p = p.next)
size++;
return size;
}
this.clear = function ()
{
this.head = null
}
this.getNode = function (idx)
{
var pos = -1;
var p = this.head
while (p != null && pos < idx) {
p = p.next;
pos ++;
}
return p;
}
this.gett = function (idx)
{
return this.getNode(idx).data
}
this.add = function (data)
{
this.insert(this.size(), data)
}
this.insert = function (idx, data)
{
var p = this.getNode(idx-1); /*注意查詢(xún)idx-1*/
if (p == null){
return
}
var node = new Entry(p.next, data)
p.next = node
}
this.remove = function (idx)
{
var prenode = this.getNode(idx - 1)
var node = this.getNode(idx)
if (prenode == null || node == null)
{
return null
}
prenode.next = node.next
return node.data
}
this.iterator = function ()
{
return new Iterator(this.head)
}
this.swap = function (a, b)
{
var av = this.getNode(a)
var bv = this.getNode(b)
var tmp = av.data
av.data = bv.data
bv.data = tmp
}
this.replace=function(index,data){
var j=0;
for(var itr =this.iterator(); itr.hasNext(); ){
itr.next();
if(index==j) itr.replaceData(data);
j++;
}
}
}
//鏈表對(duì)象-----------------------------------------------------------------------------------------------------------------------
</script>
</head>
<input type="button" onclick="registerMove()" value="注冊(cè)移動(dòng)事件" />
<input type="button" onclick="registerStop()" value="注冊(cè)停止事件" />
<input type="button" onclick="registerClose()" value="注冊(cè)關(guān)閉事件" />
<input type="button" onclick="registerAll()" value="注冊(cè)所有事件" />
<br/>
<br/>
請(qǐng)輸入刪除事件的ID：<input type="textbox" id="eventDelID" /> <input type="button" onclick="registerDel()" value="刪除事件" />
<br/>
<br/>
<input type="button" onclick="doEvent()" value="觸發(fā)器" />
<body>
<script language="javascript" type="text/javascript">
var oneregister=new register();
function register(){
this.event=""; //事件執(zhí)行代碼
this.eventList=new LinkedList();//用于儲(chǔ)存事件的鏈表 屬于注冊(cè)機(jī)的屬性
this.addEvent=function(evnet){//將事件名加到事件鏈表中
for(var itr = this.eventList.iterator();itr.hasNext(); )//如果id有重復(fù)的事件者不注冊(cè)
{
var itm = itr.next();
if(itm.id==evnet.id){
return "";
}
}
this.eventList.add(evnet);
}
this.delEvent=function(id){//將事件名加到事件鏈表中
var i=0;
for(var itr = this.eventList.iterator();itr.hasNext(); )//如果id有重復(fù)的事件者不注冊(cè)
{
var itm = itr.next();
if(itm.id==id){
this.eventList.remove(i);
return "";
}
i++;
}
}
this.doEvent=function(){
//循環(huán)執(zhí)行注冊(cè)機(jī)內(nèi)的事件
for(var itr = this.eventList.iterator();itr.hasNext(); )
{
var itm = itr.next();
eval(itm.value);
}
}
}
//事件對(duì)象
function event(){
this.id="";
this.value="alert(\"默認(rèn)事件！\")";
}
function registerMove(){
var e=new event();
e.id="move";
e.value="alert(\"執(zhí)行了移動(dòng)事件！\")";
oneregister.addEvent(e);
}
function registerStop(){
var e=new event();
e.id="stop";
e.value="alert(\"執(zhí)行了停止事件！\")";
oneregister.addEvent(e);
}
function registerClose(){
var e=new event();
e.id="close";
e.value="eventClose()";
oneregister.addEvent(e);
}
function registerAll(){
var e=new event();
e.id="move";
e.value="alert(\"執(zhí)行了移動(dòng)事件！\")";
oneregister.addEvent(e);
var e=new event();
e.id="stop";
e.value="alert(\"執(zhí)行了停止事件！\")";
oneregister.addEvent(e);
var e=new event();
e.id="close";
e.value="eventClose()";
oneregister.addEvent(e);
}
function eventClose(){
alert("執(zhí)行了關(guān)閉事件");
}
//刪除事件
function registerDel(){
var id=document.getElementById('eventDelID').value;
oneregister.delEvent(id);
}
//觸發(fā)器
function doEvent(){
oneregister.doEvent();
}
</script>
</body>
</html>
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
您可能感興趣的文章:
- 上一篇：介紹 JSON
- 下一篇：jQuery插件教程匯總II
