參考瀏覽器事件派發實現乙個同步事件流

2022-06-21 04:30:13 字數 2234 閱讀 9189

同步事件流: 

在函式中可以終止該階段後續函式的執行,也可以終止整個流程;

//

同步流程控制

function

syncprocess(hooks)

}syncprocess.prototype.run = function

(initdata, inithook)

var listeners = this.listeners[this.hooks[i]] ||;

this.phase = this

.hooks[i];

for (var k = 0; k < listeners.length; k++) }}

this.returnvalue =returnvalue;

return

this

} syncprocess.prototype.registerhook = function

(hook, index, callback)

if (this.hooks.indexof(hook) === -1)

if (hook in

this

.listeners)

else

}syncprocess.prototype.removehook = function

(hook, callback)

else

} else}}

syncprocess.prototype.stopprograh = function

() syncprocess.prototype.stopprocess = function

() syncprocess.prototype.continueprocess = function

()

this.run(this.returnvalue, this.hooks[curstep + 1])

}//燜雞

var mj =,

function (v) ,

function (v)

],"切菜": [

function

(v)

return v += '+切菜 1;'},

function (v, pross)

],"烹飪": [

function (v) ,

function (v)

],"出鍋": [

function (v) ]}

var gx =object.keys(mj);

var cook = new

syncprocess(gx);

gx.foreach(

function

(gx) )

});cook.registerhook('涼拌', 3, function (v) )

cook.run();

settimeout(

function

() , 2000)

console.log(cook);

同步流程只是理想情況, 大多數還是非同步流程;從流程的角度來說, 我們寫程式時也是有很多的過程,把過程進行分類,排列,可以讓程式結構更為清晰易懂;

更多同步或非同步流程的實現, 可以參考 tapable;附: 

注: 瀏覽器的事件派發: 根據事件註冊的階段, 型別, 依照階段和優先順序順序執行; 如果在某個函式中呼叫了stoppropagation, 則停止父級同型別事件的傳播; 如果呼叫了 stopimmediatepropagation,則

停止父級同型別事件的傳播, 並且停止當前物件上註冊的同型別的其他事件的傳播;

舉個例子:

給 innerdom 的 mouseenter事件型別註冊了事件 fn1, fn2, 給父級 outerdom 的mouseenter型別註冊了事件 pfn1, pfn2;

如果在 fn1 中呼叫了 stoppropagation, 則停止 mouseenter型別事件的冒泡, outerdom上為 mouseenter型別註冊的事件 pfn1, pfn2 都不會被執行

如果在 fn1 中呼叫了 stopimmediatepropagation, 則停止 mouseenter型別事件的冒泡, outerdom上為 mouseenter型別註冊的事件 pfn1, pfn2 都不會被執行,並且innerdom 上為 mouseenter型別事件註冊的其他函式 fn2 也不會被執行

推薦乙個瀏覽器 搜狗

上邊顯示自己的登陸的賬戶,有各種工具,在最下邊一行中的各種工具很強大,可以新增各種工具,搜狗瀏覽器本身提供了各種常用的瀏覽器,使用起來十分方便,我用的較多的有訊息盒子 在訊息盒子中可以繫結自己的各種賬號,各種通知都可以進行瀏覽 收藏夾也十分有用,個人比較喜歡 還有上邊的京東 了解購物資訊很方便的 本...

分享乙個實現夜間模式的瀏覽器擴充套件

最近花了些時間,做乙個瀏覽器上實現夜間模式的擴充套件。目前已在谷歌 火狐 360瀏覽器中上架,從瀏覽器擴充套件 附加元件中搜尋 夜間助手 即可安裝使用。一些演示 為什麼要做這個擴充套件?就我們程式設計師的工作而言,需要長時間地接觸瀏覽器,或在瀏覽器上進行開發,或搜尋一些資料 教程等。但長時間的白底黑...

分享乙個實現夜間模式的瀏覽器擴充套件

最近花了些時間,做乙個瀏覽器上實現夜間模式的擴充套件。目前已在谷歌 火狐 360瀏覽器中上架,從瀏覽器擴充套件 附加元件中搜尋 夜間助手 即可安裝使用。一些演示 為什麼要做這個擴充套件?就我們程式設計師的工作而言,需要長時間地接觸瀏覽器,或在瀏覽器上進行開發,或搜尋一些資料 教程等。但長時間的白底黑...