|
|
1 事件處理模式
在程序設計領域，“事件處理”是一種模式，當一個對象受外部影響而改變狀態時，通過消息的方式將這個狀態改變通知給這個對象或者相關聯的某個對象，讓它執行對應的動作，這就是事件處理的基本原理。負責通知狀態改變的對象被稱作“消息”，而執行響應動作的屬性則被稱作“事件代理”。
例如下面就是一個簡單的事件處理模式的應用：
function dispatchEvent(owner, eventType, eventArgs)
{
if(owner && owner["on"+eventType])
setTimeout(function(){owner["on"+eventType](eventArgs)}, 1);
}
function randomSerials(len)
{
function randomSignal()
{
return Math.random() > 0.5 ? 1 : 0;
}
var ret = [];
for(var i = 0; i < len; i++)
{
ret.push(randomSignal());
}
return ret;
}
function Differ(obl)
{
var buffer = new Array(obl);
var time = 0;
this.readBuffer = function()
{
var buf = buffer;
buffer = new Array(obl);
time = 0;
return buf;
}
this.bufferSize = function()
{
return obl;
}
this.input = function(serials)
{
for(var i = 1; i < serials.length; i++)
{
var signal = Math.abs(serials[i] - serials[i - 1]);
buffer[time++ % obl] = signal;
if(signal)
dispatchEvent(this, "signalchange",
{input:serials, time:time, buffer:buffer.slice(0)});
}
}
}
var inputSerials = randomSerials(20);
alert(inputSerials);
var diff10 = new Differ(20);
diff10.input(inputSerials);
alert(diff10.readBuffer());
diff10.onsignalchange = function(eventArgs)
{
alert(eventArgs.time);
}
diff10.input(inputSerials);
在上面的例子中，函數dispatchEvent負責分派事件，onsignalchange是事件代理，在這個差分系統diff10中，當輸入信號的電平發生變化（從0到1或者從1到0）時，觸發相應的事件onsignalchange，并且將當前輸入信號、時序和當前輸出緩存作為事件參數傳入事件處理程序。
diff10.onsignalchange = function(eventArgs)
{
alert(eventArgs.time);
}
是程序員指定的事件處理程序，在這里我們打印出輸入電平發生變化時的輸入信號時序。
2 用戶事件接口的定義
前面的例子中，我們僅僅定義了一個用來分派事件的函數dispatchEvent，但它也可以看作是一個完整的用戶事件接口，現在我們回顧這個函數，弄明白它究竟做了什么樣的事情：
function dispatchEvent(owner, eventName, eventArgs)
{
if(owner && owner["on"+eventName])
setTimeout(function(){owner["on"+eventName](eventArgs)}, 1);
}
這個函數接收三個參數，它的第一個參數是一個對象，指定了這個事件的“所有者”，即這個事件是由誰接收和負責處理的。在上面的例子中，這個owner是Differ對象本身即
dispatchEvent(this, "signalchange", {input:serials, time:time, buffer:buffer});
傳入的owner參數是this，實際上事件模式允許其他類型作為事件分派的所有者，尤其在一些特定的模式，通常事件的發起者和事件的接收者可以不是同一個對象。在4小節介紹的觀察者模式中可以看到這一點。
第二個參數是一個表示事件類型的字符串，它決定了事件代理的名稱，根據事件模型的規范，事件代理的名稱為”on”+事件類型，例如上面例子中，事件類型為signalchange，對應的事件代理為onsignalchange。
第三個參數是一個事件參數對象，它決定了傳遞給事件接收者的參數，在上面的例子中，它傳遞了input、time和buffer三個屬性，分別代表發生事件時的當前輸入序列、時序以及輸出緩存的值。
dispatchEvent函數本身的內容很簡單，它只是確保調用接收者的事件代理，并將事件參數正確傳入這個事件代理。至于事件代理是如何處理事件參數的，它并不關心。
3 事件代理和事件注冊
在事件處理模式中，為事件代理指定事件處理函數的過程被稱為事件注冊。在上面的例子中，diff10.onsignalchange是極其簡單的事件代理，它的事件注冊過程也極為簡單――采用直接賦值的方式來完成。
事實上根據設計的不同，事件代理可以有更加復雜的注冊方式，例如DOM-level-2的addEventListener和removeEventListener，我們也可以實現類似的事件注冊方法，以支持為一個事件代理注冊多個事件事件處理方法。為了實現它，我們完善事件接口，修改上面的例子如下：
function EventManager(owner)
{
owner = owner || this;
this.dispatchEvent = function(eventType, eventArgs)
{
var events = owner["on"+eventType];
if(events && typeof(events) == "function")
events = [events];
if(owner && events)
{
for(var i = 0; i < events.length; i++)
{
setTimeout(
(function(i){return function(){events[i](eventArgs)}
})(i), 1
);
}
}
}
this.addEventListener = function(eventType, closure)
{
if(owner["on"+eventType] == null)
{
owner["on"+eventType] = [];
}
var events = owner["on"+eventType];
if(events && typeof(events) == "function")
events = [events];
events.push(closure);
}
this.removeEventListener = function(eventType, closure)
{
var events = owner["on"+eventType];
if(events && typeof(events) == "function")
events = [events];
for(var i = 0; i < events.length; i++)
{
if(events[i] == closure)
events.splice(i, 1);
}
}
}
function randomSerials(len)
{
function randomSignal()
{
return Math.random() > 0.5 ? 1 : 0;
}
var ret = [];
for(var i = 0; i < len; i++)
{
ret.push(randomSignal());
}
return ret;
}
function Differ(obl)
{
var buffer = new Array(obl);
var time = 0;
EventManager.call(this); //apply EnventManager Component.
this.readBuffer = function()
{
var buf = buffer;
buffer = new Array(obl);
time = 0;
return buf;
}
this.bufferSize = function()
{
return obl;
}
this.input = function(serials)
{
for(var i = 1; i < serials.length; i++)
{
var signal = Math.abs(serials[i] - serials[i - 1]);
buffer[time++ % obl] = signal;
if(signal)
this.dispatchEvent("signalchange",
{input:serials, time:time, buffer:buffer.slice(0)});
}
}
}
var inputSerials = randomSerials(20);
alert(inputSerials);
var diff10 = new Differ(20);
diff10.input(inputSerials);
alert(diff10.readBuffer());
var eventHandler1 = function(eventArgs){
alert(eventArgs.time);
}
var eventHandler2 = function(eventArgs){
alert(eventArgs.buffer);
}
diff10.addEventListener("signalchange",eventHandler1);
diff10.addEventListener("signalchange",eventHandler2);
diff10.input(inputSerials);
diff10.removeEventListener("signalchange",eventHandler1);
在上面的例子里，我們建立了一個EventManager類型，為它定義了三個對象方法，dispatchEvent方法和前面那個例子很類似，是用來分派事件的，而另外的addEventListener和removeEventListener則是用來注冊和注銷事件處理函數。
在Differ類型中，我們通過EventManager.call(this);將EventManager類型的實例運用到Differ原型中（關于這個問題的深層機制，留待以后再進行詳細討論）。然后調用this.dispatchEvent來分派事件。
在為Differ實例的onsignalchange事件代理注冊事件時，你會發現它和標準的DOM事件模型非常類似：
diff10.addEventListener("signalchange",eventHandler1);
diff10.addEventListener("signalchange",eventHandler2);
diff10.removeEventListener("signalchange",eventHandler1);
運行過這個例子，你會發現一個有趣的地方，就是diff10.input(inputSerials);觸發的事件并沒有執行eventHandler1和eventHandler2，而是只執行了eventHandler2，原因是：
diff10.removeEventListener("signalchange",eventHandler1);
先于事件的觸發被執行，這是因為事件機制是一種“異步回調”機制，關于同步和異步的問題，我們以后討論。
4 標準模式：事件分派和接收
在事件處理模式中，事件的分派者負責發出消息，事件的接收者負責處理消息。在前面的例子里，它們是由同一個對象（Differ）完成的。
然而，事實上，事件處理模式中，并不要求消息的發送和接收由同一個對象完成，在某些模式中，它們是不同的對象，其中最常見的一種是“觀察者”模式，下面將差分系統的例子改寫為觀察者模式：
function dispatchEvent(owner, eventType, eventArgs)
{
if(owner && owner["on"+eventType])
setTimeout(function(){owner["on"+eventType](eventArgs)}, 1);
}
function randomSerials(len)
{
function randomSignal()
{
return Math.random() > 0.5 ? 1 : 0;
}
var ret = [];
for(var i = 0; i < len; i++)
{
ret.push(randomSignal());
}
return ret;
}
function DifferObserver(differ)
{
this.differ = differ;
differ.setObserver(this);
}
function Differ(obl)
{
var buffer = new Array(obl);
var time = 0;
var observer = null;
this.input = function(serials)
{
for(var i = 1; i < serials.length; i++)
{
var signal = Math.abs(serials[i] - serials[i - 1]);
buffer[time++ % obl] = signal;
if(signal)
dispatchEvent(observer, "signalchange", {sender:this, input:serials, time:time, buffer:buffer.slice(0)});
}
}
this.setObserver = function(obs)
{
observer = obs;
observer.readBuffer = function()
{
var buf = buffer;
buffer = new Array(obl);
time = 0;
return buf;
}
observer.bufferSize = function()
{
return obl;
}
}
}
var inputSerials = randomSerials(20);
alert(inputSerials);
var diff10 = new Differ(20);
diff10.input(inputSerials);
var diffObs = new DifferObserver(diff10);
alert(diffObs.readBuffer());
diffObs.onsignalchange = function(eventArgs)
{
if(diff10 == eventArgs.sender)
alert(eventArgs.time);
}
diff10.input(inputSerials);
上面例子中的事件分派者是Differ類型，而事件接收者則是DifferObserver類型，所以事件注冊的代理是DifferObserver的屬性，在發送的事件參數中，我們增加了一個屬性sender，它引用事件的實際發送對象
原文：http://bbs.51js.com/thread-69808-1-1.html by 月影
JavaScript技術：javascript事件模型代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
