最近在看zepto的源代碼，把一些有用的函數(shù)摘出來，看看zepto是怎么實(shí)現(xiàn)的，自己做的時(shí)候也可以用。說實(shí)話，zepto的實(shí)現(xiàn)有一些看起來還是很晦澀的，可能是自己的水平不夠，看不透作者的真正的意圖。

1、zepto的正則總結(jié)：

//HTML代碼片斷的正則fragmentRE = /^\s*<(\w+|!)[^>]*>/ //匹配非單獨(dú)一個(gè)閉合標(biāo)簽的標(biāo)簽，類似將<div></div>寫成了<div/>tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig //根節(jié)點(diǎn)rootNodeRE = /^(?:body|html)$/i //class選擇器的正則classSelectorRE = /^\.([\w-]+)$/,//id選擇器的正則idSelectorRE = /^#([\w-]*)$/, //DOM標(biāo)簽正則tagSelectorRE = /^[\w-]+$/,

2、zepto工具函數(shù)總結(jié)（我的意思只是我感覺比較有用的哈）：

　

//判斷一個(gè)元素是否匹配給定的選擇器 //這里作者的實(shí)現(xiàn)我覺得有點(diǎn)小問題，其思想是在其父元素中按照selecor找出匹配的元素再indexOf判斷是否存在，但是，如果selector是這樣的呢“body div .a”,在其父元素中能匹配到body嗎？我覺得還不如直接在document下匹配，歡迎拍磚。可能是我笨吧，或者zepto的qsa函數(shù)比較高級(jí)。zepto.matches = function(element, selector) {if (!element || element.nodeType !== 1) return false//引用瀏覽器提供的MatchesSelector方法var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelectorif (matchesSelector) return matchesSelector.call(element, selector);//如果瀏覽器不支持MatchesSelector方法，則將節(jié)點(diǎn)放入一個(gè)臨時(shí)div節(jié)點(diǎn)，//再通過selector來查找這個(gè)div下的節(jié)點(diǎn)集，再判斷給定的element是否在節(jié)點(diǎn)集中，如果在，則返回一個(gè)非零(即非false)的數(shù)字// fall back to performing a selector:var match, parent = element.parentNode,temp = !parent//當(dāng)element沒有父節(jié)點(diǎn)，那么將其插入到一個(gè)臨時(shí)的div里面if (temp)(parent = tempParent).appendChild(element)//將parent作為上下文，來查找selector的匹配結(jié)果，并獲取element在結(jié)果集的索引，不存在時(shí)為－1,再通過~-1轉(zhuǎn)成0，存在時(shí)返回一個(gè)非零的值match = ~zepto.qsa(parent, selector).indexOf(element)//將插入的節(jié)點(diǎn)刪掉temp && tempParent.removeChild(element)return match}

　　接下來就有個(gè)大問題了，是zepto的類型判斷部分，求解答：

//問題在這里，下面的type函數(shù)中，很明顯有問題啊，class2type[toString.call(obj)]我感覺不對(duì)啊，我感覺應(yīng)該是toString.call(obj).slice(8,-1);待我去知乎上問下，再分享給大家。
//好吧，我承認(rèn)自己太急躁了原來還有下面這么一段，

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

var class2type={},toString=class2type.toString; function type(obj) {//obj為null或者undefined時(shí)，直接返回'null'或'undefined'return obj == null ? String(obj) : class2type[toString.call(obj)] || "object"}function isFunction(value) {return type(value) == "function"}function isWindow(obj) {return obj != null && obj == obj.window}function isDocument(obj) {return obj != null && obj.nodeType == obj.DOCUMENT_NODE}function isObject(obj) {return type(obj) == "object"}//對(duì)于通過字面量定義的對(duì)象和new Object的對(duì)象返回true，new Object時(shí)傳參數(shù)的返回false//可參考http://snandy.iteye.com/blog/663245function isPlainObject(obj) {return isObject(obj) && !isWindow(obj) && obj.__proto__ == Object.prototype}function isArray(value) {return value instanceof Array}//類數(shù)組，比如nodeList，這個(gè)只是做最簡(jiǎn)單的判斷，如果給一個(gè)對(duì)象定義一個(gè)值為數(shù)據(jù)的length屬性，它同樣會(huì)返回truefunction likeArray(obj) {return typeof obj.length == 'number'}

　3、數(shù)組操作

//清除給定的參數(shù)中的null或undefined，注意0==null,'' == null為false //這個(gè)很贊，用filterfunction compact(array) {return filter.call(array, function(item) {return item != null})}//類似得到一個(gè)數(shù)組的副本，拷貝數(shù)組a就return a.concat([]);很贊function flatten(array) {return array.length > 0 ? $.fn.concat.apply([], array) : array}

//數(shù)組去重，如果該條數(shù)據(jù)在數(shù)組中的位置與循環(huán)的索引值不相同，則說明數(shù)組中有與其相同的值

//數(shù)組去重的方法有很多，但作者的這個(gè)方法真心贊，讓我折服了，即短又高效！
uniq = function(array) {
return filter.call(array, function(item, idx) {
return array.indexOf(item) == idx
})
}

　4、字符串操作

//將字符串轉(zhuǎn)成駝峰式的格式camelize = function(str) {return str.replace(/-+(.)?/g, function(match, chr) {return chr ? chr.toUpperCase() : ''})}//將字符串格式化成-拼接的形式,一般用在樣式屬性上，比如border-width//這個(gè)寫的太贊了，真的是每一句都很贊，由衷的佩服。function dasherize(str) {return str.replace(/::/g, '/') //將：：替換成/.replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2') //在大小寫字符之間插入_,大寫在前，比如AAAbb,得到AA_Abb.replace(/([a-z\d])([A-Z])/g, '$1_$2') //在大小寫字符之間插入_,小寫或數(shù)字在前，比如bbbAaa,得到bbb_Aaa.replace(/_/g, '-') //將_替換成-.toLowerCase() //轉(zhuǎn)成小寫}

　　

轉(zhuǎn)載于:https://www.cnblogs.com/dunken/p/4396623.html

總結(jié)

以上是生活随笔為你收集整理的zepto学习之路--源代码提取的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。