• jQuery初始化加载的实现


    与jQuery事件模块的其他事件不同,其他事件是通过数据缓存实现的,而初始化事件,jQuery.ready则是通过回调函数列表实现的。$()的参数如果是函数就向回调函数列表中添加回调函数,同时为DOMContentLoaded注册事件,在注册的事件处理函数中,触发resolve事件。

    以下是对jQuery源代码中的ready事件进行了简化的代码。具体如下:

    1.定义了jQuery.ready.promise.功能及代码实现如下:

        //jQuer的DOM页面加载通过回调函数列表完成
        //下面的函数:1)初始化一个回调函数列表
        //2)向DomContentLoaded注册监听事件
        jQuery.ready.promise=function(obj){
            if(!readyList){
                readyList=jQuery.Defered();
                document.addEventListener('DOMContentLoaded',compeleted,false);
            }
            return readyList.promise(obj);
        };

    2.向document的DOMContentLoaded注册的监听函数compeleted代码如下:

            compeleted=function(){
                document.removeEventListener('DOMContentListener',compeleted,false);
                jQuery.ready();
            }; 

    3.上述代码中的jQuery.ready()实际上完成了回调函数列表的触发操作,具体如下: 

    jQuery.extend({   
    
        // Handle when the DOM is ready
        ready: function( wait ) {        
    
            // 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");
            // }
        },
    });

    4.在初始化函数中,为回调函数列表添加加载成功的触发函数,如下所示:(实际上源代码调用了.ready方法,不过实际上就是封装了以下代码)

    jQuery.fn.extend({
        init: function( selector, context, rootjQuery ) {      
    
            // Handle HTML strings
            if ( typeof selector === "string" ) {
                 
            } else if ( jQuery.isFunction( selector ) ) {
                jQuery.ready.promise().done(selector);
           return this;
    } },

    如此就能够保证,当页面加载完成时间DOMContentLoaded事件触发的时候,回调函数能够依次执行。

  • 相关阅读:
    java8 stream().map().collect()用法
    Java中Collections的emptyList、EMPTY_LIST详解
    zxing实现java二维码生成和解析
    机器学习与数据挖掘—K邻近算法(KNN)
    第一个Web项目(IDEA)
    Ucore操作系统实验-实验课程设计
    数据挖掘与机器学习--损失函数
    机器数据挖掘--常见监督学习算法以及数据挖掘流程
    Tomcat安装-环境变量配置-启动-关闭
    操作系统实验教程(Ucore)--Lab6
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/6183988.html
Copyright © 2020-2023  润新知