一些简单的Js代码的封装

 1 function getById(id) {
 2
 3 }
 4
 5 function getAttr(el, k) {
 6
 7 }
 8
 9 function setAttr(el, k, v) {
10
11 }
12
13 function addClass(el, k) {
14
15 }
16
17 function removeClass(el, k, v) {
18
19 }
20
21 function getStyle(el, k) {
22
23 }
24
25 function setStyle(el, k, v) {
26
27 }
28
29 function addEvent(el, type, func) {
30
31 }
32
33 function removerEvent(el, type, func) {
34
35 }

　　封装的实现：

 1 function getById(id) {
 2     return id ? document.getElementById(id) : null;
 3 }
 4
 5 function getAttr(el, k) {
 6     if (el) {
 7         return el.getAttribute[k];
 8     }
 9     return null;
10 }
11
12 function setAttr(el, k, v) {
13     if (el) {
14         el.setAttribute(k, v);
15     }
16 }
17
18 function addClass(el, k) {
19     if (el) {
20         var arr = el.className.split(‘ ‘);
21         var arrClass = [];
22         var isExist = false;
23         for (var i = 0, len = arr.length; i < len; i++) {
24             if (arr[i] != ‘‘) arrClass.push(arr[i]);
25             if (arr[i] == k) {
26                 isExist = true;
27                 break;
28             }
29         }
30         if (isExist == false) {
31             arrClass.push(k);
32             var cls = arrClass.join(‘ ‘);
33             el.className = cls;
34             setAttr(el, ‘class‘, cls)
35         }
36     }
37 }
38
39 function removeClass(el, k) {
40     if (el) {
41         var arr = el.className.split(‘ ‘);
42         var arrClass = [];
43         for (var i = 0, len = arr.length; i < len; i++) {
44             if (arr[i] != ‘‘ && arr[i] != k) arrClass.push(arr[i]);
45         }
46
47         var cls = arrClass.join(‘ ‘);
48         el.className = cls;
49         setAttr(el, ‘class‘, cls)
50     }
51 }

我们看到，firefox可以获取class列表，而ie几个浏览器只有className这一属性，所以操作class时候我们要用到。

但是获取当前样式却比较麻烦，还需要计算各个样式表的比重，我们这里用不到就暂时忽略了。

以上简单测试了一番，基本没有问题，我最后加上事件绑定，便暂时告一段落。

 1function addEvent(el, type, func) {
 2     if (el) {
 3         if (el.attachEvent) {
 4             el.attachEvent(‘on‘ + type, func);
 5         } else {
 6             el.addEventListener(type , func, false);
 7         }
 8     }
 9 }
10
11 function removerEvent(el, type, func) {
12     if (el) {
13         if (el.attachEvent) {
14             el.detachEvent(‘on‘ + type, func);
15
16         } else {
17             el.removeEventListener(type, func, false);
18         }
19     }
20 }