摘要:如果今后需要修改,再到這段事件處理函數(shù)的位置來修改。這是因?yàn)?,分清邏輯功能和事件偵聽兩種職責(zé),是一種良好的實(shí)踐。只讓事件處理函數(shù)本身接觸到瀏覽器事件對(duì)象,有利于降低代碼耦合,方便獨(dú)立測(cè)試及維護(hù)。實(shí)現(xiàn)事件分發(fā)的設(shè)計(jì)模式之一,就是發(fā)布訂閱。
事件分發(fā)的作用
在為頁面添加各類交互功能時(shí),我們熟知的最簡(jiǎn)單的做法就是為頁面元素綁定事件,然后在事件處理函數(shù)中,做我們想要做的動(dòng)作。就像這樣的代碼:
element.onclick = function(event){ // Do anything. };
如果我們要做的動(dòng)作不復(fù)雜,那么實(shí)際邏輯功能的代碼,放在這里是可以的。如果今后需要修改,再到這段事件處理函數(shù)的位置來修改。
再進(jìn)一步,為了做適當(dāng)?shù)拇a復(fù)用,我們可能會(huì)把邏輯功能中的一部分分拆到一個(gè)函數(shù)內(nèi):
element.onclick = function(event){ // Other code here. doSomethingElse(); };
這里的函數(shù)doSomethingElse對(duì)應(yīng)的功能可能會(huì)在其他地方用到,所以會(huì)這樣做分拆。此外,可能會(huì)有設(shè)定坐標(biāo)這樣的功能(假定函數(shù)名為setPosition),則還需要用到瀏覽器事件對(duì)象event提供的諸如指針位置一類的信息:
element.onclick = function(event){ // Other code here. doSomethingElse(); setPosition(event.clientX, event.clientY); };
此處有一個(gè)不推薦的做法是直接把event對(duì)象傳遞給setPosition。這是因?yàn)椋智暹壿嫻δ芎褪录陕爟煞N職責(zé),是一種良好的實(shí)踐。只讓事件處理函數(shù)本身接觸到瀏覽器事件對(duì)象event,有利于降低代碼耦合,方便獨(dú)立測(cè)試及維護(hù)。
那么,功能越來越多,越來越復(fù)雜了會(huì)怎么樣呢?如果沿用之前的做法,可能是這個(gè)樣子:
element.onclick = function(event){ doMission1(); doMission2(event.clientX, event.clientY); doMission3(); // ... doMissionXX(); };
雖然這樣用也沒問題,但這種時(shí)候其實(shí)就可以考慮更優(yōu)雅的寫法:
element.onclick = function(event){ amplify.publish( "aya:clicked", { x: event.clientX, y: event.clientY }); };
這種形式就是事件分發(fā),請(qǐng)注意,這里的事件并不是指瀏覽器原生的事件(event對(duì)象),而是邏輯層面的自定義事件。上面的aya:clicked就是一個(gè)隨便寫(really?)的自定義事件名稱。
顯然到這還沒結(jié)束,為了完成之前的復(fù)雜的功能,我們還需要將自定義事件和要做的事關(guān)聯(lián)在一起:
amplify.subscribe( "aya:clicked", doMission1); // ... amplify.subscribe( "aya:clicked", doMission2); // ...
看起來又繞了回來?沒錯(cuò),但這是有用的。一方面,瀏覽器原生事件的偵聽被分離并固化了下來,以后如果邏輯功能有變化,例如減少幾個(gè)功能,則只需要到自定義事件的關(guān)聯(lián)代碼部分做刪減,而不需要再關(guān)心原生事件。另一方面,邏輯功能的調(diào)整變得更為靈活,可以在任意的代碼位置通過subscribe添加功能,而且可以自行做分類管理(自定義的事件名)。
簡(jiǎn)單來說,事件分發(fā)通過增加一層自定義事件的冗余(在只有簡(jiǎn)單的邏輯功能時(shí),你就會(huì)覺得它是冗余),降低了代碼模塊之間的耦合度,使得邏輯功能更為清晰有條理,便于后續(xù)維護(hù)。
等下,前面那個(gè)出境了好幾次的很有存在感的amplify是干什么的?
Nice,終于是時(shí)候介紹這個(gè)了。
AmplifyJS事件分發(fā)是需要一定的方法來實(shí)現(xiàn)的。實(shí)現(xiàn)事件分發(fā)的設(shè)計(jì)模式之一,就是發(fā)布/訂閱(Publish/Subscribe)。
[AmplifyJS][]是一個(gè)簡(jiǎn)單的JavaScript庫,主要提供了Ajax請(qǐng)求、數(shù)據(jù)存儲(chǔ)、發(fā)布/訂閱三項(xiàng)功能(每一項(xiàng)都可獨(dú)立使用)。其中,發(fā)布/訂閱是核心功能,對(duì)應(yīng)命名是amplify.core。
amplify.core是發(fā)布/訂閱設(shè)計(jì)模式的一個(gè)簡(jiǎn)潔的、清晰的實(shí)現(xiàn),加上注釋一共100多行。讀完amplify的源碼,就可以比較好地理解如何去實(shí)現(xiàn)一個(gè)發(fā)布/訂閱的設(shè)計(jì)模式。
代碼全貌amplify.core的源碼整體結(jié)構(gòu)如下:
(function( global, undefined ) { var slice = [].slice, subscriptions = {}; var amplify = global.amplify = { publish: function( topic ) { // ... }, subscribe: function( topic, context, callback, priority ) { // ... }, unsubscribe: function( topic, context, callback ) { // ... } }; }( this ) );
可以看到,amplify定義了一個(gè)名為amplify的全局變量(作為global的屬性),它有3個(gè)方法publish、subscribe、unsubscribe。此外,subscriptions作為一個(gè)局部變量,它將保存發(fā)布/訂閱模式涉及的所有自定義事件名及其關(guān)聯(lián)函數(shù)。
publishpublish即發(fā)布,它要求指定一個(gè)topic,也就是自定義事件名(或者就叫做話題),調(diào)用后,所有關(guān)聯(lián)到某個(gè)topic的函數(shù),都將被依次調(diào)用:
publish: function( topic ) { // [1] if ( typeof topic !== "string" ) { throw new Error( "You must provide a valid topic to publish." ); } // [2] var args = slice.call( arguments, 1 ), topicSubscriptions, subscription, length, i = 0, ret; if ( !subscriptions[ topic ] ) { return true; } // [3] topicSubscriptions = subscriptions[ topic ].slice(); for ( length = topicSubscriptions.length; i < length; i++ ) { subscription = topicSubscriptions[ i ]; ret = subscription.callback.apply( subscription.context, args ); if ( ret === false ) { break; } } return ret !== false; },
[1],參數(shù)topic必須要求是字符串,否則拋出一個(gè)錯(cuò)誤。
[2],args將取得除topic之外的其他所有傳遞給publish函數(shù)的參數(shù),并以數(shù)組形式保存。如果對(duì)應(yīng)topic在subscriptions中沒有找到,則直接返回。
[3],topicSubscriptions作為一個(gè)數(shù)組,取得某一個(gè)topic下的所有關(guān)聯(lián)元素,其中每一個(gè)元素都包括callback及context兩部分。然后,遍歷元素,調(diào)用每一個(gè)關(guān)聯(lián)元素的callback,同時(shí)帶入元素的context和前面的額外參數(shù)args。如果任意一個(gè)關(guān)聯(lián)元素的回調(diào)函數(shù)返回false,則停止運(yùn)行其他的并返回false。
subscribe訂閱,如這個(gè)詞自己的含義那樣(就像訂本雜志什么的),是建立topic和callback的關(guān)聯(lián)的步驟。比較特別的是,amplify在這里還加入了priority(優(yōu)先級(jí))的概念,優(yōu)先級(jí)的值越小,優(yōu)先級(jí)越高,默認(rèn)是10。優(yōu)先級(jí)高的callback,將會(huì)在publish的時(shí)候,被先調(diào)用。這個(gè)順序的原理可以從前面的publish的源碼中看到,其實(shí)就是預(yù)先按照優(yōu)先級(jí)從高到低依次排列好了某一topic的所有關(guān)聯(lián)元素。
subscribe: function( topic, context, callback, priority ) { if ( typeof topic !== "string" ) { throw new Error( "You must provide a valid topic to create a subscription." ); } // [1] if ( arguments.length === 3 && typeof callback === "number" ) { priority = callback; callback = context; context = null; } if ( arguments.length === 2 ) { callback = context; context = null; } priority = priority || 10; // [2] var topicIndex = 0, topics = topic.split( /s/ ), topicLength = topics.length, added; for ( ; topicIndex < topicLength; topicIndex++ ) { topic = topics[ topicIndex ]; added = false; if ( !subscriptions[ topic ] ) { subscriptions[ topic ] = []; } // [3] var i = subscriptions[ topic ].length - 1, subscriptionInfo = { callback: callback, context: context, priority: priority }; // [4] for ( ; i >= 0; i-- ) { if ( subscriptions[ topic ][ i ].priority <= priority ) { subscriptions[ topic ].splice( i + 1, 0, subscriptionInfo ); added = true; break; } } // [5] if ( !added ) { subscriptions[ topic ].unshift( subscriptionInfo ); } } return callback; },
[1],要理解這一部分,請(qǐng)看amplify提供的API示意:
amplify.subscribe( string topic, function callback ) amplify.subscribe( string topic, object context, function callback ) amplify.subscribe( string topic, function callback, number priority ) amplify.subscribe( string topic, object context, function callback, number priority )
可以看到,amplify允許多種參數(shù)形式,而當(dāng)參數(shù)數(shù)目和類型不同的時(shí)候,位于特定位置的參數(shù)可能會(huì)被當(dāng)做不同的內(nèi)容。這也在其他很多JavaScript庫中可以見到。像這樣,通過參數(shù)數(shù)目和類型的判斷,就可以做到這種多參數(shù)形式的設(shè)計(jì)。
[2],訂閱的時(shí)候,topic是允許空格的,空白符將被當(dāng)做分隔符,認(rèn)為是將一個(gè)callback關(guān)聯(lián)到多個(gè)topic上,所以會(huì)使用一個(gè)循環(huán)。added用作標(biāo)識(shí)符,表明新加入的這個(gè)元素是否已經(jīng)添加到數(shù)組內(nèi),初始為false。
[3],每一個(gè)callback的保存,實(shí)際是一個(gè)對(duì)象,除callback外還帶上了context(默認(rèn)為null)和priority。
[4],這個(gè)循環(huán)是在根據(jù)priority的值,找到關(guān)聯(lián)元素應(yīng)處的位置。任何topic的關(guān)聯(lián)元素都是從無到有,且依照priority數(shù)值從小到大排列(已排序的)。因此,在比較的時(shí)候,是先假設(shè)新加入的元素的priority數(shù)值較大(優(yōu)先級(jí)低),從數(shù)組尾端向前比較,只要原數(shù)組中有關(guān)聯(lián)元素的priority數(shù)值比新加入元素的小,循環(huán)就可以中斷,且可以確定地用數(shù)組的splice方法將新加入的元素添加在此。如果循環(huán)一直運(yùn)行到完畢,則可以確定新加入的元素的priority數(shù)值是最小的,此時(shí)added將保持為初始值false。
[5],如果到這個(gè)位置,元素還沒有被添加,那么執(zhí)行添加,切可以確定元素應(yīng)該位于數(shù)組的最前面(或者是第一個(gè)元素)。
unsubscribe雖然發(fā)布和訂閱是最主要的,但也會(huì)有需要退訂的時(shí)候(雜志不想看了果斷退!)。所以,還會(huì)需要一個(gè)unsubscribe。
unsubscribe: function( topic, context, callback ) { if ( typeof topic !== "string" ) { throw new Error( "You must provide a valid topic to remove a subscription." ); } if ( arguments.length === 2 ) { callback = context; context = null; } if ( !subscriptions[ topic ] ) { return; } var length = subscriptions[ topic ].length, i = 0; for ( ; i < length; i++ ) { if ( subscriptions[ topic ][ i ].callback === callback ) { if ( !context || subscriptions[ topic ][ i ].context === context ) { subscriptions[ topic ].splice( i, 1 ); // Adjust counter and length for removed item i--; length--; } } } }
讀過前面的源碼后,這部分看起來就很容易理解了。根據(jù)指定的topic遍歷關(guān)聯(lián)元素,找到callback一致的,然后刪除它。由于使用的是splice方法,會(huì)直接修改原始數(shù)組,因此需要手工對(duì)i和length再做一次調(diào)整。
Amplify使用示例官方提供的其中一個(gè)使用示例是:
amplify.subscribe( "dataexample", function( data ) { alert( data.foo ); // bar }); //... amplify.publish( "dataexample", { foo: "bar" } );
結(jié)合前面的源碼部分,是否對(duì)發(fā)布/訂閱這一設(shè)計(jì)模式有了更明確的體會(huì)呢?
補(bǔ)充說明你可能也注意到了,AmplifyJS所實(shí)現(xiàn)的典型的發(fā)布/訂閱是同步的(synchronous)。也就是說,在運(yùn)行amplify.publish(topic)的時(shí)候,是會(huì)沒有任何延遲地把某一個(gè)topic附帶的所有回調(diào),全部都運(yùn)行一遍。
結(jié)語Pub/Sub是一個(gè)比較容易理解的設(shè)計(jì)模式,但非常有用,可以應(yīng)對(duì)大型應(yīng)用的復(fù)雜邏輯。本文簡(jiǎn)析的AmplifyJS是我覺得寫得比較有章法而且簡(jiǎn)明切題(針對(duì)單一功能)的JavaScript庫,所以在此分享給大家。
(重新編輯自我的博客,原文地址:http://acgtofe.com/posts/2015/02/amplifyjs-core-in-detail)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/85539.html
摘要:最后一點(diǎn)思考都是在冒泡階段綁定事件處理器,為什么不在捕獲階段攔截事件尼,如果一個(gè)向右活動(dòng)的手勢(shì)被識(shí)別,后續(xù)的事件如已經(jīng)沒必要再傳給子節(jié)點(diǎn),完全可以在攔截的元素上處理,這樣性能上也應(yīng)該會(huì)有一點(diǎn)提升,挖個(gè)坑給自己以后實(shí)現(xiàn)一下。 開始 話說上周周末閑的蛋疼,突然想了解一下前端手勢(shì)如何處理,好解開自己一個(gè)知識(shí)盲點(diǎn),于是開始啃源碼。。。并紀(jì)錄一下。 一個(gè)手勢(shì) 在我們的前端頁面里面復(fù)雜的手勢(shì)應(yīng)該是...
閱讀 2465·2021-11-22 09:34
閱讀 3072·2021-10-25 09:43
閱讀 1987·2021-10-11 10:59
閱讀 3396·2021-09-22 15:13
閱讀 2334·2021-09-04 16:40
閱讀 426·2019-08-30 15:53
閱讀 3196·2019-08-30 11:13
閱讀 2610·2019-08-29 17:30