面向对象编程
概念:面向对象是一种解决问题的思路,一种编程思想。
在 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>