温习classList api

　　有道题是一个removeClass的功能，代码里是正则分隔了传入的name，根据name的个数，循环移除掉，让寻找bug。。看了了这几行代码，首先想到的是我会如何去优化。 如果看代码一两分钟就能找到公司js框架中的bug，那也太。。。

　　改为如何优化算是不错的面试题，

　　　　first，去掉正则表达式，使用split字符串内置方法分隔，

　　　　second，支持html5的浏览器使用classList api，

　　　　第三，类似jq,hasClass、remove、togglle都是用了字符串内置方法，indexOf、replace、字符串相加。

周末试着coding。代码如下

             var className = (function() {
                 //设置的方法list
                 var fnName = 'add,remove,contains,toggle'.split(',');
                 var _trim = function(str) {
                     return str.trim ? str.trim() : str.replace(/(^\s*)|(\s*$)/g, "");
                 };

                 //不支持H5的classList，使用自定义方法实现
                 var cClassList = {
                     add: function(el, name) {
                         if (!this.contains(el, name)) {
                             el.className = _trim(el.className + ' ' + name + ' ');
                         }
                     },
                     remove: function(el, name) {
                         if (this.contains(el, name)) {
                             var _class = (' ' + el.className + ' ').replace(' ' + name + ' ', ' ');
                             el.className = _class ? _trim(_class) : '';
                         }
                     },
                     contains: function(el, name) {
                         if (el && el.nodeType == 1 && (" " + el.className + " ").indexOf(" " + name + " ") >= 0) {
                             return true;
                         }
                         return false;
                     },
                     toggle: function(el, name) {
                         if (this.contains(el, name)) {
                             this.remove(el, name);
                         } else {
                             this.add(el, name);
                         }
                     }
                 };

                 var _classList = {};
                 /*
                  * 如果name为多个（空格分隔），那么循环设置，反之调用classList设置
                  * @param {HtmlNode} type
                  * @param {String} name
                  * @returns {undefined}
                  */
                 var _eachDo = function(type, name) {
                     if (typeof name === 'string' && name.length) {
                         name = _trim(name).split(' ');
                         var len = name.length;
                         if (len === 1) {
                             if (this.classList) {//使用h5的classList,非hasClass 则return undefined
                                 return this.classList[type](name[0]);
                             } else {
                                 return cClassList[type](this, name);//使用自定义设置
                             }
                         } else {
                             var Return = true;
                             for (var j = 0; j < len; j++) {
                                 if (_eachDo.call(this, type, name[j]) == false) {
                                     Return = false;
                                 }
                                 ;
                             }
                             return Return;
                         }
                     }
                 };
                 //添加上 add、toggle、contains、remove方法
                 for (var i = 0; i < fnName.length; i++) {
                     (function(key) {
                         _classList[key] = function(el, name) {
                             //如果传入的className是个function，那么得到计算结果
                             if (typeof name === 'function') {
                                 name = name.call(this);
                             }
                             return _eachDo.call(el, key, name);
                         };
                     })(fnName[i]);
                 }
                 //hasClass
                 _classList['has'] = _classList.contains;
                 return _classList;
             })();

             var div1 = document.getElementById('div1');
             className.add(div1, 'asd fv');
             alert(div1.className)
             className.remove(div1, 'asd');
             alert(div1.className)
             className.toggle(div1, 'asd sd');
             alert(div1.className)
             className.add(div1, 'asd sd fv');
             alert(div1.className)
             alert(className.has(div1, 'asd fv'))