js面向对象之组件开发

mnblue
mnblue 发布于 2017-01-03 17:28:15 浏览:1138 类型:原创 - 随笔 分类:JavaScript - JavaScript 面向对象 二维码: 作者原创 版权保护
组件分为 UI组件和功能组件
将 参数,方法,事件(自定义事件) 三者分离

1、关于参数
    传参的时候以json的形式,只传一个参数
    需要用配置参数b和默认参数a, 用b继承a (b和a前边的key值要保持一致)
    调用的时候,调用默认参数
   
   例如:拖拽
   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1,#div2,#div3 {width: 100px; height: 100px; position: absolute;}
			#div1{background: red;}
			#div2{background: yellow; left: 100px;}
			#div3{background: green; left: 200px;}
		</style>
		<script>
			window.onload=function(){
				var d1=new drag({    //配置参数
					id:'div1'
				});
				var d2=new drag({
					id:'div2',
					toUp: function (){
						document.title='hello';
					}
				})
				
				var d3=new drag({
					id:'div3',
					toUp: function (){
						document.title='world';
					},
					toDown:function(){
						document.title='你好';
					}
				})
				
			}
			
			function drag(opt)   //创建构造函数
			{
				this.disX=null;
				this.disY=null;
				this.setting={      //默认参数
					id:'div1'  ,
					toUp: function (){},
					toDown:function(){}
				};     
				extend(this.setting,opt);
				this.oDiv=document.getElementById(this.setting.id);
				this.change();
			}
			drag.prototype.change=function ()   
			{
				var This=this;
				this.oDiv.onmousedown=function(ev)
				{
					This.setting.toDown();
					var ev=ev || window.event;
					this.disX=ev.clientX-this.offsetLeft;
					this.disY=ev.clientY-this.offsetTop;
					
					This.oDiv.onmousemove=function (ev)
					{
						var ev=ev || window.event;
						var l=ev.clientX-this.disX;
						var t=ev.clientY-this.disY;
						This.oDiv.style.left=l+'px';
						This.oDiv.style.top=t+'px';
					}					
					This.oDiv.onmouseup=function()
					{
						This.setting.toUp();
						This.oDiv.onmousemove=This.oDiv.onmouseup=null;
					}	
			               	This.oDiv.onmouseout=function()                //鼠标移出取消事件
					{
						This.oDiv.onmousemove=This.oDiv.onmouseup=null;
					}
					return false;                                              //阻止默认事件
					ev.preventDefault();
				}				
			}
			
			function extend(obj1,obj2)
			{
				for(var attr in obj2)
				{
					obj1[attr]=obj2[attr];
				}
			}
			
		</script>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
</html>



2、关于自定义事件
     自定义事件:主要是跟函数有关系,就是让函数能够具备事件的某些特性;有利于多人协作开发。
     
     例如:选项卡
     
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.tab div{width: 100px; height: 100px; border: 1px solid #000; display: none;}
		.tab .active {background:red;}
	</style>
	<script src="js/jquery-1.11.3.min.js"></script>   
	<script>
	    /*选项卡切换组件
	    Options:events  	    
	    Events:  beforeClick   afterClick  自定义事件
	       自定义事件需要主动触发  jq中用trigger()
	    */
		$(function(){
			var t1=new Tab();
			t1.init('div1',{});
			
			var t2=new Tab();
			t2.init('div2',{events: 'mousemove'});
			
			var t3=new Tab();
			t3.init('div3',{});
			$(t3).on('beforeClick',function (){   //添加自定义事件
				alert(1);
			})
			$(t3).on('afterClick',function (){   //添加自定义事件
				alert(2);
			})
		})
		
		function Tab()  //创建构造函数
		{
             this.par=null;
             this.aIn=null;
             this.aDiv=null;
             this.setting={     //默认参数
             	events: 'click'
             };    
		}
		Tab.prototype.init=function(oPar,opt) //初始化
		{
			this.par=$('#'+oPar);
			this.aIn=this.par.find('input');
			this.aDiv=this.par.find('div');
			$.extend(this.setting,opt);   //JQ自带extend方法
			this.change();
		}
		Tab.prototype.change=function()
		{
			var This=this;			
			this.aIn.on(this.setting.events,function(){
				$(This).trigger('beforeClick');      //主动触发自定义事件
				This.aIn.removeClass('active');
				$(this).addClass('active');
				This.aDiv.css('display','none');
				This.aDiv.eq($(this).index()).css('display','block');
				$(This).trigger('afterClick');      //主动触发自定义事件
			})			
		}
		
	</script>
	<body>
		<div class="tab" id="div1">
			<input type="button" value="1" class="active" />
			<input type="button" value="2" />
			<input type="button" value="3" />
			<div style="display: block;">11111111</div>
			<div>22222222</div>
			<div>33333333</div>
		</div>
		<div class="tab" id="div2">
			<input type="button" value="1" class="active" />
			<input type="button" value="2" />
			<input type="button" value="3" />
			<div style="display: block;">11111111</div>
			<div>22222222</div>
			<div>33333333</div>
		</div>
		<div class="tab" id="div3">
			<input type="button" value="1" class="active" />
			<input type="button" value="2" />
			<input type="button" value="3" />
			<div style="display: block;">11111111</div>
			<div>22222222</div>
			<div>33333333</div>
		</div>
	</body>
</html>
z
给个赞 14 人点赞
收藏 21 人收藏
评论 已有 7 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
Ngt
Ngt2017-01-06 13:23:447F
语病emoticon //@ding:楼主面向对象设计模式很好
举报 支持 (0) 回复 (0)
aioros2013
aioros20132017-01-06 11:40:186F
onmousemove写在document上是不是会好点? //@mnblue:拖拽那个是有bug,鼠标移动的快了,就移动出目标了,然后就出bug了 //@探花:你这有bug啊
举报 支持 (0) 回复 (0)
ding
ding2017-01-06 10:46:325F
楼主面向对象设计模式很好
举报 支持 (0) 回复 (1)
s516441839
s5164418392017-01-04 22:18:214F
这个网站就是应该多一点原生js,少一点浮夸的特效,我很喜欢写这些,互粉下吧
举报 支持 (0) 回复 (0)
xiaxia0077
xiaxia00772017-01-04 09:02:003F
这不是BUG是没有把z-index值提起来,提起来就没事了 //@mnblue:拖拽那个是有bug,鼠标移动的快了,就移动出目标了,然后就出bug了 //@探花:你这有bug啊
举报 支持 (0) 回复 (0)
mnblue
mnblue2017-01-03 21:23:512F
拖拽那个是有bug,鼠标移动的快了,就移动出目标了,然后就出bug了 //@探花:你这有bug啊
举报 支持 (0) 回复 (2)
探花
探花2017-01-03 17:52:011F
你这有bug啊
举报 支持 (0) 回复 (1)
mnblue mnblue 作者

作者最新