释放双眼，带上耳机，听听看~！
虽然现在很多js框架如jQuery都做得很好，但是从学习的角度来说，我们还是应该把js基础打牢固。
既然js是面向对象的，我们就可以利用封装，将一些固定的逻辑写在通用function里面。
下面的代码在不适用js框架的情况下可大大提高编程效率，而且可以遵循这个思路写更多的function。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
2//$("#someid");
3function $(id){
4 var s = new String(id);
5 if(/^#/.test(s)){
6 return document.getElementById(s.substring(1));
7 }else{
8 return document.getElementsByTagName(s);
9 }
10
11}
12/**
13给对象绑定事件监听器
14eventTarget 目标对象
15eventType 事件名称，click/mouseover
16eventHandler 函数对象
17*/
18function listenEvent(eventTarget, eventType, eventHandler) {
19 if (eventTarget.addEventListener) {
20 eventTarget.addEventListener(eventType, eventHandler,false);
21 } else if (eventTarget.attachEvent) {
22 eventType = "on" + eventType;
23 eventTarget.attachEvent(eventType, eventHandler);
24 } else {
25 eventTarget["on" + eventType] = eventHandler;
26 }
27}
28
29function stopListening (eventTarget,eventType,eventHandler) {
30 if (eventTarget.removeEventListener) {
31 eventTarget.removeEventListener(eventType,eventHandler,false);
32 } else if (eventTarget.detachEvent) {
33 eventType = "on" + eventType;
34 eventTarget.detachEvent(eventType,eventHandler);
35 } else {
36 eventTarget["on" + eventType] = null;
37 }
38}
39
40//增加onload事件处理函数
41function addLoadEvent(func) {
42 var oldonload = window.onload;
43 if (typeof window.onload != 'function') {
44 window.onload = func;
45 } else {
46 window.onload = function() {
47 if (oldonload) {
48 oldonload();
49 }
50 func();
51 }
52 }
53}
54
55
56//给目标元素添加css类
57function addClass(element,value) {
58 if (!element.className) {
59 element.className = value;
60 } else {
61 newClassName = element.className;
62 newClassName+= " ";
63 newClassName+= value;
64 element.className = newClassName;
65 }
66}
67function setClass(element,value){
68 element.className = value;
69}
70
71String.prototype.trim = function(){
72 return this.replace(/^\s+|\s+$/igm,'');
73}
74//扩展element，添加一个after方法,在元素后面增加html内容
75Element.prototype.after=function(text){
76 var oldHTML = this.parentNode.innerHTML;
77 this.parentNode.innerHTML = oldHTML+text;
78}
79//扩展element，添加一个append方法
80Element.prototype.append=function(text){
81 var oldHTML = this.innerHTML;
82 this.innerHTML = oldHTML+text;
83}
84
85//继承“原型”
86function extend(Child, Parent) {
87 var F = function(){};
88 F.prototype = Parent.prototype;
89 Child.prototype = new F();
90 Child.prototype.constructor = Child;
91 Child.uber = Parent.prototype;
92}
93//--->类式继承，使用方式 TwoDShape.extend(Shape),类似于extend(TwoDShape,Shape)
94Function.prototype.extend=function(superClass){
95 if(typeof superClass !== 'function'){
96 throw new Error('fatal error:Function.prototype.extend expects a constructor of class');
97 }
98 var F = function(){}
99 F.prototype = superClass.prototype;
100 this.prototype = new F();
101 this.prototype.constructor = this;
102 this.uber = superClass;
103 return this;
104}
105//拷贝属性
106function extendCopy(p) {
107 var c = {};
108 for (var i in p) {
109 c[i] = p[i];
110 }
111 c.uber = p;
112 return c;
113}
114//深度拷贝
115function deepCopy(p, c) {
116 var c = c || {};
117 for (var i in p) {
118 if (typeof p[i] === 'object') {
119 c[i] = (p[i].constructor === Array) ? [] : {};
120 deepCopy(p[i], c[i]);
121 } else {
122 c[i] = p[i];
123 }
124 }
125 return c;
126}
127//拷贝父对象为prototype
128function object(o) {
129 var n;
130 function F() {}
131 F.prototype = o;
132 n = new F();
133 n.uber = o;
134 return n;
135}
136
