亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

讀Zepto源碼之a(chǎn)ssets模塊

thursday / 1337人閱讀

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

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

讀Zepto源碼系列文章已經(jīng)放到了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)

如果看了附文，這段代碼就很容易理解了，如果標(biāo)簽為圖片，則用另外一張較小的圖片替換，并且將圖片元素存入 cache 中，再調(diào)用 removeChild 將圖片元素從頁面中刪除，要注意，此時圖片元素只是從頁面中刪除了，并沒有被垃圾回收，在 6s 后，將 cache 設(shè)置為空，讓垃圾回收器將圖片元素回收，從而釋放內(nèi)存。

系列文章

讀Zepto源碼之代碼結(jié)構(gòu)

讀 Zepto 源碼之內(nèi)部方法

讀Zepto源碼之工具函數(shù)

讀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

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

作者：對角另一面

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88514.html

相關(guān)文章

  • 讀Zepto源碼之Stack模塊

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

    crossea 評論0 收藏0

  • 讀Zepto源碼之Gesture模塊

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

    coolpail 評論0 收藏0

  • 讀Zepto源碼之Form模塊

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

    陳江龍 評論0 收藏0

  • 讀Zepto源碼之fx_methods模塊

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

    junbaor 評論0 收藏0

  • 讀Zepto源碼之IOS3模塊

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

    lavnFan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<