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)侧视图：没有输出。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-03-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读