zepto源码--filtered, contains,funcArg,setAttribute,className,deserializeVale--学习笔记

几个方法

1、filtered

目标是对节点按照一定的选择器进行过滤。

如果传入了过滤选择器,则在nodes节点下,选择符合选择器的节点;

如果没有传入选择器,则返回节点本身,转化为zepto节点。

2、$.contains,是一个对外暴露的方法。

检查父节点是否包含给定的dom节点,如果两者是相同的节点,则返回 false

两种情况:

  a)、如果浏览器支持document.documentElement.contains方法,在两者节点不同的情况下,调用parent.contains(node)函数,判断父节点是否包含给定的dom节点。

  b)、如果不支持原生contains的方法,进行循环判断,将节点自身的父节点赋值给自身,判断两者是否相等,如果判断到相等的时候,返回true,否则返回false。

3、funcArg,处理传入参数为函数的情况,为内部使用函数。

参数context为上下文环境,arg如果为函数的话,则执行arg函数,并绑定上下文为context

4、setAttribute,设置或者删除属性

如果没有传入value,则将传入节点的name属性删除,否则就是对传入节点设置那么属性为value;

5、className

刨除svg格式不谈,该函数目的就是依据value有没有传入参数,没传value,即为获取传入节点的className; 传参的话即为设置对应节点的className。

6、deserializeValue

简单点说,就是反序列化,不展开详细解释,主要就是三元运算符?:的使用,最终是将字符串数字转为数字,字符串‘true‘或‘false‘转为对应的true和false,字符串‘null’转为null,json字符串转化为json对象。

这6个函数只有$.contains属于对外暴露的方法,其他5个函数属于zepto源码内部使用方法,是为简化其他方法进行的函数封装。

时间: 11-05

zepto源码--filtered, contains,funcArg,setAttribute,className,deserializeVale--学习笔记的相关文章

Scala并发编程实战初体验及其在Spark源码中的应用解析之Scala学习笔记-56

package com.leegh.actor import scala.actors.Actor /** * @author Guohui Li */object First_Actor extends Actor { def act() { for (i <- 1 to 10) { println("Step : " + i) println(Thread.currentThread().getName) Thread.sleep(2000) } }} object Seco

读Zepto源码之样式操作

这篇依然是跟 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

Zepto源码分析之二~三个API

由于时间关系:本次只对这三个API($.camelCase.$.contains.$.each)方法进行分析 第一个方法变量转驼峰:$.camelCase('hello-world-welcome'); 源码: var camelize; /** * 字符串替换 * 使用replace第二个参数带回调 */ camelize = function(str) { return str.replace(/-+(.)?/g, function(match, chr) { return chr ? ch

读 zepto 源码之工具函数

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

读Zepto源码之操作DOM

这篇依然是跟 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) }) }, 删除当前集合中的元素. 如果父

读 Zepto 源码之内部方法

数组方法 定义 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源码--几个判断函数--学习笔记

几个需要经常用到的类型判断: 自定义一个类似于typeof的函数,提供更多的类型判断. 如果传入的参数为null,则类型返回'null',基本上可以返回各种常用对象类型,如'function', 'array','regexp'--而不是统一返回object. 判断是否为函数类型: 判断是不是window对象: 判断是不是document对象: 判断是否为object对象: 判断是否为{}对象: 判断是否为类数组:arguments就属于类数组,或者$('div')这种,可以用下标读取,看起来像

zepto源码分析系列

如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Zepto源码分析-event模块 Zepto源码分析-ajax模块 Zepto源码分析-form模块 Zepto源码分析-deferred模块 Zepto源码分析-动画(fx fx_method)模块 内容一定要200字一定要200字内容一定要200字一定要200字内容一定要200字一定要200字内容

zepto源码解读(二)——zpeto.init()——

前面第一节我们大致阐述了zepto的设计结构,看起来东西很多,但是化整为零就没那么繁杂了,一起来看一看,首先我们来看一看zepto源码中可以说是最关键的函数之一zepto.init(). 我们之前说到了$这个api会导致函数zepto返回$这个接口,$呢,是一个函数: 1 // `$` will be the base `Zepto` object. When calling this 2 // function just call `$.zepto.init, which makes the