zepto的ready方法
zepto中的ready函数是作为$.fn的一个方法,即作为一个zepto对象的方法
readyRE = /complete|loaded|interactive/;
ready: function(callback){
// need to check if document.body exists for IE as that browser reports
// document ready when it hasn't yet created the body element
if (readyRE.test(document.readyState) && document.body) callback($)
else document.addEventListener('DOMContentLoaded', function(){ callback($) }, false)
return this
},
ready返回的是this,即调用ready的自身对象。
一开始,对于采用if else语句不太了解,不清楚为什么要用两种方式调用回调函数。
在MDN中,有这样的描述:
document.readyState有三个值,分别为loading,interactive,completed.
当document
文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时,返回"interactive",并引发DOMContentLoaded
事件。当文档加载完成时,返回"complete",并引发load
事件.
DomApi也提供了两个相关事件,一个是上面的DOMContentLoaded,另一个是
load事件。
所以在zepto中,必须检测document.readyState的值来判断下一步的进行的动作。
假如我们采用的是这样的语句:
ready: function(callback){
// need to check if document.body exists for IE as that browser reports
// document ready when it hasn't yet created the body element
if (readyRE.test(document.readyState) && document.body) document.addEventListener('DOMContentLoaded', function(){ callback($) }, false)
return this
},
那么可能出现一种情况,即document.readyState已经跳过了loading阶段,即文档已经结束渲染,并引发过DOMContentLoaded
事件,那么下面的语句就不会执行。
代码测试:
<script type="text/javascript">
if(document.readyState == "loading")
document.addEventListener('DOMContentLoaded', function(){ console.log("It is OK!") }, false)
</script>
测试图:
测试代码:
if(document.readyState == "interactive" || document.readyState == "completed" )
document.addEventListener('DOMContentLoaded', function(){ console.log("It is OK!") }, false)
侧视图:没有输出。
zepto的ready方法的更多相关文章
- jquery和zepto的扩展方法extend
jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...
- (转载)jQuery 1.6 源码学习(二)——core.js[2]之extend&ready方法
上次分析了extend方法的实现,而紧接着extend方法后面调用了jQuery.extend()方法(core.js 359行),今天来看看究竟core.js里为jQuery对象扩展了哪些静态方法. ...
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...
- 学习zepto.js(原型方法)
学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...
- jQuery的ready方法实现原理分析
jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺 ...
- jQuery中的ready方法及实现按需加载css,js
模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...
- jquery ready方法实现原理 内部原理
jquery ready方法实现原理 内部原理 今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下 ...
- 模拟jQuery中的ready方法及实现按需加载css,js
一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合 ...
随机推荐
- 探寻TP-Link路由器的登录验证
提示:该案例仅供学习使用,切勿滥用!!! 查找路由器连接地址 查找ip $ ifconfig enp2s0: flags=<UP,BROADCAST,RUNNING,MULTICAST> ...
- Particle Filters
|—粒子滤波原理 |—基础代码的建立—|—前进 | |—转弯 | |—噪音(误差 ...
- Django积木块五——分页
分页 django本身带有分页功能,为什么要用他呢?因为它的代码更为简洁,并且在做筛选的时候会把url中的所有参数都组装起来,并且加上分页.也就是做筛选中的结果也可以用这个分页. pip instal ...
- shell脚本颜色输出(实例未编辑)
颜色输出通过echo 输出,需要加-e echo -e "\033[背景颜色;字体颜色\033[0m" 背景颜色 40 设置黑色背景 41 设置红色背景 42 设置绿色背景 43 ...
- 人工智能之一般合一算法Java实现之
import java.util.ArrayList; import java.util.Arrays; import java.util.List; import java.util.Scanner ...
- 学习笔记----html的lang属性
lang属性的取值应该遵循 BCP 47 - Tags for Identifying Languages. 单一的 zh 和 zh-CN 均属于废弃用法. 问题主要在于,zh 现在不是语言code了 ...
- Jenkins获取运行job的用户名
1. Jenkins获取运行job的用户名 需要安装user build vars plugin 插件,然后就可以取到$BUILD_USER_ID变量. user build vars plugin下 ...
- 【高速接口-RapidIO】3、RapidIO串行物理层的包传输过程
一.引言 前几篇文章已经谈到RapidIO的协议,串行物理层与控制符号. RapidIO协议包括读事务(NREAD),写事务(NWRITE),流写事务(SWRITE),有响应的写事务(NWRITE_R ...
- JDK1.7和JDK1.8对于异常的支持
嗨喽,伙伴们,上次我们讲了<Java异常解读以及通过业务逻辑解决异常的方式>和<java异常处理方式try-catch-finally>,相信大家对java异常及处理方式有所了 ...
- es5
var arr1=["上海","北京","广州"]; var arr2=[12,22, 33,58,32,45,92]; // 数组.方法( ...