山寨HTML5API classList类
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;
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
在写这个类的时候确实还是遇到很多问题，但是总是能一一解决。我觉得一个程序员最重要的是他的解决问题的能力吧。毕竟自己写的类也不是很多，可能是自己的处女作吧，还是会有许多问题出现的，有空的话，我会看看其他大牛写的代码，然后两者再比较，有对比才有差距才有进步。