摘要:源碼分析一核心代碼分析源碼分析二奇淫技巧總結本文只分析核心的部分代碼,并且在這部分代碼有刪減,但是不影響代碼的正常運行。當長度為則不添加內容,否則逐個將逐個到當前實例新增直接返回一個新的構造函數添加初始化方法。
Zepto源碼分析(一)核心代碼分析
Zepto源碼分析(二)奇淫技巧總結
本文只分析核心的部分代碼,并且在這部分代碼有刪減,但是不影響代碼的正常運行。
目錄
* 用閉包封裝Zepto
* 開始處理細節
* 正式處理數據(獲取選擇器選擇的DOM)
* 正式處理數據(添加DOM到當前實例)
* 在實例的原型鏈上添加方法
* 支持插件擴展
* 驗收
用閉包封裝Zepto
// 對全局暴露Zepto變量
var Zepto = (function() {
// 定義$變量,并將具體細節交給zepto.init處理
$ = function(selector, context){
return zepto.init(selector, context)
}
// 返回變量
return $
})()
// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當$變量沒有被占用的時候,為Zepto設置別名為$
window.$ === undefined && (window.$ = Zepto)
開始處理細節
// 對全局暴露Zepto變量
var Zepto = (function() {
// [新增] 初始化zepto變量為對象
var zepto = {}
// [新增] 添加初始化方法。當selector參數為空時,則交給zepto.Z()處理
// 當selector為字符串時則把zepto.qsa(document, selector)的值存到dom變量
// 并且交給zepto.Z(dom, selector)處理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == "string") {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
}
// 定義$變量,并將具體細節交給zepto.init處理
$ = function(selector, context){
return zepto.init(selector, context)
}
// 返回變量
return $
})()
// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當$變量沒有被占用的時候,為Zepto設置別名為$
window.$ === undefined && (window.$ = Zepto)
正式處理數據(獲取選擇器選擇的DOM)
// 對全局暴露Zepto變量
var Zepto = (function() {
// 初始化zepto變量為對象
var zepto = {}
// 添加初始化方法。當selector參數為空時,則交給zepto.Z()處理
// 當selector為字符串時則把zepto.qsa(document, selector)的值存到dom變量
// 并且交給zepto.Z(dom, selector)處理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == "string") {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
}
// 定義$變量,并將具體細節交給zepto.init處理
$ = function(selector, context){
return zepto.init(selector, context)
}
// [新增] 使用querySelectorAll(selector)查詢DOM
zepto.qsa = function(element, selector){
return selector ? element.querySelectorAll(selector) : []
}
// 返回變量
return $
})()
// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當$變量沒有被占用的時候,為Zepto設置別名為$
window.$ === undefined && (window.$ = Zepto)
正式處理數據(添加DOM到當前實例)
// 對全局暴露Zepto變量
var Zepto = (function() {
// 初始化zepto變量為對象
var zepto = {}
// [新增] 開始正式處理數據。當dom長度為0則不添加內容,
// 否則逐個將dom逐個到當前實例
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ""
}
// [新增] 直接返回一個新的構造函數
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
// 添加初始化方法。當selector參數為空時,則交給zepto.Z()處理
// 當selector為字符串時則把zepto.qsa(document, selector)的值存到dom變量
// 并且交給zepto.Z(dom, selector)處理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == "string") {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
}
// 定義$變量,并將具體細節交給zepto.init處理
$ = function(selector, context){
return zepto.init(selector, context)
}
// 使用querySelectorAll(selector)查詢DOM
zepto.qsa = function(element, selector){
return selector ? element.querySelectorAll(selector) : []
}
// 返回變量
return $
})()
// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當$變量沒有被占用的時候,為Zepto設置別名為$
window.$ === undefined && (window.$ = Zepto)
在實例的原型鏈上添加方法
// 對全局暴露Zepto變量
var Zepto = (function() {
// 初始化zepto變量為對象
var zepto = {}, emptyArray = []
// 開始正式處理數據。當dom長度為0則不添加內容,
// 否則逐個將dom逐個到當前實例
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ""
}
// 直接返回一個新的構造函數
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
// 添加初始化方法。當selector參數為空時,則交給zepto.Z()處理
// 當selector為字符串時則把zepto.qsa(document, selector)的值存到dom變量
// 并且交給zepto.Z(dom, selector)處理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == "string") {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
}
// 定義$變量,并將具體細節交給zepto.init處理
$ = function(selector, context){
return zepto.init(selector, context)
}
// 使用querySelectorAll(selector)查詢DOM
zepto.qsa = function(element, selector){
return selector ? element.querySelectorAll(selector) : []
}
// [新增] 定義each方法
$.each = function(elements, callback){
var i, key
if (likeArray(elements)) {
for (i = 0; i < elements.length; i++)
if (callback.call(elements[i], i, elements[i]) === false) return elements
} else {
for (key in elements)
if (callback.call(elements[key], key, elements[key]) === false) return elements
}
return elements
}
// [新增] 定義用于擴展在原型鏈上的方法
$.fn = {
constructor: zepto.Z,
length: 0,
each: function(callback){
emptyArray.every.call(this, function(el, idx){
return callback.call(el, idx, el) !== false
})
return this
},
empty: function(){
return this.each(function(){ this.innerHTML = "" })
},
html: function(html){
return 0 in arguments ?
this.each(function(idx){
var originHtml = this.innerHTML
$(this).empty().append( funcArg(this, html, idx, originHtml) )
}) :
(0 in this ? this[0].innerHTML : null)
},
test : function(){
return this.each(function(){
console.log("測試鏈式調用")
return this
})
}
}
// [新增] 原型鏈指向$.fn
zepto.Z.prototype = Z.prototype = $.fn
// $.zepto指向zepto
$.zepto = zepto
// 返回變量
return $
})()
// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當$變量沒有被占用的時候,為Zepto設置別名為$
window.$ === undefined && (window.$ = Zepto)
支持插件擴展
// 對全局暴露Zepto變量
var Zepto = (function() {
// 初始化zepto變量為對象
var zepto = {}, emptyArray = []
// 開始正式處理數據。當dom長度為0則不添加內容,
// 否則逐個將dom逐個到當前實例
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for (i = 0; i < len; i++) this[i] = dom[i]
this.length = len
this.selector = selector || ""
}
// 直接返回一個新的構造函數
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
// 添加初始化方法。當selector參數為空時,則交給zepto.Z()處理
// 當selector為字符串時則把zepto.qsa(document, selector)的值存到dom變量
// 并且交給zepto.Z(dom, selector)處理
zepto.init = function(selector, context) {
var dom
if (!selector) return zepto.Z()
else if (typeof selector == "string") {
dom = zepto.qsa(document, selector)
}
return zepto.Z(dom, selector)
}
// 定義$變量,并將具體細節交給zepto.init處理
$ = function(selector, context){
return zepto.init(selector, context)
}
// [新增] 插件擴展函數
function extend(target, source, deep) {
for (key in source)
if (source[key] !== undefined) target[key] = source[key]
}
// [新增] 插件擴展函數
$.extend = function(target){
var deep, args = emptyArray.slice.call(arguments, 1)
if (typeof target == "boolean") {
deep = target
target = args.shift()
}
args.forEach(function(arg){ extend(target, arg, deep) })
return target
}
// 使用querySelectorAll(selector)查詢DOM
zepto.qsa = function(element, selector){
return selector ? element.querySelectorAll(selector) : []
}
// 定義each方法
$.each = function(elements, callback){
var i, key
if (likeArray(elements)) {
for (i = 0; i < elements.length; i++)
if (callback.call(elements[i], i, elements[i]) === false) return elements
} else {
for (key in elements)
if (callback.call(elements[key], key, elements[key]) === false) return elements
}
return elements
}
// 定義用于擴展在原型鏈上的方法
$.fn = {
constructor: zepto.Z,
length: 0,
each: function(callback){
emptyArray.every.call(this, function(el, idx){
return callback.call(el, idx, el) !== false
})
return this
},
empty: function(){
return this.each(function(){ this.innerHTML = "" })
},
html: function(html){
return 0 in arguments ?
this.each(function(idx){
var originHtml = this.innerHTML
$(this).empty().append( funcArg(this, html, idx, originHtml) )
}) :
(0 in this ? this[0].innerHTML : null)
},
test : function(){
return this.each(function(){
console.log("測試鏈式調用")
return this
})
}
}
// 原型鏈指向$.fn
zepto.Z.prototype = Z.prototype = $.fn
// $.zepto指向zepto
$.zepto = zepto
// 返回變量
return $
})()
// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當$變量沒有被占用的時候,為Zepto設置別名為$
window.$ === undefined && (window.$ = Zepto)
驗收
// 鏈式調用測試
$("head").test().test() // 測試鏈式調用
測試鏈式調用
{0: head, length: 1, selector: "head"}
$("head").html() //
歡迎關注前端進階指南微信公眾號:
另外我也創了一個對應的QQ群:660112451,歡迎一起交流。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/84926.html
摘要:對象構造函數讀入的兩個參數與在中也有明確的規范,用以保證構造函數的簡單性。 承接第三篇末尾內容,本篇結合官方 API 進入對 Zepto 核心的分析,開始難度會比較大,需要重點理解幾個核心對象的關系,方能找到線索。 $() 與 Z 對象創建 Zepto Core API 的首個方法 $() 按照其官方解釋: Create a Zepto collection object by pe...
摘要:選擇的理由是一個用于現代瀏覽器的與大體兼容的庫。環境搭建分析環境的搭建僅需要一個常規頁面和原始代碼一個常規頁面打開的首頁即可,在開發人員工具中即可使用原始代碼本篇分析的代碼參照,進入該代碼分支中即可。 選擇 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...
摘要:源碼結構整體結構如果在編輯器中將的源碼折疊起來,看到的就跟上面的代碼一樣。參考源碼分析代碼結構對象思想與源碼分析設計和源碼分析源碼中關于的問題最后,所有文章都會同步發送到微信公眾號上,歡迎關注歡迎提意見 雖然最近工作中沒有怎么用 zepto ,但是據說 zepto 的源碼比較簡單,而且網上的資料也比較多,所以我就挑了 zepto 下手,希望能為以后閱讀其他框架的源碼打下基礎吧。 源碼版...
摘要:本來想學習一下的源碼,但由于的源碼有多行,設計相當復雜,所以決定從開始,分析一個成熟的框架的代碼結構及執行步驟。同時發表在我的博客源碼分析代碼結構 本來想學習一下jQuery的源碼,但由于jQuery的源碼有10000多行,設計相當復雜,所以決定從zepto開始,分析一個成熟的框架的代碼結構及執行步驟。 網上也有很多zepto的源碼分析,有的給源碼添加注釋,有的談與jQuery的不同,...
摘要:承接第一篇末尾內容,本部分開始進入主模塊,分析其設計思路與實現技巧下文代碼均進行過重格式化,但代碼版本同第一部分內容且入口函數不變的選擇器先從第一個與原型鏈構造不直接相關的工具函數說起,觀察的設計思路。 承接第一篇末尾內容,本部分開始進入 zepto 主模塊,分析其設計思路與實現技巧(下文代碼均進行過重格式化,但代碼 Commit 版本同第一部分內容且入口函數不變): Zepto 的選...
閱讀 1887·2021-09-28 09:36
閱讀 2441·2021-09-08 09:35
閱讀 3077·2019-08-30 15:53
閱讀 1563·2019-08-30 14:08
閱讀 677·2019-08-29 18:40
閱讀 2855·2019-08-29 13:57
閱讀 2715·2019-08-29 13:55
閱讀 693·2019-08-26 13:45
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要