模拟jQuery--添加类名和移除类名的封装

Posted 2020-06-24

     之前自己用原生的js添加类名和移除类名，用起来感觉还算顺手。在使用jQuery框架添加类名和移除类名时候更是觉得“傻瓜式”使用了。前两天在封装别的模块，今天想起自己也来搞一下添加类名和移除类名，，，不动手不知道，敲起来遇到不少bug。主要还是起初考虑的不够周到，不过调试工具真是个‘宝’；

    这里直接附上我的代码了：

 //添加类（可以一次添加多个类名）
    function addClass() {
        var arg = Array.prototype.slice.call(arguments);
        var dom = arg[0];  //取得dom
        var className = arg.slice(1); //取得要添加的类名（数组形式）
        var doms =document.querySelectorAll(dom);      //获取所有符合的dom成员
        for (var i = 0; i < doms.length;i++) {
            //为了避免当第一次设置类名且以前没有类名，会出现第一个有空格的现象

            if (doms[i].className) {
                //如果之前有类名了
                addOne(doms[i]);
            } else {
                //首次添加类名
                firstaddOne(doms[i]);
            }
        }
        function addOne(dom) {
            for (var j = 0; j < className.length; j++) {
                var itemName = dom.className;
                var itemNames = [].push.call([],itemName);
                console.log(typeof itemNames);
                dom.className = dom.className + ‘ ‘ + className[j];
            }
        }

        function firstaddOne(dom) {
            for (var j = 0; j < className.length; j++) {
                dom.className = dom.className + className[j];
            }
        }
    }

//移除类
    function removeClass() {
        var arg = Array.prototype.slice.call(arguments);
        var dom = arg[0];  //取得dom
        var className = arg.slice(1); //取得要删除的类名（数组形式）
        var doms = document.querySelectorAll(dom);      //获取所有符合的dom成员
        //遍历dom
        for(var i=0;i<doms.length;i++){
            var getAttr = doms[i].getAttribute(‘class‘);
             var arr1 = getAttr.split(‘ ‘);
            //双重循环判断删除的类名是否与已有的类名一样
            for(var j=0;j<arr1.length;j++){
                for(var k=0;k<className.length;k++){
                    if(arr1[j]===className[k]){
                        arr1.splice(j,1);
                        console.log(arr1.length);
                        j--;
                        break;
                    }
                }

            }
            //一样--〉连同类名属性删除
            if(arr1.length==0){
                doms[i].removeAttribute(‘class‘);
            }else{
                //否则删除要删除的类名
                removeOne(doms[i]);

            }

        }

        function removeOne(dom){
            for (var j = 0; j < className.length; j++) {
                var getAttr = doms[i].getAttribute(‘class‘);
                var arr1 = getAttr.split(‘ ‘);
                if(className[0]===arr1[0]){
                    dom.className = dom.className.replace(className[j], ‘‘);
                }else{
                    dom.className = dom.className.replace(‘ ‘ + className[j], ‘‘);
                }



            }
        }
    }

快乐的学习，才能快速的成长^_^