博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery初始化加载的实现
阅读量:5291 次
发布时间:2019-06-14

本文共 1606 字,大约阅读时间需要 5 分钟。

与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事件触发的时候,回调函数能够依次执行。

 

转载于:https://www.cnblogs.com/bobodeboke/p/6183988.html

你可能感兴趣的文章
git 不输入用户名和密码指令
查看>>
利用javascrit获取url传递的参数
查看>>
第四周总结
查看>>
关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧
查看>>
玫瑰花 星星
查看>>
building Utils {{ant+ivy}、{maven}}怎么样手动将下载下来的 JAR 包添加到 Maven、ivy 的本地仓库...
查看>>
HTML格式布局
查看>>
hibernate generator 的使用
查看>>
微信公众号PHP生成二维码海报的几个小扩展
查看>>
MySQL 导出用户权限
查看>>
缓存穿透、缓存雪崩和缓存预热
查看>>
php正则表达式以及正则函数详解
查看>>
1012 数字分类 (20 分)
查看>>
ios实现二维码扫描
查看>>
JAVA异常处理
查看>>
【H3 BPM工作流程管理产品小故事】第六篇 条件可见与条件必填
查看>>
git 打标签并推送tag到托管服务器
查看>>
6.3 OrderBy 优化
查看>>
软件工程基础-结对项目作业
查看>>
C#获取本地txt文件后Json的解析与取值
查看>>