js面向对象（json对象、继承、面向对象拖拽）

末蓝、 2024-02-17 23:28 72阅读 0赞

案例1：json面向对象

<!DOCTYPE html>
    <html>
    	<head>
    		·<meta charset="utf-8">
    		<title></title>
    		<script>
    			//json简单，不适合多个对象；整个程序中只有一个，写起来比较简单
    			var JSON = {
    				name : 'LDW',
    				qq : '20237199',
    				showName :function(){
    					alert(this.name);
    				},
    				showQq : function(){
    					alert(this.qq);
    				}
    			}
    			
    			JSON.showQq();
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

案例2：继承问题

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function A (){
    				this.abc = 12;
    			}
    			
    			A.prototype.show = function(){
    				alert(this.abc);
    			}
    			
    			function B (){
    				//call可以改变原来中的this
    				A.call(this);
    			}
    			
    			//B.prototype.show = A.prototype.show ;
    			//用以解决引用问题
    			for(var i in A.prototype ){
    				B.prototype[i] = A.prototype[i];
    			}
    			
    			B.prototype.fn = function(){
    				alert('fn');
    			}			
    			var objB = new B();
    			
    			//objB.show();
    			//alert(objB.abc);
    			
    			//引用问题
    			var objA = new A();
    			
    			objA.fn();
    			//objB.fn();
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

案例3：面向过程拖拽

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
    		</style>
    		<script>
    			window.onload = function(){
    				var oDiv = document.getElementById('div1');
    				
    				oDiv.onmousedown = function(ev){
    					var oEvent = ev || event ;
    					var disX = oEvent.clientX - oDiv.offsetLeft;
    					var disY = oEvent.clientY - oDiv.offsetTop;
    					
    					document.onmousemove = function(ev){
    						var oEvent = ev || event ;
    						
    						oDiv.style.left = oEvent.clientX - disX + 'px';
    						oDiv.style.top = oEvent.clientY - disY + 'px';
    					}
    					
    					document.onmouseup = function(){
    						document.onmousemove = null;
    						document.onmouseup = null;
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = 'div1'></div>
    	</body>
    </html>

案例4：面向对象拖拽

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
    		</style>
    		<script>
    			
    			window.onload = function(){
    				new Drag('div1');
    			}
    			
    			function Drag(id){
    				var _this = this;
    				this.oDiv = document.getElementById(id);
    				this.disX = 0;
    				this.disY = 0;
    				this.oDiv.onmousedown = function (ev){
    					_this.fnDown(ev);
    				}
    			}
    			
    			Drag.prototype.fnDown = function(ev){
    					var oEvent = ev || event ;
    					this.disX = oEvent.clientX - this.oDiv.offsetLeft;
    					this.disY = oEvent.clientY - this.oDiv.offsetTop;
    					var _this = this;
    					
    					document.onmousemove = function(ev){
    						_this.fnMove(ev);
    					};
    					
    					document.onmouseup = function(){
    						_this.fnUp();
    					};
    				}
    			Drag.prototype.fnMove = function(ev){
    						var oEvent = ev || event ;
    						
    						this.oDiv.style.left = oEvent.clientX - this.disX + 'px';
    						this.oDiv.style.top = oEvent.clientY - this.disY + 'px';
    					}
    			
    			Drag.prototype.fnUp = function(){
    						document.onmousemove = null;
    						document.onmouseup = null;
    					}
    			
    		</script>
    	</head>
    	<body>
    		<div id = 'div1'></div>
    	</body>
    </html>

案例5：面向对象拖拽--继承

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			#div1 {height: 200px;width: 200px;background: red;position: absolute;}
    		</style>
    		<script src="JS/Drag1.js"></script>
    		<script src="JS/Drag2.js"></script>
    		<script>
    			
    			window.onload = function(){
    				new Drag2('div1');
    			}
    
    		</script>
    	</head>
    	<body>
    		<div id = 'div1'></div>
    	</body>
    </html>

Drag1.js:

Drag2.js: