zepto 源碼分析2

jsdt 發(fā)布于2019-08-21 17:21 / 1772人閱讀

摘要：優(yōu)化技巧全局對象屬性轉換成臨時變量，提高讀取效率采用保證類型與方法一致原生此時如果不是數組類型，則會報錯判斷變量可能的值簡潔高效常規(guī)寫法函數實現對原生的拓展，使支持對象會過濾值支持類數組對象，如函數中的在返回值為時，能中止數組遍歷數組去重深

優(yōu)化技巧

全局對象屬性轉換成臨時變量，提高讀取效率

document = window.document

采用 call 保證類型與方法一致

// zepto
var emptyArray = []
$.inArray = function(elem, array, i){
  return emptyArray.indexOf.call(array, elem, i)
}

// 原生
$.inArray = function(elem, array, i){
  // 此時如果 array 不是 數組類型，則會報錯：
  // array.indexOf is not a function
  return array.indexOf(elem, i) 
}

判斷變量可能的值

/complete|loaded|interactive/.test(document.readyState) // 簡潔高效

// 常規(guī)寫法
document.readyState=="complete" || document.readyState=="loaded" || document.readyState=="interactive"

函數實現 $.map & $.each

對原生 map & forEach 的拓展，使支持對象

$.map 會過濾 null 值

$.map 支持類數組對象，如函數中的 arguments

$.each 在返回值為 false 時，能中止數組遍歷

數組去重

var uniq = function (array){ 
  return filter.call(array, function (item, idx) { 
    return array.indexOf(item) == idx 
  }) 
}

深拷貝

遞歸實現

按需初始化類型

function extend(target, source, deep) {
  for (key in source)
    if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
      if (isPlainObject(source[key]) && !isPlainObject(target[key]))
        target[key] = {}
      if (isArray(source[key]) && !isArray(target[key]))
        target[key] = []
      extend(target[key], source[key], deep)
    }
    else if (source[key] !== undefined) target[key] = source[key]
}

獲取元素的寬高

計算 window 寬高用 innerWidth / innerHeight

計算 document 寬高用 scrollWidth / scrollHeight

其他元素：getBoundingClientRect，返回數值對象包含left、top、right和bottom，單位為 px

["width", "height"].forEach(function(dimension){
  var dimensionProperty =
      dimension.replace(/./, function(m){ return m[0].toUpperCase() })

  $.fn[dimension] = function(value){
    var offset, el = this[0]
    if (value === undefined) return isWindow(el) ? el["inner" + dimensionProperty] :
    isDocument(el) ? el.documentElement["scroll" + dimensionProperty] :
    (offset = this.offset()) && offset[dimension]
    else return this.each(function(idx){
      el = $(this)
      el.css(dimension, funcArg(this, value, idx, el[dimension]()))
    })
  }
})

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

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

zepto源碼分析-代碼結構

摘要：本來想學習一下的源碼，但由于的源碼有多行，設計相當復雜，所以決定從開始，分析一個成熟的框架的代碼結構及執(zhí)行步驟。同時發(fā)表在我的博客源碼分析代碼結構本來想學習一下jQuery的源碼，但由于jQuery的源碼有10000多行，設計相當復雜，所以決定從zepto開始，分析一個成熟的框架的代碼結構及執(zhí)行步驟。網上也有很多zepto的源碼分析，有的給源碼添加注釋，有的談與jQuery的不同，...

sherlock221 2019-08-20 12:20 評論0 收藏0
讀Zepto源碼之代碼結構

摘要：源碼結構整體結構如果在編輯器中將的源碼折疊起來，看到的就跟上面的代碼一樣。參考源碼分析代碼結構對象思想與源碼分析設計和源碼分析源碼中關于的問題最后，所有文章都會同步發(fā)送到微信公眾號上，歡迎關注歡迎提意見雖然最近工作中沒有怎么用 zepto ，但是據說 zepto 的源碼比較簡單，而且網上的資料也比較多，所以我就挑了 zepto 下手，希望能為以后閱讀其他框架的源碼打下基礎吧。源碼版...

warkiz 2019-08-20 15:35 評論0 收藏0
讀 Zepto 源碼之操作 DOM

摘要：輔助方法這個方法遞歸遍歷的子節(jié)點，將節(jié)點交由回調函數處理。對集合進行遍歷，調用方法，如果為函數，則將回調函數返回的結果作為參數傳給否則，如果為，則將也即包裹元素的副本傳給，否則直接將傳給。這篇依然是跟 dom 相關的方法，側重點是操作 dom 的方法。讀Zepto源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼版本本文閱讀的源碼為 zepto...

beita 2019-08-20 17:00 評論0 收藏0
Zepto 源碼分析 1 - 進入 Zepto

摘要：選擇的理由是一個用于現代瀏覽器的與大體兼容的庫。環(huán)境搭建分析環(huán)境的搭建僅需要一個常規(guī)頁面和原始代碼一個常規(guī)頁面打開的首頁即可，在開發(fā)人員工具中即可使用原始代碼本篇分析的代碼參照，進入該代碼分支中即可。選擇 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...

Aklman 2019-08-26 13:21 評論0 收藏0
Zepto 源碼分析 4 - 核心模塊入口

摘要：對象構造函數讀入的兩個參數與在中也有明確的規(guī)范，用以保證構造函數的簡單性。承接第三篇末尾內容，本篇結合官方 API 進入對 Zepto 核心的分析，開始難度會比較大，需要重點理解幾個核心對象的關系，方能找到線索。 $() 與 Z 對象創(chuàng)建 Zepto Core API 的首個方法 $() 按照其官方解釋： Create a Zepto collection object by pe...

xzavier 2019-08-26 13:24 評論0 收藏0
Zepto源碼分析（一）核心代碼分析

摘要：源碼分析一核心代碼分析源碼分析二奇淫技巧總結本文只分析核心的部分代碼，并且在這部分代碼有刪減，但是不影響代碼的正常運行。當長度為則不添加內容，否則逐個將逐個到當前實例新增直接返回一個新的構造函數添加初始化方法。 Zepto源碼分析（一）核心代碼分析Zepto源碼分析（二）奇淫技巧總結本文只分析核心的部分代碼，并且在這部分代碼有刪減，但是不影響代碼的正常運行。目錄 * 用閉包封裝Z...

BicycleWarrior 2019-08-20 18:57 評論0 收藏0