讀Zepto源碼之assets模塊

thursday 發布于2019-08-21 16:25 / 1216人閱讀

摘要：模塊是為解決移動版加載圖片過大過多時崩潰的問題。因為沒有處理過這樣的場景，所以這部分的代碼解釋不會太多，為了說明這個問題，我翻譯了這篇文章作為附文怎樣處理移動端對圖片資源的限制，更詳細地解釋了這個模塊的應用場景。

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

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

源碼版本

本文閱讀的源碼為 zepto1.2.0

源碼分析

;(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 設置為空，讓垃圾回收器將圖片元素回收，從而釋放內存。

系列文章

讀Zepto源碼之代碼結構

讀 Zepto 源碼之內部方法

讀Zepto源碼之工具函數

讀Zepto源碼之神奇的$

讀Zepto源碼之集合操作

讀Zepto源碼之集合元素查找

讀Zepto源碼之操作DOM

讀Zepto源碼之樣式操作

讀Zepto源碼之屬性操作

讀Zepto源碼之Event模塊

讀Zepto源碼之IE模塊

讀Zepto源碼之Callbacks模塊

讀Zepto源碼之Deferred模塊

讀Zepto源碼之Ajax模塊

參考

Zepto assets 模塊的原理？

How to work around the Mobile Safari image resource limit

License

最后，所有文章都會同步發送到微信公眾號上，歡迎關注,歡迎提意見：

作者：對角另一面

云服務器 GPU云服務器讀源碼源碼中文說明之源碼編譯模塊 linux 模塊源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88514.html

讀Zepto源碼之Stack模塊

摘要：讀源碼系列文章已經放到了上，歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法，這些方法在調用的時候，會為返回的結果添加的屬性，用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。讀 Zepto 源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼版本本文閱讀的...

crossea 2019-08-21 17:03 評論0 收藏0
讀Zepto源碼之Gesture模塊

摘要：模塊基于上的事件的封裝，利用屬性，封裝出系列事件。這個判斷需要引入設備偵測模塊。然后是監測事件，根據這三個事件，可以組合出和事件。其中變量對象和模塊中的對象的作用差不多，可以先看看讀源碼之模塊對模塊的分析。 Gesture 模塊基于 IOS 上的 Gesture 事件的封裝，利用 scale 屬性，封裝出 pinch 系列事件。讀 Zepto 源碼系列文章已經放到了github上，歡...

coolpail 2019-08-21 16:43 評論0 收藏0
讀Zepto源碼之Form模塊

摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發事件，提交表單。最終返回的結果是一個數組，每個數組項為包含和屬性的對象。否則手動綁定事件，如果沒有阻止瀏覽器的默認事件，則在第一個表單上觸發，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發 submit 事件，提交表單。讀 Zepto 源碼系列文章已...

陳江龍 2019-08-21 17:12 評論0 收藏0
讀Zepto源碼之fx_methods模塊

摘要：所以模塊依賴于模塊，在引入前必須引入模塊。原有的方法分析見讀源碼之樣式操作方法首先調用原有的方法，將元素顯示出來，這是實現動畫的基本條件。如果沒有傳遞，或者為值，則表示不需要動畫，調用原有的方法即可。 fx 模塊提供了 animate 動畫方法，fx_methods 利用 animate 方法，提供一些常用的動畫方法。所以 fx_methods 模塊依賴于 fx 模塊，在引入 fx_m...

junbaor 2019-08-21 16:59 評論0 收藏0
讀Zepto源碼之IOS3模塊

摘要：用法與參數要理解這段代碼，先來看一下的用法和參數用法參數回調函數，有如下參數上一個回調函數返回的值或者是初始值當前值當前值在數組中的索引調用的數組初始值，如果沒有提供，則為數組的第一項。接下來，檢測回調函數是否為，如果不是，拋出類型錯誤。 IOS3 模塊是針對 IOS 的兼容模塊，實現了兩個常用方法的兼容，這兩個方法分別是 trim 和 reduce 。讀 Zepto 源碼系列文章...

lavnFan 2019-08-21 16:51 評論0 收藏0