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