Zepto源碼分析（一）核心代碼分析

BicycleWarrior 發(fā)布于2019-08-20 18:57 / 1818人閱讀

摘要：源碼分析一核心代碼分析源碼分析二奇淫技巧總結(jié)本文只分析核心的部分代碼，并且在這部分代碼有刪減，但是不影響代碼的正常運(yùn)行。當(dāng)長(zhǎng)度為則不添加內(nèi)容，否則逐個(gè)將逐個(gè)到當(dāng)前實(shí)例新增直接返回一個(gè)新的構(gòu)造函數(shù)添加初始化方法。

Zepto源碼分析（一）核心代碼分析
Zepto源碼分析（二）奇淫技巧總結(jié)

本文只分析核心的部分代碼，并且在這部分代碼有刪減，但是不影響代碼的正常運(yùn)行。

* 用閉包封裝Zepto
* 開(kāi)始處理細(xì)節(jié)
* 正式處理數(shù)據(jù)（獲取選擇器選擇的DOM）
* 正式處理數(shù)據(jù)（添加DOM到當(dāng)前實(shí)例）
* 在實(shí)例的原型鏈上添加方法
* 支持插件擴(kuò)展
* 驗(yàn)收

用閉包封裝Zepto

// 對(duì)全局暴露Zepto變量
var Zepto = (function() {

  // 定義$變量，并將具體細(xì)節(jié)交給zepto.init處理
  $ = function(selector, context){
    return zepto.init(selector, context)
  }

  // 返回變量
  return $
})()

// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當(dāng)$變量沒(méi)有被占用的時(shí)候，為Zepto設(shè)置別名為$
window.$ === undefined && (window.$ = Zepto)

開(kāi)始處理細(xì)節(jié)

// 對(duì)全局暴露Zepto變量
var Zepto = (function() {

  // [新增] 初始化zepto變量為對(duì)象
  var zepto = {}

  // [新增] 添加初始化方法。當(dāng)selector參數(shù)為空時(shí)，則交給zepto.Z()處理
  //        當(dāng)selector為字符串時(shí)則把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)
  }

  // 定義$變量，并將具體細(xì)節(jié)交給zepto.init處理
  $ = function(selector, context){
    return zepto.init(selector, context)
  }

  // 返回變量
  return $
})()

// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當(dāng)$變量沒(méi)有被占用的時(shí)候，為Zepto設(shè)置別名為$
window.$ === undefined && (window.$ = Zepto)

正式處理數(shù)據(jù)（獲取選擇器選擇的DOM）

// 對(duì)全局暴露Zepto變量
var Zepto = (function() {

  // 初始化zepto變量為對(duì)象
  var zepto = {}

  //  添加初始化方法。當(dāng)selector參數(shù)為空時(shí)，則交給zepto.Z()處理
  //  當(dāng)selector為字符串時(shí)則把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)
  }

  // 定義$變量，并將具體細(xì)節(jié)交給zepto.init處理
  $ = function(selector, context){
    return zepto.init(selector, context)
  }

  // [新增] 使用querySelectorAll(selector)查詢(xún)DOM
  zepto.qsa = function(element, selector){
    return selector ? element.querySelectorAll(selector) : []
  }

  // 返回變量
  return $
})()

// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當(dāng)$變量沒(méi)有被占用的時(shí)候，為Zepto設(shè)置別名為$
window.$ === undefined && (window.$ = Zepto)

正式處理數(shù)據(jù)（添加DOM到當(dāng)前實(shí)例）

// 對(duì)全局暴露Zepto變量
var Zepto = (function() {

  // 初始化zepto變量為對(duì)象
  var zepto = {}

  // [新增] 開(kāi)始正式處理數(shù)據(jù)。當(dāng)dom長(zhǎng)度為0則不添加內(nèi)容，
  //        否則逐個(gè)將dom逐個(gè)到當(dāng)前實(shí)例
  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 || ""
  }

  // [新增] 直接返回一個(gè)新的構(gòu)造函數(shù)
  zepto.Z = function(dom, selector) {
    return new Z(dom, selector)
  }

  //  添加初始化方法。當(dāng)selector參數(shù)為空時(shí)，則交給zepto.Z()處理
  //  當(dāng)selector為字符串時(shí)則把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)
  }

  // 定義$變量，并將具體細(xì)節(jié)交給zepto.init處理
  $ = function(selector, context){
    return zepto.init(selector, context)
  }

  // 使用querySelectorAll(selector)查詢(xún)DOM
  zepto.qsa = function(element, selector){
    return selector ? element.querySelectorAll(selector) : []
  }

  // 返回變量
  return $
})()

// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當(dāng)$變量沒(méi)有被占用的時(shí)候，為Zepto設(shè)置別名為$
window.$ === undefined && (window.$ = Zepto)

在實(shí)例的原型鏈上添加方法

// 對(duì)全局暴露Zepto變量
var Zepto = (function() {

  // 初始化zepto變量為對(duì)象
  var zepto = {}, emptyArray = []

  // 開(kāi)始正式處理數(shù)據(jù)。當(dāng)dom長(zhǎng)度為0則不添加內(nèi)容，
  // 否則逐個(gè)將dom逐個(gè)到當(dāng)前實(shí)例
  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 || ""
  }

  // 直接返回一個(gè)新的構(gòu)造函數(shù)
  zepto.Z = function(dom, selector) {
    return new Z(dom, selector)
  }

  //  添加初始化方法。當(dāng)selector參數(shù)為空時(shí)，則交給zepto.Z()處理
  //  當(dāng)selector為字符串時(shí)則把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)
  }

  // 定義$變量，并將具體細(xì)節(jié)交給zepto.init處理
  $ = function(selector, context){
    return zepto.init(selector, context)
  }

  // 使用querySelectorAll(selector)查詢(xún)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
  }

  // [新增] 定義用于擴(kuò)展在原型鏈上的方法
  $.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("測(cè)試鏈?zhǔn)秸{(diào)用")
        return this 
      })
    }
  }

  // [新增] 原型鏈指向$.fn
  zepto.Z.prototype = Z.prototype = $.fn
  // $.zepto指向zepto
  $.zepto = zepto

  // 返回變量
  return $
})()

// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當(dāng)$變量沒(méi)有被占用的時(shí)候，為Zepto設(shè)置別名為$
window.$ === undefined && (window.$ = Zepto)

支持插件擴(kuò)展

// 對(duì)全局暴露Zepto變量
var Zepto = (function() {

  // 初始化zepto變量為對(duì)象
  var zepto = {}, emptyArray = []

  // 開(kāi)始正式處理數(shù)據(jù)。當(dāng)dom長(zhǎng)度為0則不添加內(nèi)容，
  // 否則逐個(gè)將dom逐個(gè)到當(dāng)前實(shí)例
  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 || ""
  }

  // 直接返回一個(gè)新的構(gòu)造函數(shù)
  zepto.Z = function(dom, selector) {
    return new Z(dom, selector)
  }

  //  添加初始化方法。當(dāng)selector參數(shù)為空時(shí)，則交給zepto.Z()處理
  //  當(dāng)selector為字符串時(shí)則把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)
  }

  // 定義$變量，并將具體細(xì)節(jié)交給zepto.init處理
  $ = function(selector, context){
    return zepto.init(selector, context)
  }

  // [新增] 插件擴(kuò)展函數(shù)
  function extend(target, source, deep) {
    for (key in source)
      if (source[key] !== undefined) target[key] = source[key]
  }

  // [新增] 插件擴(kuò)展函數(shù)
  $.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)查詢(xún)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
  }

  // 定義用于擴(kuò)展在原型鏈上的方法
  $.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("測(cè)試鏈?zhǔn)秸{(diào)用")
        return this 
      })
    }
  }

  // 原型鏈指向$.fn
  zepto.Z.prototype = Z.prototype = $.fn
  // $.zepto指向zepto
  $.zepto = zepto

  // 返回變量
  return $
})()

// 把Zepto變量掛載在window
window.Zepto = Zepto
// 當(dāng)$變量沒(méi)有被占用的時(shí)候，為Zepto設(shè)置別名為$
window.$ === undefined && (window.$ = Zepto)

驗(yàn)收

// 鏈?zhǔn)秸{(diào)用測(cè)試
$("head").test().test()  // 測(cè)試鏈?zhǔn)秸{(diào)用
測(cè)試鏈?zhǔn)秸{(diào)用
{0: head, length: 1, selector: "head"}
$("head").html()  // 
歡迎關(guān)注前端進(jìn)階指南微信公眾號(hào)：

另外我也創(chuàng)了一個(gè)對(duì)應(yīng)的QQ群：660112451，歡迎一起交流。

GPU云服務(wù)器云服務(wù)器數(shù)據(jù)分析的核心是數(shù)據(jù) 源碼分析 nginx源碼分析 webrtc源碼分析

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84926.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

BicycleWarrior

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

數(shù)據(jù)在內(nèi)存中的存儲(chǔ)

閱讀 1902·2021-09-28 09:36
七大數(shù)字經(jīng)濟(jì)重點(diǎn)產(chǎn)業(yè)！

閱讀 2456·2021-09-08 09:35
不可變數(shù)組的范圍求和

閱讀 3091·2019-08-30 15:53
almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

閱讀 1581·2019-08-30 14:08
你從來(lái)沒(méi)了解過(guò)的CSS浮動(dòng) | Design Shack

閱讀 694·2019-08-29 18:40
邊距重疊與BFC

閱讀 2870·2019-08-29 13:57
css揭秘系列

閱讀 2730·2019-08-29 13:55
為什么 React16 對(duì)開(kāi)發(fā)人員來(lái)說(shuō)是一種福音

閱讀 721·2019-08-26 13:45

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Zepto源碼分析（一）核心代碼分析

相關(guān)文章

Zepto 源碼分析 4 - 核心模塊入口

***Zepto* 源碼分析 1 - 進(jìn)入 *Zepto***

**讀Zepto源碼之代碼結(jié)構(gòu)**

zepto源碼分析-代碼結(jié)構(gòu)

Zepto 源碼分析 3 - qsa 實(shí)現(xiàn)與工具函數(shù)設(shè)計(jì)

發(fā)表評(píng)論

0條評(píng)論

BicycleWarrior

男|高級(jí)講師

TA的文章

數(shù)據(jù)在內(nèi)存中的存儲(chǔ)

七大數(shù)字經(jīng)濟(jì)重點(diǎn)產(chǎn)業(yè)！

不可變數(shù)組的范圍求和

almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

你從來(lái)沒(méi)了解過(guò)的CSS浮動(dòng) | Design Shack

邊距重疊與BFC

css揭秘系列

為什么 React16 對(duì)開(kāi)發(fā)人員來(lái)說(shuō)是一種福音

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Zepto源碼分析（一）核心代碼分析

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！