Javascriptの書き始めに使うテンプレコード
|
1 2 3 4 5 6 7 8 9 |
var onloadHandler = function(){ //ここに実行したいコードを書く。ほげほげ }; if (window.addEventListener) { window.addEventListener('load', onloadHandler, false); } else if (window.attachEvent) { window.attachEvent('onload', onloadHandler); } |
window.onloadには既に値が入っているのに、window.onload = onloadHandler; と代入してしまい、他のjavascriptコードで代入していたFunctioin式を上書きしちゃうなんて事をよくやってしまうので、最近はこんな風に書いています。
これってjQueryは$(document).Ready(function());の1行で解決するわけですが、上述のバニラコードと同じような処理やっているのかなーと気になって調べてみました。
http://james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.ready
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
function (wait) { // Abort if there are pending holds or we're already ready if (wait === true ? --jQuery.readyWait : jQuery.isReady) { return; } // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if (!document.body) { return setTimeout(jQuery.ready); } // Remember that the DOM is ready jQuery.isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be if (wait !== true && --jQuery.readyWait > 0) { return; } // If there are functions bound, to execute readyList.resolveWith(document, [jQuery]); // Trigger any bound ready events if (jQuery.fn.trigger) { jQuery(document).trigger("ready").off("ready"); } } |
なんじゃこれ
流石jQuery様様。さらっと流し読みした感じだとbodyのDOMが構築されるまで待機して構築されたらReadyをTriggerで実行している感じですかね。
いやー。斜め上すぎる。