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正則表達式 ""问题》找，这里我就不详述了。我们主要还是来实现上面说的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正則表達式 ""问题》事实上有提到一个比較easy忽略的问题就是对于字符串""与"\b"的差别。
- 2 怎样将一个字符串转换成正則表達式
-
解决这个问题(1就是相应上面的问题1，以此类推)
- 1 在《javascript正則表達式 ""问题》有说道，这里不再详述。
- 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參数中是正則表達式可是我又画蛇添足加了双引號""。
-
解决这个问题：
- 三 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;
}
}
-
- 四 toggle方法
-
CSSClassList.prototype.toggle = function(cls) {
if (!this.contains(cls))
this.add(cls);
else
this.remove(cls);
}
这个就不说了，一看就知道了。
summary
在写这个类的时候确实还是遇到非常多问题，可是总是能一一解决。
我认为一个程序猿最重要的是他的解决这个问题的能力吧。
毕竟自己写的类也不是非常多。可能是自己的处女作吧。还是会有很多问题出现的，有空的话。我会看看其它大牛写的代码。然后两者再比較，有对照才有差距才有进步。