局所性保存イベントハンドラー
局所性を維持するイベントハンドラー
locality preserving event handler
下記のような例を考える (el がクリックされたら el に loading class を当てて、API にリクエストする)
code:js
// Given el is an html element
el.addEventListener('click', async () => {
el.classList.add('loading')
try {
await callApi()
} catch {
alert('something went wrong!')
} finally {
el.classList.remove('loading')
}
})
このイベントハンドラーは el において局所性保存している (The event handler preserves the locality at "el") と考える。なぜなら、このハンドラーは el にバインドされていて、なおかつ、el の内部にしか影響を及ぼさないので、el に閉じて作用している。
次に以下のような例を考えてみる (el がクリックされたら、edit-modal クラスの DOM に show クラスを当てる)
code:js
// Given el is an html lement
el.addEventListener('click', () => {
document.querySelector('.edit-modal')?.classList.add('show')
})
このイベントハンドラーは el の局所性を破っている (The event handler breaks the locality at "el")。なぜなら、document.querySelector('.edit-modal') というクエリーは DOM ツリー全体から edit-modal を探しているため、作用が el の外に溢れ出している。
局所性保存イベントハンドラーは管理がしやすく、局所性逸脱イベントハンドラーは管理がしずらい
局所性逸脱イベントハンドラーは実質 Root DOM に依存しているので、Root DOM の挙動とみなすことが出来る
局所性逸脱イベントハンドラーが多いシステムは、巨大な Root DOM の挙動を記述しているシステムとみなすことが出来る。