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

BicycleWarrior 发布于2019-08-20 18:57 / 1652人阅读

摘要：源码分析一核心代码分析源码分析二奇淫技巧总结本文只分析核心的部分代码，并且在这部分代码有删减，但是不影响代码的正常运行。当长度为则不添加内容，否则逐个将逐个到当前实例新增直接返回一个新的构造函数添加初始化方法。

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，欢迎一起交流。

专线服务私有云数据分析的核心是数据源码分析 nginx源码分析 webrtc源码分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84926.html

Zepto 源码分析 4 - 核心模块入口

摘要：对象构造函数读入的两个参数与在中也有明确的规范，用以保证构造函数的简单性。承接第三篇末尾内容，本篇结合官方 API 进入对 Zepto 核心的分析，开始难度会比较大，需要重点理解几个核心对象的关系，方能找到线索。 $() 与 Z 对象创建 Zepto Core API 的首个方法 $() 按照其官方解释： Create a Zepto collection object by pe...

xzavier 2019-08-26 13:24 评论0 收藏0
Zepto 源码分析 1 - 进入 Zepto

摘要：选择的理由是一个用于现代浏览器的与大体兼容的库。环境搭建分析环境的搭建仅需要一个常规页面和原始代码一个常规页面打开的首页即可，在开发人员工具中即可使用原始代码本篇分析的代码参照，进入该代码分支中即可。选择 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...

Aklman 2019-08-26 13:21 评论0 收藏0
读Zepto源码之代码结构

摘要：源码结构整体结构如果在编辑器中将的源码折叠起来，看到的就跟上面的代码一样。参考源码分析代码结构对象思想与源码分析设计和源码分析源码中关于的问题最后，所有文章都会同步发送到微信公众号上，欢迎关注欢迎提意见虽然最近工作中没有怎么用 zepto ，但是据说 zepto 的源码比较简单，而且网上的资料也比较多，所以我就挑了 zepto 下手，希望能为以后阅读其他框架的源码打下基础吧。源码版...

warkiz 2019-08-20 15:35 评论0 收藏0
zepto源码分析-代码结构

摘要：本来想学习一下的源码，但由于的源码有多行，设计相当复杂，所以决定从开始，分析一个成熟的框架的代码结构及执行步骤。同时发表在我的博客源码分析代码结构本来想学习一下jQuery的源码，但由于jQuery的源码有10000多行，设计相当复杂，所以决定从zepto开始，分析一个成熟的框架的代码结构及执行步骤。网上也有很多zepto的源码分析，有的给源码添加注释，有的谈与jQuery的不同，...

sherlock221 2019-08-20 12:20 评论0 收藏0
Zepto 源码分析 3 - qsa 实现与工具函数设计

摘要：承接第一篇末尾内容，本部分开始进入主模块，分析其设计思路与实现技巧下文代码均进行过重格式化，但代码版本同第一部分内容且入口函数不变的选择器先从第一个与原型链构造不直接相关的工具函数说起，观察的设计思路。承接第一篇末尾内容，本部分开始进入 zepto 主模块，分析其设计思路与实现技巧（下文代码均进行过重格式化，但代码 Commit 版本同第一部分内容且入口函数不变）： Zepto 的选...

ctriptech 2019-08-26 13:23 评论0 收藏0