jq addclass实现

196 阅读1分钟

今天有点好奇,想看下这个方法是怎么实现的,我这次是jq2.0版本的,使用断点一步步的看下去,代码在大概在(7170)行左右

先来说下addClass(value), //参数可以是单个, 如:"active", 也可以是 "active active2"这样传进行。

然后说下这个方法执行

var 了一些初始化变量,=> typeof了一下是不是字符串

proceed = typeof value === "string" && value,

再往下就判断是不是一个function 调用自身里面实现的isFunction (有需要可以自己去看下这个方法) 然后用正则把value 转换成数组, 用正则

classes = (value || "").match(rnotwhite) || [];

然后就for循环 里面三目判断目标dom是不是一个元素节点(elem.nodeType)并且 判断自身有没有class 有就拿出来 没有就给一个" " (里面是有空格的)

cur = elem.nodeType === 1 && (elem.className ? (" " + elem.className + " ").replace(rclass, " ") : " "	);

再下面就是while循环, 进行拼接className, 并在上面的cur 里面用indexOf查找当前class里面有没有已经在原来的class上,没有就进行拼接上去,后面去除字符串里面的空格,也是调用自身的trim()方法 最后判断当前的字符串和自己class的字符串相比, 不相等把className改变,最后 retrue this!

addClass: function (value) {
			var classes, elem, cur, clazz, j, finalValue,
				proceed = typeof value === "string" && value,
				i = 0,
				len = this.length;

			if (jQuery.isFunction(value)) {
				return this.each(function (j) {
					jQuery(this).addClass(value.call(this, j, this.className));
				});
			}

			if (proceed) {
				// The disjunction here is for better compressibility (see removeClass)
				classes = (value || "").match(rnotwhite) || [];

				for (; i < len; i++) {
					elem = this[i];
					cur = elem.nodeType === 1 && (elem.className ?
						(" " + elem.className + " ").replace(rclass, " ") :
						" "
					);

					if (cur) {
						j = 0;
						while ((clazz = classes[j++])) {
							if (cur.indexOf(" " + clazz + " ") < 0) {
								cur += clazz + " ";
							}
						}

						// only assign if different to avoid unneeded rendering.
						finalValue = jQuery.trim(cur);
						if (elem.className !== finalValue) {
							elem.className = finalValue;
						}
					}
				}
			}

			return this;
		},

最后是源码

第一次写文章,写的不好请多指教!