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>