js 实现jquery的hacClass,addClass,removeClass

jquery的写法

'on')
  $(obj).addClass('on')
  $(obj).removeClass('on')

js 仿写

function hasClass(ele,cls){
    cls =cls || '';
    if(cls.replace(/\s/g,'').length==0){
      return false;
    }else{
       // 匹配类名 前后各加一个空字符串 为了保证匹配的是单个类名 不是包含该字符串的别的类名  例如：test test_1
      return new RegExp(' '+cls+' ').test(' '+ele.className+' ')
    }
  }

  function addClass(ele,cls){
    if(!hasClass(ele, cls)){
      // 在类名字符串上叠加新类名
      ele.className += ' ' + cls;
     }
  }

  function removeClass(ele,cls){
    if(hasClass(ele,cls)){
      // 获取本身的类名字符串 前后添加一个空字符串 为了匹配首个类名 就是需要移除的类名
      var newClass=' '+ele.className.replace(/[\t\r\n]/g,'')+' '
      // 多个class的时候  需要遍历 正常情况不会有同一个类名 多次添加  所以进行while
        while(newClass.indexOf(' '+cls+' ') >-1){
          // 匹配类名 前后各加一个空字符串 为了保证匹配的是单个类名 不是包含该字符串的别的类名  例如：test test_1
             newClass = newClass.replace(' '+cls+' ', ' ');//将目标类名 替换为空
         }
        //  讲前后的空字符串 以及替换成功以后 多出来的空字符串 匹配掉
         ele.className = newClass.replace(/^\s+|\s+$/g, '');
    }
  }
  console.log(hasClass(document.getElementById('test'),'test'))
  removeClass(document.getElementById('test'),'test')

主要是思考的探索