DomContentLoadedのイベントハンドラを複数書くこと

Question

https://www.slideshare.net/YoshieYamamoto/ss-83840311

ちょっと話題になったスライドですがこの中で、
readyイベント( == DomContentLoadedイベント)を同一ページで複数書いてはいけないと
ありますが、具体的な副作用は何でしょうか。
イベントの順番が大切な場合は、実行順が保証されないのはあると思いますが、
それ以外にデメリットがあれば知りたいです。

Answer 1

大規模かつ多人数による開発なので、勝手にreadyへセットしてしまうとどこで何をやっているのか把握しきれなくなるという面が多いと思います（技術的な副作用というより、コード管理の面での問題です）。

readyを1箇所にして、なおかつ動かすものを具体的にコードで書き表すことで、「このページで動いているコードはこれだけある」と明確にするための施策だと判断しました。

Comments

[furyu]

複数人で開発する際に、readyイベントがとこで何をやっているかの
見通しがよくなりそうですね。ありがとうございます。

Answer 2

個人的意見です.

---

DOMContentLoadedイベントに記述する内容はWEBページの初期化が主だと思います. つまり, DOMContentLoadedイベントにコールバックを複数登録することは, 初期化シーケンスの分散管理にほかなりません.

これはプロジェクトが小さいうちはさほどメンテナンスコストに影響しませんが, 大規模プロジェクト（コードメンテナの増加等）となるに連れて, コードそのものが肥大化したり初期化処理が複数のJSファイルにまたがったりすることでコードの可読性や保守性を著しく損なうことが予想されます.

そのため, 「DOMContentLoadedイベントに登録するコールバックは単一とし, 初期化処理を追加する場合はそのコールバックそのものにコードを追加する」というコーディング規約としているのでしょう.

Comments

[furyu]

コーディング規約として、DomContentLoadedは１箇所で定義すると定めると
可読性や保守性が上がりそうです。DomContentLoadedのタイミングは処理が多いので
効果が高そうですね。

Answer 3

jQuery(document).ready() と DOMContentLoaded

イベントの順番が大切な場合は、実行順が保証されないのはあると思いますが、

DOMContentLoaded に限った問題ではないと思いますが、UI Eventsではイベントリスナーは登録した順番で実行されることが保証されています。

対して、jQuery(document).ready() では DOMContentLoaded と比較してどちらが先に発動するか、が明記されていません。
https://api.jquery.com/ready/
勿論、実際にはどちらかが先に発動するように設計されているはずですが、ドキュメントに説明がない以上は、将来的に挙動が変更される可能性も否定出来ません。
従って、順番が重要な場合において jQuery(document).ready() と DOMContentLoaded を混在させるべきではないと判断できます。

同じノードに複数のイベントハンドラを登録する

先述の通り、これは DOMContentLoaded に限った問題ではなく、同じ要素ノードに複数のイベントハンドラを登録した場合にも適用されます。
ある要素ノードにハンドラAとハンドラBを登録する場合、次の2パターンの状況が考えられます。

• 「ハンドラA -> ハンドラB」の順番で実行されなければならない
• ハンドラA、ハンドラBはどちらが先に発動しても問題がない(各々ぎ独立した機能、もしくはハンドラA,Bに関係性はあるが、どちらが先に発動しても整合性がとれるように設計されている)

同じ理屈が DOMContent にも適用出来るでしょう。
順番への依存性が低いコードなら分割管理しても良いですが、逆なら統合管理(DOMContentLoadedを一つにまとめる)せざるを得ません。

Re: furyu さん

Comments

[furyu]

ありがとうございます。DomContentLoadedの場合でいうと、実行順が保証されて居ないのではなく定義箇所が分散すると把握しにくくなるということでしょうか。
readyの場合は、保証されていない、、と。それは知らなかったです。モジュール化もできるようになってきているので集中管理したほうが良さそうですね。