zepto源码--核心方法2(class相关)--学习笔记

继续上篇,本片主要介绍的是$.fn中与class相关的函数,包括hasClass, addClass, removeClass, toggleClass

hasClass:

检查对象集合中是否有元素含有指定的class。

参数name为传入的需要检查对象集合中是否有这个class。如果没有传参,则直接返回false,不进行任何操作。

传入参数name的情况下,调用javascript原生函数some,来返回需要的结果。

classRE(name)返回正则表达式作为some回调函数的this传入,className(el)前文也已经介绍过,获取元素的className,翻译一下的话,应该相当于classRE(name).test(className(el))。

其中关于原生函数some,只要回调结果为true,即立即返回真值,更多关于some的用法,请自行了解。

addClass

为每个匹配的元素添加指定的class类名。多个class类名使用空格分隔。

没有传入name,则不进行任何操作,直接返回对象集合本身。

如果传入了参数,对所有对相集合遍历处理,并返回。这里有一个小技巧,直接return this.each(function(){...})。

首先检测对象是否具有className的属性,只有具有该属性的对象,才能进行下一步的操作。

定义classList为空数组,如果传入的参数是以空格区分的多个className,则将他们通过空格分割,然后分别存入到classList数组中。

对传入的参数name进行处理,获取className字符串。

使用空格分割字符串,组成新的数组。

接着进行遍历组成的新数组,判断当前的对象中是否含有klass,如果没有这个klass,则将klass存入classList,以便后面的添加使用。这里对传入的参数进行了进一步的处理,如果传入的参数中的className在对象集合中已经有了该参数,则忽略该参数值。举例:

<div class='item'></page>,$('div').addClass('item')

这一步中新增的名为item的className则会忽略,不会添加到对象上面。

这里才是真正的添加className的操作,如果classList不为空的话,就调用className对该对象进行新增className。

cls为原来的className,如果对象上本身就有className,则在原有的className后面添加一个空格,再追加新的className,classList.join(" ")表示使用空格将数组转化为字符串的形式。

removeClass

移除当前对象集合中所有元素的指定class。如果没有指定name参数,将移出所有的class。多个class参数名称可以利用空格分隔。

逻辑与addClass类似。

稍有区别的是如果没有传入参数,则表示移除对象上的所有className。

其他逻辑基本类似,只是操作过程反过来而已。

toggleClass

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它,如果不存在,就添加它。如果 when的值为真,这个功能类似于 addClass,如果为假,这个功能类似与 removeClass

需要介绍的可能就是对names分割之后,循环遍历的回调函数了。

也就是:

仔细分析一下,这其实跟我前面介绍的toggle的用法也是完全一致的。

拆分一下 var settings = when === undefined ? !$this.hasClass(klass) : when

如果没有传入when,则调用hasClass,判断当前是否含有该klass,并取反,否则直接取when的值,并将最终的值赋值给settings。

后面就是根据settings的值判断是进行添加class,还是删除class的操作。

原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6053159.html