山寨HTML5API classList类

preface

认为自己去写一些类，你真的会找到自己不足的地方。事实上厉害不是你实现一个类。而是你怎样去设计一个类，能让开发人员更加easy操作。

对于这个操作样式，能够通过javascript訪问style，可是在《javascript高级程序设计》中有说到这样子CSS、javascript、HTML耦合度太高，不太适合维护。还有就是通过className，可是我们知道className是一个能够被开发人员读写的字符串，假设要增删查改元素相应的className的话，能够实现，可是比較麻烦。这个时候HTML5站出来了，提出了classList类，确实方便我们开发人员去使用，可是它有一个弊端就是兼容性不是非常好。

introduction

简介element.classList,以下是它的4个方法: 1 add a class to an element's list of classes(为元素加入class); 2 remove a class from an element's list of classes(删除元素的class); 3 toggle the existence of a class in an element's list of classes ◦See below about the optional second argument.(切换元素的class); 4 check if an element's list of classes contains a specific class(检查元素是否有这个class)

确实认为这种API让开发人员少做非常多苦力活，具体的能够去看element.classList,毕竟上面不是我想深入了解的知识点，我想深入了解的是，自己先去模仿别人设计的API，看自己能不能扩展那个API(非常显然自己还没达到那种程度)。

description

在这里说明下我定义的CSSClassList能够到我《javascript正則表達式 "\b"问题》找，这里我就不详述了。我们主要还是来实现上面说的4个方法，能够在不支持classListAPI的浏览器上用

一 contains方法(个人认为这种方法是最重要的。之后的add remove和toggle方法都要用到)

CSSClassList.prototype.contains = function(cls) {

var classname = this.el.className, reg = new RegExp("\\b" + cls + "\\b");

return reg.test(classname);

}

遇见的问题：

1 在《javascript正則表達式 "\b"问题》事实上有提到一个比較easy忽略的问题就是对于字符串"\b"与"\\b"的差别。
2 怎样将一个字符串转换成正則表達式

解决这个问题(1就是相应上面的问题1，以此类推)

1 在《javascript正則表達式 "\b"问题》有说道，这里不再详述。
2 在我脑海中如今有两种方法，一种是用eval，可是由于安全性还有性能问题被我否决了。所以我改成了另外一种方法是用RegExp构造函数。假设对于如今正在读我的blog的您来说。有更好的方法请告诉我，大家来交流交流。

二 add方法

CSSClassList.prototype.add = function(cls) {

var classname = this.el.className;

if (this.contains(cls))

return;

else {

var arr = classname.split(/\s+/);

arr.push(cls);

this.el.className = arr.join(" ");

}}

设计思路:

假设在该元素中找到class的话。就不加入了。找不到就加入，怎样去加入？我把该元素的className字符串转成数组，然后使用数组的push方法并把数组转换成字符串赋值给该元素的className

遇见的问题：

对于字符串的split方法不是非常熟练，比方上面有句代码我写成了var arr = classname.split("/\s+/");记住在split參数中是正則表達式可是我又画蛇添足加了双引號""。

解决这个问题：

String.prototype.split()

三 remove方法(这种方法还是我折腾比較久的)

CSSClassList.prototype.remove = function(cls) {

var classname = this.el.className;

if (!this.contains(cls))

return -1;

else {

//indexOf还是有兼容性问题

var arr = classname.split(/\s+/), index = arrIndexOf(arr, cls);

arr.splice(index, 1);

this.el.className = arr.join(" ");

return (this.el.className);

}

设计思路：找不到要删除的class就返回-1，然后确定该元素有这个class。就要去找那个class是在哪。然后把它删除掉。还是那样子先把该元素的className转换成数组，然后能够用到ES5的Array.prototype.indexOf方法找到class相应的下标。可是被我否决了。由于这个indexOf仅仅能在IE9+才干用。如过IE9+能用的话，事实上就不是必需去实现山寨的classList，由于IE9+本身就支持，那怎么办？以下会详述。

找到相应的下标就用数组的splice去删除该class并把删除后的数组转换成字符串赋给该元素的className

遇到问题

主要还是怎么用原生的javascript去实现indexOf方法？

解决这个问题

function arrIndexOf(arr, searchEl) {

if (arr.indexOf) {

return arr.indexOf(searchEl);

} else {

for (var i = 0, len = arr.length; i < len; i++) {

if (arr[i] === searchEl)

return i;

}

return -1;

}

}

就不用我过多去解释了吧。应该看完代码非常easy懂吧，我也不是什么大牛级，所以我写的代码还是非常平易近人的。

四 toggle方法

CSSClassList.prototype.toggle = function(cls) {

if (!this.contains(cls))

this.add(cls);

else

this.remove(cls);

}

这个就不说了，一看就知道了。

summary

在写这个类的时候确实还是遇到非常多问题，可是总是能一一解决。

我认为一个程序猿最重要的是他的解决这个问题的能力吧。

毕竟自己写的类也不是非常多。可能是自己的处女作吧。还是会有很多问题出现的，有空的话。我会看看其它大牛写的代码。然后两者再比較，有对照才有差距才有进步。