當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【zepto学习笔记01】核心方法$()

發(fā)布時(shí)間：2025/6/15 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了【zepto学习笔记01】核心方法$() 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

我們移動(dòng)端基本使用zepto了，而我也從一個(gè)小白變成稍微靠譜一點(diǎn)的前端了，最近居然經(jīng)常要改到zepto源碼
但是，我對(duì)zepto不太熟悉，其實(shí)前端水準(zhǔn)還是不夠，所以便私下偷偷學(xué)習(xí)下吧，別被發(fā)現(xiàn)了

核心方法$()

我們使用這個(gè)方法一般有幾個(gè)用途（我這里只說我自己用到過的），這里根據(jù)使用度排個(gè)序：

① 選擇器/$(selector)

將返回一個(gè)包裝過的dom集合對(duì)象（有很多選擇器）

② html字符串/$(domStr)

仍然返回一個(gè)包裝過的dom對(duì)象，他會(huì)將字符串初始化為我們的dom結(jié)構(gòu)
PS：新增了一個(gè)方法可以直接賦予dom結(jié)構(gòu)屬性，我們這里不關(guān)注

③ 函數(shù)/$(function(){})

我基本沒這么用過，他實(shí)在文檔加載結(jié)束后執(zhí)行

暫時(shí)不管這些東西吧。我們這里來一個(gè)個(gè)看看他們的實(shí)現(xiàn)：

1 $('div') 2 //=> all DIV elements on the page 3 $('#foo') 4 //=> element with ID "foo" 5 6 // create element: 7 $("<p>Hello</p>") 8 //=> the new P element 9 // create element with attributes: 10 $("<p />", 11 { 12 text: "Hello", 13 id: "greeting", 14 css: { color: 'darkblue' } 15 }) 16 //=> <p id=greeting style="color:darkblue">Hello</p> 17 // execute callback when the page is ready: 18 Zepto(function ($) { 19 alert('Ready to Zepto!') 20 })

入口$()

只如初見

首先我們來看看選擇器，在zepto代碼中有這么一行代碼：

1 $ = function (selector, context) { 2 return zepto.init(selector, context) 3 }

這里其實(shí)前面就定義了$這個(gè)變量：

var undefined, key, $, classList, emptyArray = [],

這里初始化了$這個(gè)變量為一個(gè)函數(shù)，最后并將這個(gè)變量公開化（現(xiàn)在再匿名還是中，外面是訪問不到的），他具體是這樣干的

1 var Zepto = function () { 2 var zepto = {}, $; 3 zepto.init = function (selector, context) { 4 }; 5 $ = function (selector, context) { 6 return zepto.init(selector, context); 7 }; 8 $.zepto = zepto; 9 return $; 10 }; 11 window.$ = Zepto;

于是我們?cè)陧撁嬷惺褂眠@樣的代碼：

1 var el = $('#id'); 2 //實(shí)際上是 3 var el = zepto.init('#id');

具體里面的邏輯就是我們的重點(diǎn)，于是我們跟進(jìn)去慢慢看吧

一查到底

我們?cè)敿?xì)看看zepto.init這個(gè)方法

1 zepto.init = function (selector, context) { 2 if (!selector) return zepto.Z() 3 else if (isFunction(selector)) return $(document).ready(selector) 4 else if (zepto.isZ(selector)) return selector 5 else { 6 var dom 7 if (isArray(selector)) dom = compact(selector) 8 else if (isObject(selector)) 9 dom = [isPlainObject(selector) ? $.extend({}, selector) : selector], selector = null 10 else if (fragmentRE.test(selector)) 11 dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null 12 else if (context !== undefined) return $(context).find(selector) 13 else dom = zepto.qsa(document, selector) 14 return zepto.Z(dom, selector) 15 } 16 }

第一步，如果選擇器selector不存在的話，就調(diào)用默認(rèn)的方法，說白了就是返回一個(gè)集合長(zhǎng)度為0的包裝對(duì)象

1 //通過給dom設(shè)置__proto__屬性指向$.fn來達(dá)到繼承$.fn上所有方法的目的 2 //ie自然是不支持的，zepto也基本不理睬ie 3 zepto.Z = function (dom, selector) { 4 dom = dom || [] 5 dom.__proto__ = $.fn 6 dom.selector = selector || '' 7 return dom 8 }

第二步，處理傳入函數(shù)情況，如果傳入是函數(shù)的話就在文檔加載結(jié)束后執(zhí)行
第三步，處理傳入zepto對(duì)象，如果已經(jīng)是zepto包裝對(duì)象了就直接返回

1 zepto.isZ = function (object) { 2 return object instanceof zepto.Z 3 }

第四步，開始了復(fù)雜的邏輯計(jì)算了，我們這里單獨(dú)提出來

selector處理

① 數(shù)組項(xiàng)

如果對(duì)象是一個(gè)數(shù)組，則去掉其中無意義的數(shù)組項(xiàng)

1 //清除給定的參數(shù)中的null或undefined，注意0==null,'' == null為false 2 function compact(array) { 3 return filter.call(array, function (item) { 4 return item != null 5 }) 6 }

filter

其中filter是javascript數(shù)組的一個(gè)新的方法，用以篩選滿足條件的數(shù)組項(xiàng)

1 var arr = [5, "element", 10, "the", true]; 2 var result = arr.filter( 3 function (value) { 4 return (typeof value === 'string'); 5 } 6 ); 7 document.write(result);//Output: element, the

最后返回?cái)?shù)組項(xiàng)，我們這里認(rèn)為其中每個(gè)數(shù)組項(xiàng)都是一個(gè)dom結(jié)構(gòu)

② 傳入對(duì)象

因?yàn)閠ypeof dom也是object，所以zepto這里做了一點(diǎn)擴(kuò)展

1 function isObject(obj) { 2 return type(obj) == "object" 3 }

這個(gè)代碼存在的意義，老夫也不知道了......if里面的代碼比較關(guān)鍵：
如果傳入的是對(duì)象（比如{}），就將selector拷貝到一個(gè)對(duì)象，如果是dom結(jié)構(gòu)就直接放入數(shù)組
這里有兩個(gè)方法需要注意，一個(gè)是extend，一個(gè)是isPlainObject

extend

extend用于為對(duì)象擴(kuò)展對(duì)象

1 function extend(target, source, deep) { 2 for (key in source) 3 //如果深度擴(kuò)展 4 if (deep && (isPlainObject(source[key]) || isArray(source[key]))) { 5 //如果要擴(kuò)展的數(shù)據(jù)是對(duì)象且target相對(duì)應(yīng)的key不是對(duì)象 6 if (isPlainObject(source[key]) && !isPlainObject(target[key])) target[key] = {} 7 //如果要擴(kuò)展的數(shù)據(jù)是數(shù)組且target相對(duì)應(yīng)的key不是數(shù)組 8 if (isArray(source[key]) && !isArray(target[key])) target[key] = [] 9 extend(target[key], source[key], deep) 10 } else if (source[key] !== undefined) target[key] = source[key] 11 }

$.extend事實(shí)上也是調(diào)用的上面的方法，我們這里先不管他

1 $.extend = function (target) { 2 var deep, args = slice.call(arguments, 1) 3 if (typeof target == 'boolean') { //當(dāng)?shù)谝粋€(gè)參數(shù)為boolean類型的值時(shí)，表示是否深度擴(kuò)展 4 deep = target 5 target = args.shift() //target取第二個(gè)參數(shù) 6 } 7 //遍歷后面的參數(shù)，全部擴(kuò)展到target上 8 args.forEach(function (arg) { 9 extend(target, arg, deep) 10 }) 11 return target 12 }

isPlainObject

這個(gè)方法有所不同，通過字面量定義的對(duì)象和new Object的對(duì)象返回true，new Object時(shí)傳參數(shù)的返回false（測(cè)試對(duì)象是否純粹的對(duì)象）

1 function isPlainObject(obj) { 2 return isObject(obj) && !isWindow(obj) && obj.__proto__ == Object.prototype 3 } 4 $.isPlainObject({})// => true 5 $.isPlainObject(new Object) // => true 6 $.isPlainObject(new Date) // => false 7 $.isPlainObject(window) // => false

至于這個(gè)數(shù)組到底是不是dom，代碼這里先不關(guān)注，完了這里也結(jié)束了

③ 傳入html字符串

如果傳入的是html字符串，我們這里就要負(fù)責(zé)創(chuàng)建dom的工作了，整個(gè)這個(gè)東西其實(shí)比較復(fù)雜：

1 //HTML代碼片斷的正則 2 fragmentRE = /^\s*<(\w+|!)[^>]*>/,

PS：我正則不行，暫時(shí)就不嘗試去解釋這個(gè)了

字符串=>dom

1 zepto.fragment = function (html, name, properties) { 2 //將類似<div class="test"/>替換成<div class="test"></div>,算是一種修復(fù)吧 3 if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>") 4 //給name取標(biāo)簽名 5 if (name === undefined) name = fragmentRE.test(html) && RegExp.$1 6 //設(shè)置容器標(biāo)簽名，如果不是tr,tbody,thead,tfoot,td,th，則容器標(biāo)簽名為div 7 if (!(name in containers)) name = '*' 8 var nodes, dom, container = containers[name] //創(chuàng)建容器 9 container.innerHTML = '' + html //將html代碼片斷放入容器 10 //取容器的子節(jié)點(diǎn)，這樣就直接把字符串轉(zhuǎn)成DOM節(jié)點(diǎn)了 11 dom = $.each(slice.call(container.childNodes), function () { 12 container.removeChild(this) //逐個(gè)刪除 13 }) 14 //如果properties是對(duì)象, 則將其當(dāng)作屬性來給添加進(jìn)來的節(jié)點(diǎn)進(jìn)行設(shè)置 15 if (isPlainObject(properties)) { 16 nodes = $(dom) //將dom轉(zhuǎn)成zepto對(duì)象，為了方便下面調(diào)用zepto上的方法 17 //遍歷對(duì)象，設(shè)置屬性 18 $.each(properties, function (key, value) { 19 //如果設(shè)置的是'val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'，則調(diào)用zepto上相對(duì)應(yīng)的方法 20 if (methodAttributes.indexOf(key) > -1) nodes[key](value) 21 else nodes.attr(key, value) 22 }) 23 } 24 //返回將字符串轉(zhuǎn)成的DOM節(jié)點(diǎn)后的數(shù)組，比如'<li></li><li></li><li></li>'轉(zhuǎn)成[li,li,li] 25 return dom 26 }

這個(gè)方法比較高深，各位慢慢消化，我稍后也再去消化下
以上完了后，就返回了創(chuàng)建后的dom結(jié)構(gòu)了......

④ 上下文

如果帶有上下文，就得使用上下文查找，沒有就在document中查詢

1 zepto.qsa = function (element, selector) { 2 var found 3 return (isDocument(element) && idSelectorRE.test(selector)) ? 4 ((found = element.getElementById(RegExp.$1)) ? [found] : []) : 5 (element.nodeType !== 1 && element.nodeType !== 9) ? [] : 6 slice.call( 7 classSelectorRE.test(selector) ? element.getElementsByClassName(RegExp.$1) : 8 tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) : 9 element.querySelectorAll(selector) 10 ) 11 }

這個(gè)函數(shù)與上面函數(shù)一樣重要，各位下去消化吧

⑤ 結(jié)束

最后的最后便返回我們的包裝集合了，這里依舊使用zepto.Z(dom, selector)進(jìn)行封裝

深入zepto.fragment

待續(xù)......

深入zepto.qsa