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)
侧视图:没有输出。