zepto 源码分析1

GeekQiaQia 发布于2019-08-22 11:13 / 2365人阅读

摘要：核心类似选择器，选择元素组成对象集合将字符串转化成对象集合根据给定标签和属性生成对象集合给定函数，在页面加载完成后触发函数参数没内容，则返回空集合如果是标签，则生成元素先行检查是否为开头，提高正则检测效率如果有，则生成的对象集合，再检索以规

核心 $() / zepto.init()

类似 CSS 选择器，选择元素组成 zepto 对象集合

将 HTML 字符串转化成 zepto 对象集合

根据给定标签和属性生成 zepto 对象集合

给定函数，在页面加载完成后触发函数

zepto.init = function(selector, context) {
  var dom
  // 参数没内容，则返回空集合
  if (!selector) return zepto.Z()
  else if (typeof selector == "string") {
    selector = selector.trim()
    // 如果是 html 标签，则生成 dom 元素
    // 先行检查是否为 < 开头，提高正则检测效率
    if (selector[0] == "<" && fragmentRE.test(selector))
      dom = zepto.fragment(selector, RegExp.$1, context), selector = null
    // 如果有 context，则生成 context 的对象集合，再检索
    else if (context !== undefined) return $(context).find(selector)
    // 以 css 规则检索元素
    else dom = zepto.qsa(document, selector)
  }
  // 如果传参是函数，则在页面加载完成时触发执行 
  else if (isFunction(selector)) return $(document).ready(selector)
  // 如果给定的是 zepto 集合，直接返回
  else if (zepto.isZ(selector)) return selector
  else {
    // 是数组，则过滤 null 元素
    if (isArray(selector)) dom = compact(selector)
    // 是对象，则包在数组中
    else if (isObject(selector))
      dom = [selector], selector = null
    // If it"s a html fragment, create nodes from it
    // 什么情况下逻辑会走到下面？此时 html fragment 是什么？？
    else if (fragmentRE.test(selector)) 
      dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
    // If there"s a context, create a collection on that context first, and select
    // nodes from there
    else if (context !== undefined) return $(context).find(selector)
    // And last but no least, if it"s a CSS selector, use it to select nodes.
    else dom = zepto.qsa(document, selector)
  }
  // create a new Zepto collection from the nodes found
  return zepto.Z(dom, selector)
}

zepto.fragment

由给定的 html 字符串生成 DOM 元素

返回由 DOM 元素组成的数组

zepto.fragment = function(html, name, properties) {
  var dom, nodes, container

  // 判断是否空标签，如： 
  if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))

  if (!dom) {
    if (html.replace) html = html.replace(tagExpanderRE, "<$1>") // 补全双标签
    if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
    if (!(name in containers)) name = "*"

    container = containers[name]
    container.innerHTML = "" + html // 使 html 字符串转换成 dom 元素
    // 将 container 内的元素集合转换成数组，赋值给dom，并清空 container
    // slice.call 两个好处：1. 转换成数组 2. 数组拷贝
    // 这里为什么不直接将 container 置空，而是一个个移除呢？？
    dom = $.each(slice.call(container.childNodes), function(){
      container.removeChild(this)
    })
  }

  // properties 属性赋值
  if (isPlainObject(properties)) {
    nodes = $(dom)
    $.each(properties, function(key, value) {
      if (methodAttributes.indexOf(key) > -1) nodes[key](value)
      else nodes.attr(key, value)
    })
  }

  return dom
}

zepto.qsa(element, selector)

zepto 下的元素选择器

使用 querySelectorAll 和选项实现类似 css 选择器，如“#id”

不直接用 querySelector 或 querySelectorAll，只为更好的性能

规则

selector 以 # 开头，则用 getElementById

selector 以 . 开头，则用 getElementsByClassName

isSimple=/^[/w-]*$/

isSimple & 非# & 非.，用 getElementsByTagName

非 Simple，用 querySelectorAll

zepto.Z

生成 zepto 对象集合

zepto.Z = function(dom, selector) {
  return new Z(dom, selector)
}
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 || ""
}

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

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

zepto源码分析-代码结构

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

sherlock221 2019-08-20 12:20 评论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源码分析（二）奇淫技巧总结本文只分析核心的部分代码，并且在这部分代码有删减，但是不影响代码的正常运行。目录 * 用闭包封装Z...

BicycleWarrior 2019-08-20 18:57 评论0 收藏0
读Zepto源码之Touch模块

摘要：在触发事件前，先将保存定时器的变量释放，如果对象中存在，则触发事件，保存的是最后触摸的时间。如果有触发的定时器，清除定时器即可阻止事件的触发。其实就是清除所有相关的定时器，最后将对象设置为。进入时，立刻清除定时器的执行。大家都知道，因为历史原因，移动端上的点击事件会有 300ms 左右的延迟，Zepto 的 touch 模块解决的就是移动端点击延迟的问题，同时也提供了滑动的 swip...

Prasanta 2019-08-22 11:11 评论0 收藏0
读 Zepto 源码之操作 DOM

摘要：辅助方法这个方法递归遍历的子节点，将节点交由回调函数处理。对集合进行遍历，调用方法，如果为函数，则将回调函数返回的结果作为参数传给否则，如果为，则将也即包裹元素的副本传给，否则直接将传给。这篇依然是跟 dom 相关的方法，侧重点是操作 dom 的方法。读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的源码为 zepto...

beita 2019-08-20 17:00 评论0 收藏0
读Zepto源码之代码结构

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

warkiz 2019-08-20 15:35 评论0 收藏0