讀Zepto源碼以內部方法

時間  2019-12-09
標籤 zepto 源碼 內部 方法 简体版
原文   原文鏈接

源碼版本

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

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

數組方法

定義

var emptyArray = []
	concat = emptyArray.concat
    filter = emptyArray.filter
    slice = emptyArray.slice

zepto 一開始就定義了一個空數組 emptyArray，定義這個空數組是爲了取得數組的 concat、filter、slice 方法java

compact

function compact(array) {
  return filter.call(array, function(item) {
    return item != null
  })
}

刪除數組中的 null 和 undefinednode

這裏用的是數組的 filter 方法，過濾出 item != null 的元素，組成新的數組。這裏刪除掉 null 很容易理解，爲何還能夠刪除 undefined 呢？這是由於這裏用了 != ，而不是用 !== ，用 != 時， null 各 undefined 都會先轉換成 false 再進行比較。git

關於 null 和 undefined 推薦看看這篇文章： undefined與null的區別github

flatten

function flatten(array) {
  return array.length > 0 ? $.fn.concat.apply([], array) : array
}

將數組扁平化，例如將數組 [1,[2,3],[4,5],6,[7,[89]] 變成 [1,2,3,4,5,6,7,[8,9]] ,這個方法只能展開一層，多層嵌套也只能展開一層。正則表達式

這裏，咱們先把 $.fn.concat 等價於數組的原生方法 concat，後面的章節也會分析 $.fn.concat 的。數組

這裏比較巧妙的是利用了 apply ，apply 會將 array 中的 item 當成參數，concat.apply([], [1,2,3,[4,5]]) 至關於 [].concat(1,2,3,[4,5])，這樣數組就扁平化了。瀏覽器

uniq

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

數組去重。微信

數組去重的原理是檢測 item 在數組中第一次出現的位置是否和 item 所處的位置相等，若是不相等，則證實不是第一次出現，將其過濾掉。

字符串方法

camelize

camelize = function(str) {
  return str.replace(/-+(.)?/g, function(match, chr) {
    return chr ? chr.toUpperCase() : ''
  })
}

將 word-word 的形式的字符串轉換成 wordWord 的形式， - 能夠爲一個或多個。

正則表達式匹配了一個或多個 - ，捕獲組是捕獲 - 號後的第一個字母，並將字母變成大寫。

dasherize

function dasherize(str) {
    return str.replace(/::/g, '/')
           .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
           .replace(/([a-z\d])([A-Z])/g, '$1_$2')
           .replace(/_/g, '-')
           .toLowerCase()
  }

將駝峯式的寫法轉換成連字符 - 的寫法。

例如 a = A6DExample::Before

第一個正則表達式是將字符串中的 :: 替換成 / 。a 變成 A6DExample/Before

第二個正則是在出現一次或屢次大寫字母和出現一次大寫字母和連續一次或屢次小寫字母之間加入 _。a 變成 A6D_Example/Before

第三個正則是將出現一次小寫字母或數字和出現一次大寫字母之間加上 _。a 變成A6_D_Example/Before

第四個正則表達式是將 _ 替換成 -。a 變成A6-D-Example/Before

最後是將全部的大寫字母轉換成小寫字母。a 變成 a6-d-example/before

我對正則不太熟悉，正則解釋部分參考自:zepto源碼--compact、flatten、camelize、dasherize、uniq--學習筆記

數據類型檢測

定義

class2type = {},
toString = class2type.toString,

  // Populate the class2type map
$.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
  class2type["[object " + name + "]"] = name.toLowerCase()
})

$.each 函數後面的文章會講到，這段代碼是將基本類型掛到 class2type 對象上。class2type 將會是以下的形式：

class2type = {
  "[object Boolean]": "boolean",
  "[object Number]": "number"
  ...
}

type

function type(obj) {
  return obj == null ? String(obj) :
  class2type[toString.call(obj)] || "object"
}

type 函數返回的是數據的類型。

若是 obj == null ，也就是 null 和 undefined，返回的是字符串 null 或 undefined

不然調用 Object.prototype.toString （toString = class2type.toString）方法，將返回的結果做爲 class2type 的 key 取值。Object.prototype.toString 對不一樣的數據類型會返回形如 [object Boolean] 的結果。

若是都不是以上狀況，默認返回 object 類型。

isFunction & isObject

function isFunction(value) {
  return type(value) === 'function'
}
function isObject(obj) {
  return type(obj) == 'object'
}

調用 type 函數，判斷返回的類型字符串，就知道是什麼數據類型了

isWindow

function isWindow(obj) {
  return obj != null && obj == obj.window
}

判斷是否爲瀏覽器的 window 對象

要爲 window 對象首先要知足的條件是不能爲 null 或者 undefined， 而且 obj.window 爲自身的引用。

isDocument

function isDocument(obj) {
  return obj != null && obj.nodeType == obj.DOCUMENT_NODE
}

判斷是否爲 document 對象

節點上有 nodeType 屬性，每一個屬性值都有對應的常量。document 的 nodeType 值爲 9 ，常量爲 DOCUMENT_NODE。

具體見：MDN文檔：Node.nodeType

isPlainObject

function isPlainObject(obj) {
  return isObject(obj) && !isWindow(obj) && Object.getPrototypeof(obj) == Object.prototype
}

判斷是否爲純粹的對象

純粹對象首先必須是對象 isObject(obj)

而且不是 window 對象 !isWindow(obj)

而且原型要和 Object 的原型相等

isArray

isArray = Array.isArray || 
  		 function(object) { return object instanceof Array}

這個方法來用判斷是否爲數組類型。

若是瀏覽器支持數組的 isArray 原生方法，就採用原生方法，不然檢測數據是否爲 Array 的實例。

咱們都知道，instanceof 的檢測的原理是查找實例的 prototype 是否在構造函數的原型鏈上，若是在，則返回 true。 因此用 instanceof 可能會獲得不太準確的結果。例如：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script>
		window.onload = function () {
			var fwindow = window.framePage.contentWindow // frame 頁面的window對象
			var fArray = fwindow.Array  // frame 頁面的Array
			var fdata = fwindow.data  // frame 頁面的 data [1,2,3]
			console.log(fdata instanceof fArray) // true
			console.log(fdata instanceof Array) // false
		}
	</script>
	<title>Document</title>
</head>
<body>
	<iframe id="framePage" src="frame.html" frameborder="0"></iframe>
</body>
</html>

frame.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		window.data = [1,2,3]
	</script>
</head>
<body>
	<p>frame page</p>
</body>
</html>

因爲 iframe 是在獨立的環境中運行的，因此 fdata instanceof Array 返回的 false 。

在 MDN 上看到，能夠用這樣的 ployfill 來使用 isArray

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
}

也就是說，isArray 能夠修改爲這樣：

isArray = Array.isArray || 
  		 function(object) { return Object.prototype.toString.call(object) === '[object Array]'}

爲何 zepto 不這樣寫呢？知道的能夠留言告知下。

likeArray

function likeArray(obj) {
  var length = !!obj &&   // obj必須存在
      			'length' in obj && // obj 中必須存在 length 屬性
      			obj.length, // 返回 length的值
      type = $.type(obj) // 調用 type 函數，返回 obj 的數據類型。這裏我有點不太明白，爲何要覆蓋掉上面定義的 type 函數呢？再定義多一個變量，直接調用 type 函數很差嗎？

  return 'function' != type &&  // 不爲function類型
    	!isWindow(obj) &&  // 而且不爲window類型
    	(
    		'array' == type || length === 0 || // 若是爲 array 類型或者length 的值爲 0，返回true
    (typeof length == 'number' && length > 0 && (length - 1) in obj)  // 或者 length 爲數字，而且 length的值大於零，而且 length - 1 爲 obj 的 key
  )
}

判斷是否爲數據是否爲類數組。

類數組的形式以下：

likeArrayData = {
  '0': 0,
  '1': 1,
  "2": 2
  length: 3
}

能夠看到，類數組都有 length 屬性，而且 key 爲按0,1,2,3 順序的數字。

代碼已經有註釋了，這裏再簡單總結下

首先將 function類型和 window 對象排除

再將 type 爲 array 和 length === 0 的認爲是類數組。type 爲 array 比較容易理解，length === 0 其實就是將其看做爲空數組。

最後一種狀況必需要知足三個條件：

  1. length 必須爲數字
  2. length 必須大於 0 ，表示有元素存在於類數組中
  3. key length - 1 必須存在於 obj 中。咱們都知道，數組最後的 index 值爲 length -1 ，這裏也是檢查最後一個 key 是否存在。

系列文章

  1. 讀Zepto源碼之代碼結構

參考

最後，全部文章都會同步發送到微信公衆號上，歡迎關注,歡迎提意見：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程