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)

側視圖：沒有輸出。