preface

觉得自己去写一些类，你真的会找到自己不足的地方。其实厉害不是你实现一个类，而是你如何去设计一个类，能让开发者更加容易操作。对于这个操作样式，可以通过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"问题》其实有提到一个比较容易忽略的问题就是对于字符串"\b"与"\\b"的区别。
• 2 如何将一个字符串转换成正则表达式

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

• 1 在《javascript正则表达式 "\b"问题》有说道，这里不再详述。
• 2 在我脑海中现在有两种方法，一种是用eval，但是因为安全性还有性能问题被我否决了，所以我改成了第二种方法是用RegExp构造函数。如果对于现在正在读我的blog的您来说，有更好的方法请告诉我，大家来交流交流。

二 add方法

CSSClassList.prototype.add = function(cls) {

var classname = this.el.className;