面向过程与面向对象比较之tab选项卡切换
2017-02-16 13:31
225 查看
<body> <div id="div"> <input type="button" value="选项卡1" name=""> <input type="button" value="选项卡2" name=""> <input type="button" value="选项卡3" name=""> <div>111</div> <div>222</div> <div>333</div> </div> </body>
<script type="text/javascript"> //面向过程的选项卡切换(用循环而不用每个元素设置id) window.onload = function(){ var div = document.getElementById("div"); var btn = div.getElementsByTagName("input"); // alert(btn.length); var content = div.getElementsByTagName("div"); for(var i = 0,Len = btn.length;i < Len;i++){ // alert(btn[i]); //将每次加载DOM元素的onlcik事件时,把赋给btn的index属性 btn[i].index = i; // console.log(i); btn[i].onclick = function(){ for(var j = 0,Len2 = content.length;j < Len2;j++){ content[j].style.display = "none"; } content[this.index].style = "blcok"; //此时,i=3,因为已加载完三个onclick事件,所以当点击事件时,i=3; // console.log(i); }; } }; //面向对象写法:组合使用构造函数模式和原型模式 function tabSwitch(id){ this.div = document.getElementById(id), this.btn = div.getElementsByTagName("input"), this.content = div.getElementsByTagName("div"); tabSwitch.prototype.tab = function(){ for(var i = 0,Len = this.btn.length;i < Len;i++){ this.btn[i].index = i; //在事件中,this指向执行此事件的对象,因此将原来指向新对象的this赋给_this _this = this; this.btn[i].onclick = function(){ for(var j = 0,Len2 = _this.content.length;j < Len2;j++){ _this.content[j].style.display = "none"; // console.log(_this); } _this.content[this.index].style = "block"; } } } console.log(tabSwitch.prototype);//指向原型 console.log(tabSwitch.prototype.constructor);//指向构造函数 } window.onload = function(){ var tab = new tabSwitch("div"); tab.tab(); console.log(tab.__proto__);//指向原型 } </script>
面向过程写法简单,但用起来不方便,面向对象写法效率高,用起来方便
相关文章推荐
- 面向对象与面向过程的简单比较
- 前端开发方式比较:面向对象 VS 面向过程
- 面向对象和面向过程的js版选项卡
- 面向对象与面向过程的简单比较
- 面向对象与面向过程的比较
- 面向对象与面向过程比较
- 原生javascript-Tab选项卡-面向对象
- 面向对象 tab切换
- 面向对象和面向过程的比较
- php mysqli数据库面向过程,面向对象实例比较
- 面向对象和面向过程的比较
- 面向对象与面向过程思想比较
- JavaScript面向对象实例---tab选项卡
- 面向对象与面向过程的比较
- 面向对象,面向过程 ,以及基于对象--概念比较
- 面向对象(OO)开发与面向过程(OP)开发的比较
- 面向对象与面向过程的编程思想比较
- MySqli扩展库的对象对象属性特点以及与mysql库面向过程的比较
- 面向对象与面向过程的比较
- 面向对象与面向过程的比较