温习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'))