Javascriptの書き始めに使うテンプレコード

dorako321

10年前

var onloadHandler = function(){
    //ここに実行したいコードを書く。ほげほげ
};

if (window.addEventListener) {
    window.addEventListener('load', onloadHandler, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', onloadHandler);
}

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

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");
    }
}

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で実行している感じですかね。

いやー。斜め上すぎる。