JavaScript面向对象

最新推荐文章于 2024-02-28 23:59:43 发布

王大瑜

最新推荐文章于 2024-02-28 23:59:43 发布

阅读量167

点赞数 1

本文链接：https://blog.csdn.net/WangY321/article/details/89500413

版权

面向对象编程

概念：面向对象是一种解决问题的思路，一种编程思想。
在 JavaScript 中，所谓的对象，就是键值对的集合
面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现
面向对象则是关注的实现功能的一系列的对象

面向对象的案例

传统的处理办法

<script type="text/javascript">
	window.onload=function(){
		var div1=document.getElementById('div1');//获取页面元素
		var p1=document.getElementById('p1');
		div1.style.width=200+'px';
		div1.style.height=200+'px';
		div1.style.background='green'
		p1.style.width=200+'px';
		p1.style.height=100+'px';
		p1.style.background='pink';
	}
<body>
	<div id="div1" ></div>
	<br />
	<p id="p1"></p>
</body>

使用函数进行封装优化

<script type="text/javascript">
			window.onload = function() {
			function abc(cba){
          	return  document.getElementsByTagName(cba);
          }
             var  div=abc('div');
             var   p=abc('p');
             function yangshi(asdf){
             	 asdf[0].style.border='1px solid yellow';
             }
             yangshi(div);
             yangshi(p);
             	}
		</script>
		<body>
		<div id="div_01">1234567890</div>
		<p>0987654321</p>
	</body>

使用面向对象的方式

<script type="text/javascript">
			window.onload = function() {
			var  inlett={
                 	getele:{
                 	  	id:function(ids){
                 	  		return document.getElementById(ids);
                 	  	},
                 	  	classname:function(classnames){
                 	  		return document.getElementsByClassName(classnames);
                 	  	},
                 	  	tag:function(tags){
                 	  		return document.getElementsByTagName(tags);
                 	  	}
                 	 },
                 	styles:{
                 		sleltcss:function(arr){
                 			// 判断arr是否有长度
                 			 if(arr.length==undefined){
                 			 	arr.style.border='1px solid yellow';
                 			 }else{
                 			 	for(var i=0;i<arr.length;i++){
                 			 		arr[i].style.border='1px solid pink';
                 			 	}
                 			 }
                 		}
                 	}
                 }
                //   通过对象获取元素
                var div_01=inlett.getele.id('div_01');
                //   通过元素设置样式
                inlett.styles.sleltcss(div_01);
                var p=inlett.getele.tag('p');
                inlett.styles.sleltcss(p);
			}
		</script>
		<body>
		<div id="div_01">1234567890</div>
		<p>0987654321</p>
	</body>

王大瑜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript面向对象

面向对象编程概念：面向对象是一种解决问题的思路，一种编程思想。在 JavaScript 中，所谓的对象，就是键值对的集合面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现面向对象则是关注的实现功能的一系列的对象面向对象的案例传统的处理办法<script type="text/javascript"> window.onload=function(){ va...
复制链接

扫一扫