国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Zepto源碼分析(一)核心代碼分析

BicycleWarrior / 1800人閱讀

摘要:源碼分析一核心代碼分析源碼分析二奇淫技巧總結本文只分析核心的部分代碼,并且在這部分代碼有刪減,但是不影響代碼的正常運行。當長度為則不添加內容,否則逐個將逐個到當前實例新增直接返回一個新的構造函數添加初始化方法。

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

相關文章

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

    摘要:對象構造函數讀入的兩個參數與在中也有明確的規范,用以保證構造函數的簡單性。 承接第三篇末尾內容,本篇結合官方 API 進入對 Zepto 核心的分析,開始難度會比較大,需要重點理解幾個核心對象的關系,方能找到線索。 $() 與 Z 對象創建 Zepto Core API 的首個方法 $() 按照其官方解釋: Create a Zepto collection object by pe...

    xzavier 評論0 收藏0
  • Zepto 源碼分析 1 - 進入 Zepto

    摘要:選擇的理由是一個用于現代瀏覽器的與大體兼容的庫。環境搭建分析環境的搭建僅需要一個常規頁面和原始代碼一個常規頁面打開的首頁即可,在開發人員工具中即可使用原始代碼本篇分析的代碼參照,進入該代碼分支中即可。 選擇 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...

    Aklman 評論0 收藏0
  • Zepto源碼代碼結構

    摘要:源碼結構整體結構如果在編輯器中將的源碼折疊起來,看到的就跟上面的代碼一樣。參考源碼分析代碼結構對象思想與源碼分析設計和源碼分析源碼中關于的問題最后,所有文章都會同步發送到微信公眾號上,歡迎關注歡迎提意見 雖然最近工作中沒有怎么用 zepto ,但是據說 zepto 的源碼比較簡單,而且網上的資料也比較多,所以我就挑了 zepto 下手,希望能為以后閱讀其他框架的源碼打下基礎吧。 源碼版...

    warkiz 評論0 收藏0
  • zepto源碼分析-代碼結構

    摘要:本來想學習一下的源碼,但由于的源碼有多行,設計相當復雜,所以決定從開始,分析一個成熟的框架的代碼結構及執行步驟。同時發表在我的博客源碼分析代碼結構 本來想學習一下jQuery的源碼,但由于jQuery的源碼有10000多行,設計相當復雜,所以決定從zepto開始,分析一個成熟的框架的代碼結構及執行步驟。 網上也有很多zepto的源碼分析,有的給源碼添加注釋,有的談與jQuery的不同,...

    sherlock221 評論0 收藏0
  • Zepto 源碼分析 3 - qsa 實現與工具函數設計

    摘要:承接第一篇末尾內容,本部分開始進入主模塊,分析其設計思路與實現技巧下文代碼均進行過重格式化,但代碼版本同第一部分內容且入口函數不變的選擇器先從第一個與原型鏈構造不直接相關的工具函數說起,觀察的設計思路。 承接第一篇末尾內容,本部分開始進入 zepto 主模塊,分析其設計思路與實現技巧(下文代碼均進行過重格式化,但代碼 Commit 版本同第一部分內容且入口函數不變): Zepto 的選...

    ctriptech 評論0 收藏0

發表評論

0條評論

BicycleWarrior

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<