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

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

今天介绍的是与子元素相关的函数,children, find, contents children 从源码来看,主要是调用过滤函数filtered对遍历整个包装集返回的children进行过滤. 仔细看来,最终实现children依赖的是内部定义的children函数. 在支持直接获取元素children属性的浏览器当中,直接通过elment.children获取子元素,通过调用slice函数,返回数组对象,如果不支持element.children,则对element.childNodes进行…

后面应该会有几篇连续介绍关于zepto包装集的文章.涉及的函数较多,就分别介绍,今天介绍几个使用关系获取包装集的方法.prev, next, first, last, siblings, eq prev 看代码,只有一行,涉及到一个pluck函数,一直以为前面介绍过了,但是我看了下似乎没有介绍,补充一下: API中只有一句话:获取对象集合中每一个元素的属性值. 看前文介绍的有关$.map函数之后,相对比较容易理解的,这里就是对包装集进行遍历,返回一个新的数组,这个新的数组是由含有所传入的参数这一…

继续$.fn方法 今天主要介绍几个跟属性操作相关的方法attr, removeAttr, prop, data attr 读取或设置dom的属性.如果没有给定value参数,则读取对象集合中第一个元素的属性值.当给定了value参数.则设置对象集合中所有元素的该属性的值.当value参数为null,那么这个属性将被移除(类似removeAttr),多个属性可以通过对象键值对的方式进行设置. 首先对参数进行条件判断,如果传入的参数name是字符串,并且value参数没传,则表示用户期望的行为是获取…

继续上篇,本片主要介绍的是$.fn中与class相关的函数,包括hasClass, addClass, removeClass, toggleClass hasClass: 检查对象集合中是否有元素含有指定的class. 参数name为传入的需要检查对象集合中是否有这个class.如果没有传参,则直接返回false,不进行任何操作. 传入参数name的情况下,调用javascript原生函数some,来返回需要的结果. classRE(name)返回正则表达式作为some回调函数的this传入,…

继续包装集过滤的相关函数的介绍,今天介绍与父元素相关的函数,parent, parents, closest, offsetParent parent 获取对象集合中每个元素的直接父元素. 与上篇文章介绍的next和prev的原理类似,也是获取当前元素的属性,来确定其父元素,即获取parentNode属性. parents 获取对象集合每个元素所有的祖先元素.如果css选择器参数给出,过滤出符合条件的元素. 定义数组var ancestors = []用于存储获取到的父元素,将选取的对象包装集赋…

涉及到文本内容的主要有三个函数:html, text, val. 我们已经见过多次,一个函数多种用途的情况,今天这三个函数也不例外,既可以获取内容,也可以设置内容.判断条件就是有没有传入参数,如果没有传入参数,则表示获取内容,否则表示设置内容.判断条件也基本类似: 0 in arguments,后面不再对该条件判断解析.分两步介绍函数,1为设置内容,2为获取内容. html 获取或设置对象集合中元素的HTML内容. 1.利用javascript原生属性innerHTML获取元素的文本内容(包含h…

在不引入zepto插件模块fx_metho其他ds的情况下,zepto默认的显示隐藏的函数只有show, hide, toggle,这里解释有个前提条件,就是没有引入zepto的fx_methods插件模块 show 相比较于jQuery的show函数,这里真的很简单了,没有传入任何参数,如果在标签上以内联样式的形式存在style="display:none",直接将该内联样式的none改为空,如果不是内联样式,则通过获取计算后的样式,getComputedStyle(this, ''…

主要介绍一下wrap, wrapAll, wrapInner, unwrap方法. wrapAll 在所有匹配元素外面包一个单独的结构.结构可以是单个元素或 几个嵌套的元素,并且可以是html字符串或者dom元素. 用文字解释一下,就是先把传入的参数转换为dom结构,插入到所选择的包装集的前面,然后将包装集插入到所插入的dom元素的最深层次的第一个子集里面. 逐行解释: structure = $(structure)是将传入的参数转换为dom元素,再使用before方法插入到所选择的包装集的第…

从相对比较简单的说起: 1.$.grep  获取一个新数组,新数组只包含回调函数中返回 true 的数组项. 调用javascript中数组原生函数filter,对elements进行过滤,保留回调函数返回值为真的数组项. 2.$.map  通过遍历集合中的元素,返回通过迭代函数的全部结果,null 和 undefined 将被过滤掉. 刚开始使用的时候会对$.map和$.each产生一定的误解.从一定程度上来书,两者都是对集合中的元素进行遍历. 可以遍历数组和键值对的集合,$.map返回的是一…

本文只分析核心的部分代码,并且在这部分代码有删减,但是不影响代码的正常运行. 目录 * 用闭包封装Zepto * 开始处理细节 * 正式处理数据(获取选择器选择的DOM) * 正式处理数据(添加DOM到当前实例) * 在实例的原型链上添加方法 * 支持插件扩展 * 验收 用闭包封装Zepto // 对全局暴露Zepto变量 var Zepto = (function() { // 定义$变量,并将具体细节交给zepto.init处理 $ = function(selector, context)…

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

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

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

Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 ajax的事件触发顺序 zepto 针对 ajax 的发送过程,定义了以下几个事件,正常情况下的触发顺序如下: ajaxstart : XMLHttpRequest 实例化前触发 ajaxBeforeSend: 发送 ajax…

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

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

一.内核源码之我见 Linux内核代码的庞大令不少人“望而生畏”,也正因为如此,使得人们对Linux的了解仅处于泛泛的层次.如果想透析Linux,深入操作系统的本质,阅读内核源码是最有效的途径.我们都知道,想成为优秀的程序员,需要大量的实践和代码的编写.编程固然重要,但是往往只编程的人很容易把自己局限在自己的知识领域内.如果要扩展自己知识的广度,我们需要多接触其他人编写的代码,尤其是水平比我们更高的人编写的代码.通过这种途径,我们可以跳出自己知识圈的束缚,进入他人的知识圈,了解更多甚至我们一般短…

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

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

接下来几个篇章,都会解读 zepto 中的跟 dom 相关的方法,也即源码 $.fn 对象中的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 .forEach() forEach: emptyArray.forEach 因为 zepto 的 dom 集合是类数组,所以这里只是简单地复制了数组的 forEach 方法. 具体的 forEach 的用法见文档:Array.prototype.for…

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

这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 .remove() remove: function() { return this.each(function() { if (this.parentNode != null) this.parentNode.removeChild(this) }) }, 删除当前集合中的元素. 如果父…

这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 内部方法 classRE classCache = {} function classRE(name) { return name in classCache ? classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name…

这篇依然是跟 dom 相关的方法,侧重点是操作属性的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 内部方法 setAttribute function setAttribute(node, name, value) { value == null ? node.removeAttribute(name) : node.setAttribute(name, value) } 如果属性值 val…

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…