- 自己最近在学习一些JS插件的写法，那么当然就绕不开jquery，于是自己就边学习边模仿，写一个自己的jQuery
- 自己也是在学习过程中，有问题请各位指出，希望大伙能多多支持，给给star，点点赞呗，源码github地址
Paste_Image.png
这次我们来实现each,hasClass,addClass,removeClass的方法。
each
其实each很简单，就是封装了一层遍历罢了。所以直接开写
Ye.each = function(obj, callback){
var len = obj.length,
constructor = obj.constructor,
i = 0;
//obj是一个JQ对象
if(obj.constructor == Ye){
for(; i < len; i++){
var v = callback.call(obj[i], i ,obj[i]);
if(v == false) break;
}
}else if(isArray(obj)){
for(; i < len; i++){
var v = callback.call(obj, i ,obj[i]);
if(v == false) break;
}
}else{
for(var i in obj){
var v = callback.call(obj, i , obj[i]);
if(v == false) break;
}
}
}
each传进来的obj分三种情况
1.一个JQ对象 2.一个数组 3.一个普通对象
对象的遍历通过for in 来实现。
使用.call 来调用函数，.call传的第一个参数是为修改函数内部的this,后面的都是作为函数的参数。
hasClass,addClass,removeClass
这几个方法实际上核心一样，都是获取className,然后用正则去匹配，后续再做不同的操作，先直接上代码
Ye.prototype = {
//省略代码...
hasClass:function(cls){
//使用RegExp构建正则表达式，需要在转义字符前加反斜杠。字面量形式则不用
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
//遍历JQ里的DOM
for(var i = 0; i < this.length; i++){
if(this[i].className.match(reg)) return true;
}
return false;
},
addClass:function(cls){
var reg = new RegExp('\\s|^') + cls + new RegExp('\\s|$');
for(var i =0; i < this.length; i++){
//没有这个类名，则添加
if(!this[i].className.match(reg)){
this[i].className += " " + cls;
}
}
return this;
},
removeClass:function(cls){
var reg = new RegExp('\\s|^') + cls + new RegExp('\\s|$');
for(var i = 0; i < this.length; i++){
if(this[i].className.match(reg)){
this[i].className.replace(cls,"");
}
}
return this;
}
//省略代码...
}
这里其实也很简单，主要是要会运用正则匹配表达式去查找，然后利用repalce等字符串的方法去替换。
在最后的removeClass中，我们是将cls替换成一个空字符串，如果这个className前后有空格的话，我们就没有去掉，继续保留了，所以可能会导致className里有许多无用的空格。
想要去掉的话其实也有办法，我们可以利用正则对象的$1,$2...等属性，来得到正则匹配里子匹配获取到的对象。
从而判断是否有空格，进而去把空格也替换掉，具体的可以去看正则匹配的一些介绍。
今天的方法就实现到这里啦。
附：
既然您看都看完了，麻烦您点个赞，给个star呗，谢谢您的支持
源码地址：https://github.com/LY550275752/my-js-plug/blob/master/Ye.js
如果您不知道我在说什么的话，推荐您从头开始看我的这个系列文章:
