建站
咨詢
售后
建站咨詢
新聞中心
對(duì)于Javascript事件驅(qū)動(dòng)大家了解很多，本文將從一個(gè)應(yīng)用場(chǎng)景開(kāi)始講起，希望本文對(duì)大家使用好Javascript事件驅(qū)動(dòng)有所幫助。
公司主營(yíng)業(yè)務(wù)：網(wǎng)站制作、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出西鄉(xiāng)免費(fèi)做網(wǎng)站回饋大家。
首先來(lái)看看這樣一個(gè)應(yīng)用場(chǎng)景，網(wǎng)頁(yè)上有個(gè)鏈接，比如說(shuō)高級(jí)搜索，點(diǎn)擊以后會(huì)出現(xiàn)一個(gè)搜索面板。由于面板里有很多搜索字段，而這些搜索字段又有很多數(shù)據(jù)，因此決定采用異步來(lái)加載該搜索面板。以jQuery為例，代碼可能會(huì)這么寫(xiě)：
- $('#advance_search’).bind(‘click’, function(e){
- $('#advance_search_panel’).load(‘/xxx/advance_search.html"’);
- });
但是呢，又需要在加載后做一些處理，比如說(shuō)隱藏掉正在加載的提示文字或者圖標(biāo)，好說(shuō)，就給load加上callback
- ….load(‘…..', function(){
- $('#waiting_message’).hide();
- })
面板里面有個(gè)搜索按鈕，點(diǎn)擊進(jìn)行搜索，加載完需要綁定click事件，于是我們又在下面加上：
- ….load(‘…..', function(){
- $('#waiting_message’).hide();
- $('#search_button’).bind(‘click’, do_advance_search);
- })
某一天，其他有些頁(yè)面也要加上這個(gè)高級(jí)搜索，但是呢，加載完成后的處理又都不一樣，有的頁(yè)面需要隱藏掉某個(gè)div，有的頁(yè)面需要綁定一些操作等，這時(shí)候怎么辦？難道都去改這個(gè)load方法嗎？
有一種方法可以解決這個(gè)問(wèn)題，加上callback參數(shù)用以回調(diào)，比如 new AdvancedSearch(callback); 當(dāng)然，除此以外，其實(shí)還有一種更優(yōu)雅的方法，事件驅(qū)動(dòng)。
代碼寫(xiě)起來(lái)很簡(jiǎn)單，加載完畢后觸發(fā)這個(gè)事件:
- ….load(‘….', function() {
- $().trigger(‘a(chǎn)dvanced_search_load_complete’);
- })
需要在加載完成后做某些操作的地方綁定一下事件處理函數(shù)即可:
- $().bind(‘a(chǎn)dvanced_search_load_complete’, function(){
- ……
- });
封裝的地方不用任何改動(dòng)，其它地方愛(ài)做什么操作就做什么操作，這就是事件驅(qū)動(dòng)的魅力，極大的松耦合。
總結(jié)一下，事件驅(qū)動(dòng)好處是什么呢？
1. 松耦合的交互，事件發(fā)布者和訂閱者無(wú)須知道對(duì)方的存在。
2. 多對(duì)多的關(guān)系，多個(gè)事件發(fā)布者對(duì)應(yīng)多個(gè)訂閱者。
3. 一個(gè)個(gè)事件發(fā)布出來(lái)，針對(duì)這些事件作出響應(yīng)，這就是一個(gè)業(yè)務(wù)場(chǎng)景，每個(gè)步驟清晰自然。
4. 事件發(fā)布可以帶參數(shù)，事件處理者可以拿到關(guān)于該事件的任何數(shù)據(jù)。
基于事件驅(qū)動(dòng)的Javascript編程模型不同于常見(jiàn)的全局函數(shù)隨便調(diào)的Javascript，它的模塊更內(nèi)聚，更容易復(fù)用，在業(yè)務(wù)不可預(yù)知的前提下，業(yè)務(wù)代碼改變得更少。
目標(biāo)，更漂亮的Javascript事件驅(qū)動(dòng)，我們都來(lái)?yè)肀?/p>
文章名稱：詳解Javascript事件驅(qū)動(dòng)的來(lái)龍去脈
URL標(biāo)題：http://www.5511xx.com/article/cosgioc.html
