面向对象--封装


一、面向对象和面向过程的区别

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,可以进行灵活的使用。






  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值