一、面向对象和面向过程的区别
1、jquery创建一个P标签:此方法为面向对象,找到对象让它去做
#(“<p>alvin</p>”).appendTo('body');
2、传统的做法:创建一个P标签,此方法为 面向过程,亲力亲为
var p=document.createElement('p');
var txt=document.createTextNode('alvin');
p.appendChild(txt);
document.appendChild(body);
重点:A、面向对象是对面向过程的封装;
二、给两个标签添加边框
<body>
<div></div>
<p></p>
</body>
<script>
οnlοad=function(){
var divBorder=document.getElementsByTayName('div').[0];
var pBorder=document.getElementsByTayName('p').[0];
divBorder.style.border="1px solid red";
pBorder.style.border="1px solid green";
};
</script>
改良:函数--》反复执行代码块
<body>
<div></div>
<p></p>
</body>
<script>
//改良以后,函数可以获得指定标签名的所有函数
//为了让函数更好用,修改一下函数名
function tag(tag){
return document.getElementsByTagName(tag);
}
οnlοad=function(){
var divBorder=tag("div")[0];
var pBorder=tag("p")[0];
divBorder.style.border="1px solid red";
pBorder.style.border="1px solid green";
};
</script>
三、全局污染
<script>
//变量在全局范围内有效
var a=function(){
alert("123);
};
</script>
<script>
var a=123;//把前面的函数var=function()给覆盖掉了
//在js中重复var无效,var会在第一次预解析的时候全部提取到前面去
alert(a);
</script>
结果:123 //把前面的函数var=function()给覆盖掉了
四、为了防止上面的var a全局变量的污染过,我们进行对象的封装;
为什么需要有面向对象?更快速的开发代码
<script>
var icast=function(){ //把tag 和 id封装在icast中进行调用,防止全局变量的污染
tag:function(tagName){//形参:占位符,等同于公式的变量
return document.getElementsByTagName('tagName');
},
id:function(idName){
return document.getElementById('idName');
}
};
</script>
<script type="text/javascript">
icast.tag("body")[0].style.border="1px solid red';
</script>
面向对象的优势:
A、将复杂的公式进行封装,
B、使在全局作用域的污染过变得更少,
C、把所以相近功能的代码组合到一个对象的下边,利于维护和找出错误
五、面向对象的组织形式
<script>
var icast=function(){
getElem:function(){
tag:function(){},
id:function(){}
},
css:function(){
addStyle:function(){},
removeStyle:function(){],
addClass:function(){},
removeClass:function(){},
toggleClass:function(){}
}
};
</script>
优点:
A、将所有的功能归类到某一个属性的下边,每一个都变成一个模块,利于维护
B、对于全局作用域来说只有一个对象存在:icast,可以进行灵活的使用。