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)

側視圖：沒有輸出。