読者です 読者をやめる 読者になる 読者になる

non vorrei lavorare

ブログ名の通りです。javascript three.js mruby rust OCaml golang julialang blender

jsfiddleで書いたtmlib.jsを使った俺のコードがjsdo.itで動かなかった

パソコン・インターネット
こんばんは、次男が、1.5歩、歩いたそうです。kjunichiです。

なぜか、jsdo.itで動かない!

実は、jsdo.itからプライベートイベントのお誘いがあり、そこで、tmlib.jsの作者の@phi_jpさんから 直々にtmlib.jsについてお話をお聞きしたことがあり、試そうと試そうと思っていたものの、 なかなかできずに新年度を迎えて、慌てて取り組んでいるところです。w

原因

ユーザーのJavaScriptの記述される場所の違い

jsfiddleでは、ユーザーのjsがhead部に記述される。 jsdo.itでは、bodyの閉じタグの直前に記述される。

tmlib.jsの内部動作

window.addEventListnerでloadイベントを登録している。

jsfiddleだと

  1. ユーザーのjsが実行され、window.addEventListenerでloadイベント時のリスナーを登録。
  2. tmlib.jsが読み込まれ、tmlib.js側のload時のリスナー登録が行われる。
  3. DOMのロードが完了して、ブラウザがloadイベントに登録されたリスナーを順番に処理する。
  4. ユーザーのjsのloadイベントに対応するリスナーが実行され、tm.mainを処理。
  5. tmlib.jsのloadイベントに対応するリスナーが実行される。

jsdo.itだと

  1. tmlib.jsが読み込まれ、tmlib.js側のload時のリスナー登録が行われる。
  2. ユーザーのjsがに実行され、ここで、window.addEventListenerでloadイベント時のリスナーを登録。
  3. DOMのロードが完了。
  4. tmlib.jsのloadイベントに対応するリスナーが実行される。
  5. ユーザーのjsのloadイベントに対応するリスナーが実行され、tm.mainを処理

まとめ

Jsdo.itで外部のフレームワーク系のライブラリを使ってる時に、 DOMのloadをまって自前の処理を本当にする必要があるかを、よく確認すること。

tmlib.jsのページを改めてみると、
「// メイン処理(ページ読み込み後に実行される)」
との記述が。。。 というわけで、DOMのload後に記述するのではなく、素直にサンプルの通りに記述していれば OKということでした。