最近在研究Zepto的源码,这是第一篇分析,欢迎大家继续关注,第一次写源码笔记,希望大家多指点指点,第一篇文章由于首次分析原因不会有太多干货,希望后面的文章能成为各位大大心目中的干货. Zepto是一个匿名函数的运行结果,而zepto是该匿名函数中定义的一个对象,注意区分 zepto.matches match = ~zepto.qsa(parent, selector).indexOf(element) zepto.qsa:zepto优化过的选择器 zepto.qsa(parent, sele…

之前介绍过 Catalina加载过程是Bootstrap的load调用的  Tomcat8源码笔记(二)Bootstrap启动 按照Catalina的load过程,大致如下: 接下来一步步分析加载过程 一.initDirs 从系统环境变量.VM参数中读取java.io.tmpdir, 并校验文件夹合法性: 未指定java.io.tmpdir,会抛出异常,所以我们启动时指定VM参数: -Djava.io.tmpdir=E:/Tomcat_Source_Code/apache-tomcat-8.0.…

ps:本文中"组装成成数组"指的是若元素个数大于1则返回数组,若元素只有1个则返回元素本身 以下函数是$.fn该对象的方法 ready(callback) 通过readyRE正则表达式检测document.readyState是否符合,若符合则调用回调函数: 否则添加DOMContentLoaded事件处理函数以调用回调函数 each(callback) 因为Z元素集合本身就是类数组,不需要像$.each(elements,callback)一样先判断elements是否类数组,所以使…

uniq(array) 返回不存在重复值的数组 function classRE(name) 判断classCache中是否已存在name,若存在则取出classCache[name];否则存入该类名的正则表达式至classCache[name]中 function maybeAddPx(name,value) 若name在cssNumber中则返回value:否则返回value+"px" function defaultDisplay(nodeName) 从elementDispla…

将类数组对象转化为数组对象 javascript中有许多类数组对象,比如HTMLCollection,NodeList,arguments.她们的特点是和数组一样有length属性,并且有0,1,2这样的位置属性.在代码编写中我们经常需要将他们转化为数组对象. //mini类数组对象 var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 } console.log(Array.prototype.…

根据 Tomcat8源码笔记(五)组件Container分析 前文分析,StandardService的初始化重心由 StandardEngine转移到了Connector的初始化,本篇记录下Connector实例化到初始化的过程 国际惯例这个词最近很常见,那国际惯例,我先放上Tomcat各个组件结构图:Connector地位,一个Service下可以有多个Connector,和Container愉快的生活在Service里: 先来看看server.xml中对于Connector元素的位置以及如…

Tomcat8源码笔记(四)Server和Service初始化 介绍过Tomcat中Service的初始化 最先初始化就是Container,而Container初始化过程是咋样的? 说到Container的初始化,Tomcat8源码笔记(三)Catalina加载过程 这篇文章记录了Tomcat是怎样解析server.xml的流程,再此基础上,我们来分析Container的初始化. 这是Catalina定义的解析规则,之前都是添加的Rule接口的实现,而RuleSet可以理解为一堆Rule更具象…

上一章 简单说明下Tomcat各个组件: Server:服务器,Tomcat服务器,一个Tomcat只有一个Server组件; Service:业务层,是Server下最大的子容器,一个Server可以包含多个Service组件: Connector:连接器,Service的子容器,一个Service可以有多个Connector连接器,作用体现在对外,接收客户端请求,HTTP.TCP等: Container:Service核心组件,通常有Engine.Host.Context.Wrapper,作…

今天基本上就是zepto学习笔记的最后一篇了,介绍一下有关位置的函数,position, offset, scrollLeft, scrollTop scrollLeft 如果所选取的包装集不存在,则直接返回. 定义变量: var hasScrollLeft = 'scrollLeft' in this[0] 在zepto中用到了很多类似的特性检测的方法,判断浏览器是否支持mousedown一特性,如果支持,则直接使用该特性,如果不支持,则利用其他方法来实现. 这里是在判断浏览器是否支持scro…

一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以及 event . ajax . form . ie ,其中 event 模块也是比较重要的模块之一,我们可以借助它提供的方法实现事件的监听.自定义事件的派发等.最重要的是,做了一些事件的兼容,简化了我们的编码. event 模块 这个模块代码行数要比 ajax 的少.还是老套路,对函数调用关系做…

从这篇起,在没有介绍到各类插件之前,后面将陆续介绍zepto对外暴露的核心方法.即$.fn={}里面的所有方法的介绍.会配合zepto的API进行介绍. 其实前面已经介绍了几个,如width,height,prepend等等,今天开始的是zepto源码里面,明确的封装在$.fn对象里面的方法. 本篇介绍的是与类数组(NodeList)操作相关的各种方法: forEach,reduce,push,sort,splice,indexOf,concat,map,slice,toArray,each,f…

width和height函数,实际上通过css方法也完全可以取到这两个函数的结果.获取width,$elem.css('width');设置width的话,$elem.css('width', 100),这与我们将要介绍的width()函数完全一致,height函数也一样可以实现.但是在我们日常编程过程中,这两个函数使用频率确实比较高,所以不管是jquery,还是zepto都对他们进行了额外的封装. 由于这两者实现过程完全一致,唯一的区别是一个是宽度,一个是高度,在代码实现过程中,并没有什么区别…

几个方法 1.filtered 目标是对节点按照一定的选择器进行过滤. 如果传入了过滤选择器,则在nodes节点下,选择符合选择器的节点: 如果没有传入选择器,则返回节点本身,转化为zepto节点. 2.$.contains,是一个对外暴露的方法. 检查父节点是否包含给定的dom节点,如果两者是相同的节点,则返回 false. 两种情况: a).如果浏览器支持document.documentElement.contains方法,在两者节点不同的情况下,调用parent.contains(nod…

几个需要经常用到的类型判断: 自定义一个类似于typeof的函数,提供更多的类型判断. class2type[toString.call(obj)] 是对class2type的取值 在后面通过循环对class2type赋予相应的键值对, 最终在class2type保存的是 所以当调用type传入的参数为array对象时,调用toString.call(array)返回[object Array],所以对应class2type['[object Array]']即为array. 如果传入的参数为n…

主要了解一下zepto定义的初始变量. 逐一以自己的理解解析,待到后面完全透彻理解之后,争取再写一遍zepto源码学习的文章. 其中的undefined确实不明白为什么定义这么个变量在这里. document = window.document根据个人理解应该是要兼容一些特殊情况下获取document的问题,但是也不知道在什么样的情况下,需要使用window.docment才能获取到document对象. key: 后面会多次用到初始化变量key,在for in循环中,需要确定键的名称,基本上只…

数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concat.filter.slice 方法 compact function compact(array) { return filter.call(array, function(item)…

数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concat.filter.slice 方法 compact function compact(array) { return filter.call(array, function(item)…

虽然最近工作中没有怎么用 zepto ,但是据说 zepto 的源码比较简单,而且网上的资料也比较多,所以我就挑了 zepto 下手,希望能为以后阅读其他框架的源码打下基础吧. 源码版本 本文阅读的源码为 zepto1.2.0 阅读zepto之前需要了解 javascript 原型链和闭包的知识,推荐阅读王福朋的这篇文章:深入理解 Javascript 原型和闭包,写得很详细,也非常易于阅读. 源码结构 整体结构 var Zepto = (function () { ... })() windo…

Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性.目标对象的同名属性会被源对象的属性覆盖. $.extend 其实调用的是内部方法 extend, 所以我们先看看内部方法 extend 的具体实现. function extend(target, source, deep) { for (key in source) // 遍历源对象的属性值 if (deep && (i…

经过前面三章的铺垫,这篇终于写到了戏肉.在用 zepto 时,肯定离不开这个神奇的 $ 符号,这篇文章将会看看 zepto 是如何实现 $ 的. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 zepto的css选择器 zepto.qsa 我们都知道,很多时候,我们都用$ 来获取DOM对象,这跟 zepto.qsa 有很大的关系. 源码 zepto.qsa = function(element, se…

这篇依然是跟 dom 相关的方法,侧重点是跟集合元素查找相关的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 内部方法 之前有一章<读Zepto源码之内部方法>是专门解读 zepto 中没有提供给外部使用的内部方法的,但是有几个涉及到 dom 的方法没有解读,这里先将本章用到的方法解读一下. matches zepto.matches = function(element, selector…

本作品采用知识共享署名 4.0 国际许可协议进行许可.转载联系作者并保留声明头部与原文链接https://luzeshu.com/blog/redis1 本博客同步在http://www.cnblogs.com/papertree/p/7159802.html 这个系列博客大部分完成于一年前,基于3.0.5版本(但是代码行数不一定完全相符,调试过程中会修改一些代码). 这一篇博客针对第二篇涉及到的redisClient.redisDb.redisObject(robj)等几个结构体,以及redi…

Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 准备知识 focus/blur 的事件模拟 为什么要对 focus 和 blur 事件进行模拟呢?从 MDN 中可以看到, focus 事件和 blur 事件并不支持事件冒…

Callbacks 模块并不是必备的模块,其作用是管理回调函数,为 Defferred 模块提供支持,Defferred 模块又为 Ajax 模块的 promise 风格提供支持,接下来很快就会分析到 Ajax模块,在此之前,先看 Callbacks 模块和 Defferred 模块的实现. 源码版本 本文阅读的源码为 zepto1.2.0 整体结构 将 Callbacks 模块的代码精简后,得到的结构如下: ;(function($){ $.Callbacks = function(optio…

Deferred 模块也不是必备的模块,但是 ajax 模块中,要用到 promise 风格,必需引入 Deferred 模块.Deferred 也用到了上一篇文章<读Zepto源码之Callbacks模块>介绍的 Callbacks 模块. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 Promise/A+ 规范 规范的具体内容可以参考<Promises/A+> 和对应的中文翻译…

一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以及 event . ajax . form . ie ,其中 ajax 模块是比较重要的模块之一,我们可以借助它提供的方法去做一些网络请求,还可以监听它的生命周期事件. Zepto 基本模块之 ajax 模块 我们都已经知道 Zepto 插件的一般形式是把 Zepto 对象传入给 $ 形参,那么可以…

一个普通的 Zepto 源码分析(一) - ie 与 form 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以及 event . ajax . form ,还有一个说是可以支持 IE10 和 WP8 的 ie 模块. Zepto 基本模块之 ie 模块 由于这个模块比较短小,就是一个对 getComputedStyle() 的封装,而且核心模块也有用到这个函数.那么首先来看看: ;(functio…

Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器. 在阅读本篇文章之前,最好先阅读<读Zepto源码之神奇的$>. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> 辅助方法 visible function visible(elem){…

大家都知道,因为历史原因,移动端上的点击事件会有 300ms 左右的延迟,Zepto 的 touch 模块解决的就是移动端点击延迟的问题,同时也提供了滑动的 swipe 事件. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> 实现的事件 ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeD…

Gesture 模块基于 IOS 上的 Gesture 事件的封装,利用 scale 属性,封装出 pinch 系列事件. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook <reading-zepto> 整体结构 ;(function($){ if ($.os.ios) { var gesture = {}, gestureTimeout $(document).bind('ge…