zoukankan      html  css  js  c++  java
  • JS原生方法实现jQuery的ready()

    浏览器加载页面的顺序:

    1、 解析HTML结构

    2、 加载外部脚本和样式表文件

    3、 解析并执行脚本代码

    4、 构造HTML DOM模型==ready()

    5、 加载图片等组件

    6、 页面加载完毕==onload()

    ready事件是在DOM模型构造完毕时触发

    load事件是在页面加载完毕后触发

    function ready(fn) {
        if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', function () {
                //注销事件, 避免反复触发
                document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                fn(); //执行函数
            }, false);
        } else if (document.attachEvent) { //IE
            document.attachEvent('onreadystatechange', function () {
                if (document.readyState == 'complete') {
                    document.detachEvent('onreadystatechange', arguments.callee);
                    fn(); //函数执行
                }
            });
        }
    };
    

     ready()加强版

    /*
    * 传递函数给whenReady()
    * 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用
    */
    var whenReady = (function () { //这个函数返回whenReady()函数
        var funcs = []; //当获得事件时,要运行的函数
        var ready = false; //当触发事件处理程序时,切换为true
        //当文档就绪时,调用事件处理程序
        function handler(e) {
            if (ready) return; //确保事件处理程序只完整运行一次
            //如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好
            if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {
                return;
            }
            //运行所有注册函数
            //注意每次都要计算funcs.length
            //以防这些函数的调用可能会导致注册更多的函数
            for (var i = 0; i < funcs.length; i++) {
                funcs[i].call(document);
            }
            //事件处理函数完整执行,切换ready状态, 并移除所有函数
            ready = true;
            funcs = null;
        }
        //为接收到的任何事件注册处理程序
        if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', handler, false);
            document.addEventListener('readystatechange', handler, false); //IE9+
            window.addEventListener('load', handler, false);
        } else if (document.attachEvent) {
            document.attachEvent('onreadystatechange', handler);
            window.attachEvent('onload', handler);
        }
        //返回whenReady()函数
        return function whenReady(fn) {
            if (ready) { fn.call(document); }
            else { funcs.push(fn); }
        }
    })();
    //--------------------- test -----
    function t1() {
        console.log('t1');
    }
    function t2() {
        console.log('t2');
    }
    // t2-t1-t2
    whenReady(t1);
    t2();
    whenReady(t2);
    
  • 相关阅读:
    【Codeforces 349B】Color the Fence
    【Codeforces 459D】Pashmak and Parmida's problem
    【Codeforces 467C】George and Job
    【Codeforces 161D】Distance in Tree
    【Codeforces 522A】Reposts
    【Codeforces 225C】Barcode
    【Codeforces 446A】DZY Loves Sequences
    【Codeforces 429B】Working out
    【Codeforces 478C】Table Decorations
    【Codeforces 478C】Table Decorations
  • 原文地址:https://www.cnblogs.com/sntetwt/p/4076306.html
Copyright © 2011-2022 走看看