js window.onload && $(document).ready()

時間 2019-11-24

標籤 window.onload window onload document ready 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="../jquery.js"></script>
</head>
<body>


</body>
</html>

<script>
    /**
        1  回顧 window.onload  && $().ready() 的區別
            window.onload 是 js自帶的方式,標誌者全部的dom元素都被加載了,纔會觸發的,
            $(document).ready() 是jquery 對window.onload 的封裝.

        2  2種方式的特色
            1  window.onload 方法只能夠被聲明一次, 若是有屢次聲明,那麼只有最後一次是生效的,
            2  $(document).ready() 方法能夠屢次聲明.

        3  實際的原理
           在window.onload 發生以前, 還有一個事件,  dom content loaded , 
           $(document).ready() 就是模擬該事件來處理的.
    **/

    window.onload = function () {
        console.log('This is first window onload');
    }

    window.onload = function () {
        console.log('This is second window onload');
    }


    $(document).ready(function(){
        console.log("this is ready first");
    });

    $(document).ready(function () {
        console.log("this  is  ready second;")
    })

    $(function () {
        console.log("this is ready three");
    })



    // output   (chrome)
    /*

    this is ready first
    this  is  ready second;
    This is second window onload

    */

    /*
     利用切面編程的思想(aop)來處理window.onload 能夠處理多個函數的問題.
    */

    function addLoadEvent(fn) {
        // 保留原始的 window.onload 函數
        var onload = window.onload;   // 注意,此處的是字面量, 不是一個函數的調用

        if (typeof window.onload != 'function') {
            window.onload = fn;
        } else {
            window.onload = function () {
                onload();           // 字面量函數的調用
                fn();
            }
        }
    }

    addLoadEvent(function () {
        console.log(1);
    });
    addLoadEvent(function () {
        console.log(2);
    });
    addLoadEvent(function () {
        console.log(3);
    });
    /*
        output
        1
        2
        3
   
    */
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。