讀Zepto源碼之assets模塊

時間 2019-12-09

標籤 zepto 源碼 assets 模塊简体版

原文原文鏈接

assets 模塊是爲解決 Safari 移動版加載圖片過大過多時崩潰的問題。由於沒有處理過這樣的場景，因此這部分的代碼解釋不會太多，爲了說明這個問題，我翻譯了《How to work around the Mobile Safari image resource limit》這篇文章做爲附文（《怎樣處理 Safari 移動端對圖片資源的限制》），更詳細地解釋了這個模塊的應用場景。javascript

讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zeptojava

源碼版本

本文閱讀的源碼爲 zepto1.2.0git

GitBook

《reading-zepto》github

源碼分析

;(function($){
  var cache = [], timeout

  $.fn.remove = function(){
    return this.each(function(){
      if(this.parentNode){
        if(this.tagName === 'IMG'){
          cache.push(this)
          this.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
          if (timeout) clearTimeout(timeout)
          timeout = setTimeout(function(){ cache = [] }, 60000)
        }
        this.parentNode.removeChild(this)
      }
    })
  }
})(Zepto)

若是看了附文，這段代碼就很容易理解了，若是標籤爲圖片，則用另一張較小的圖片替換，而且將圖片元素存入 cache 中，再調用 removeChild 將圖片元素從頁面中刪除，要注意，此時圖片元素只是從頁面中刪除了，並無被垃圾回收，在 6s 後，將 cache 設置爲空，讓垃圾回收器將圖片元素回收，從而釋放內存。微信