JS面向对象之组件开发

发表于 | 分类于

组件开发是什么

组件开发 : 多组对象，像兄弟之间的关系( 代码复用的一种形式 )
对象的多种表现形式
提高对象的复用性
如何配置参数和默认参数
例子 : 拖拽
例子 : 弹窗

什么是组件？

对面向对象的深入应用（UI组件，功能组件）
将 配置参数、方法、事件，三者进行分离
参见 jQuery UI

创建自定义事件

自定义事件：就是让函数能够具备事件的某些特性

有利于多人协作开发代码
如何去挂载自定义事件与事件函数

1
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
window.onload = function(){
	var oDiv = document.getElementById('div1');
	var oSpan = document.getElementById('span1');
	
	bindEvent(oDiv , 'click',function(){
		alert(1);
	});
	
	bindEvent(oDiv , 'click',function(){
		alert(2);
	});
	
	bindEvent(oSpan , 'show',function(){
		alert(3);
	});
	
	bindEvent(oSpan , 'show',function(){
		alert(4);
	});
	
	bindEvent(oSpan , 'hide',function(){
		alert(5);
	});
	
	fireEvent(oSpan , 'show');  //3 , 4
};
function bindEvent(obj,events,fn){
	//obj : 楼层
	//events : 书架
	//fn : 一本书
	
	obj.listeners = obj.listeners || {};
	obj.listeners[events] = obj.listeners[events] || [];
	
	obj.listeners[events].push( fn );
	
	if(obj.addEventListener){
		obj.addEventListener(events,fn,false);
	}
	else{
		obj.attachEvent('on'+events,fn);
	}
}
function fireEvent(obj,events){   //主动触发自定义事件
	
	for(var i=0;i<obj.listeners[events].length;i++){
		 obj.listeners[events][i]();
	}
	
}
<div id="div1">div</div>
<span id="span1">span</span>