jQuery源码探索之路（5）-- $.each, .hasClass(), .addClass()等的实现

1. 自己最近在学习一些JS插件的写法，那么当然就绕不开jquery，于是自己就边学习边模仿，写一个自己的jQuery

2. 自己也是在学习过程中，有问题请各位指出，希望大伙能多多支持，给给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

如果您不知道我在说什么的话，推荐您从头开始看我的这个系列文章:

• jQuery源码探索之路（1）-- 一个开始
• jQuery源码探索之路（2）-- init初始化
• jQuery源码探索之路（3）--extend的实现
• jQuery源码探索之路（4）-- .eq(), .first(), .last(), .find(), .get()的实现