jsfiddleで書いたtmlib.jsを使った俺のコードがjsdo.itで動かなかった
こんばんは、次男が、1.5歩、歩いたそうです。@kjunichiです。
なぜか、jsdo.itで動かない！
実は、jsdo.itからプライベートイベントのお誘いがあり、そこで、tmlib.jsの作者の@phi_jpさんから 直々にtmlib.jsについてお話をお聞きしたことがあり、試そうと試そうと思っていたものの、 なかなかできずに新年度を迎えて、慌てて取り組んでいるところです。ｗ
原因
ユーザーのJavaScriptの記述される場所の違い
jsfiddleでは、ユーザーのjsがhead部に記述される。 jsdo.itでは、bodyの閉じタグの直前に記述される。
tmlib.jsの内部動作
window.addEventListnerでloadイベントを登録している。
jsfiddleだと
- ユーザーのjsが実行され、window.addEventListenerでloadイベント時のリスナーを登録。
- tmlib.jsが読み込まれ、tmlib.js側のload時のリスナー登録が行われる。
- DOMのロードが完了して、ブラウザがloadイベントに登録されたリスナーを順番に処理する。
- ユーザーのjsのloadイベントに対応するリスナーが実行され、tm.mainを処理。
- tmlib.jsのloadイベントに対応するリスナーが実行される。
jsdo.itだと
- tmlib.jsが読み込まれ、tmlib.js側のload時のリスナー登録が行われる。
- ユーザーのjsがに実行され、ここで、window.addEventListenerでloadイベント時のリスナーを登録。
- DOMのロードが完了。
- tmlib.jsのloadイベントに対応するリスナーが実行される。
- ユーザーのjsのloadイベントに対応するリスナーが実行され、tm.mainを処理
まとめ
Jsdo.itで外部のフレームワーク系のライブラリを使ってる時に、 DOMのloadをまって自前の処理を本当にする必要があるかを、よく確認すること。
tmlib.jsのページを改めてみると、
「// メイン処理(ページ読み込み後に実行される)」
との記述が。。。 というわけで、DOMのload後に記述するのではなく、素直にサンプルの通りに記述していれば OKということでした。
関連記事
- 俺がtmlib.jsの公式エディタのrunstantをオフライン対応のデスクトップアプリにするの前編
- 俺がtmlib.jsの公式エディタのrunstantをオフライン対応のデスクトップアプリにするの後編
