JS面向对象学习之普通面向过程式选项卡编写(笔记)
2018-04-02 20:51
651 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>传统面向过程式编写选项卡</title> <style> .box div { width: 200px; height: 200px; border: 1px solid #666; display: none; } .active { background: #F4D; } </style> </head> <body> <div class="box"> <input class="active" type="button" value="新闻" /> <input type="button" value="娱乐" /> <input type="button" value="财经" /> <div style="display: block;">新闻</div> <div>体育</div> <div>财经</div> </div> <script> window.onload = function() { var aInput = document.querySelectorAll('.box input'); var aDiv = document.querySelectorAll('.box div'); for(var i = 0; i <aInput.length; i++) { aInput[i].index = i; aInput[i].onclick = function() { for(var j = 0; j < aInput.length; j++) { aInput[j].className = ""; aDiv[j].style.display = "none"; } this.className = "active"; aDiv[this.index].style.display = "block"; } } } </script> </body> </html>先写出普通的写法,然后改成面向对象写法普通方法变型:1、尽量不要出现函数嵌套函数;2、可以有全局变量;3、把onload中不是赋值的语句放到单独函数中按照上面三点讲js代码改成下面这样: var oParent = null;var aInput = null;var aDiv = null;window.onload = function() {oParent = document.getElementById("box");aInput = oParent.getElementsByTagName('input');aDiv =oParent.getElementsByTagName('div');init();};function init() {for(var i = 0; i <aInput.length; i++) {aInput[i].index = i;aInput.onclick = change;}}function change() {for(var j = 0; j < aInput.length; j++) {aInput[j].className = "";aDiv[j].style.display = "none";}this.className = "active";aDiv[this.index].style.display = "block";};再遵循下面的原则改成面向对象的形式:1、全局变量就是属性;2、函数就是方法3、onload中创建对象;4、最后改this的指向;//在使用了事件和定时器的情况下,this最容易出问题来看看this的指向问题:oDiv.onclick = function() {//这个时候的this是指向oDiv的}再看: oDiv.onclick = change;function change() {//this还是指向oDiv}
oDiv.onclick = function() { show(); } function show() { this-->window }然后来看下面代码中this指向是谁? window.onload = function() {var tl = new Tab(); //创建对象t1.init();}function Tab() {//这个函数里面的this都是指向对像this.oParent = document.getElementById("box");this.aInput = this.oParent.getElementsByTagName('input');this.aDiv = this.oParent.getElementsByTagName('div');}Tab.prototype.init = function() {//init函数调用是这样的:t1.init(),这里面的this还是t1对象for(var i = 0; i <this.aInput.length; i++) {this.aInput[i].index = i;this.aInput.onclick = this.change;//在这里调用了change函数,那么change里面的this应该是指向this.aInput这个按钮}}Tab.prototype.change = function() {//看看哪里调用了change函数;那么change里面的this应该是指向this.aInput这个按钮for(var j = 0; j < this.aInput.length; j++) {//这里的this.aInput是错误的this.aInput[j].className = "";//同上错误this.aDiv[j].style.display = "none";//同上错误}this.className = "active";//这里的this指向是对的this.aDiv[this.index].style.display = "block";//这里的this.index中的this是对的,但是外面的this.oDiv中的this是错误的}正确方式应该如下这样写:更给this指向的原则应该是尽量让对象中的this指向对象window.onload = function() {var tl = new Tab(); //创建对象tl.init();}function Tab() {this.oParent = document.getElementById("box");this.aInput = this.oParent.getElementsByTagName('input');this.aDiv = this.oParent.getElementsByTagName('div');}Tab.prototype.init = function() {var This = this;for(var i = 0; i <this.aInput.length; i++) {this.aInput[i].index = i;this.aInput[i].onclick = function() {This.change(this);};}}Tab.prototype.change = function(obj) {for(var j = 0; j < this.aInput.length; j++) {this.aInput[j].className = "";this.aDiv[j].style.display = "none";}obj.className = "active";this.aDiv[obj.index].style.display = "block";}
相关文章推荐
- JS面向对象学习笔记(二)
- Objective-C基础学习笔记(二)-面向对象与面向过程的两种思想
- 韩顺平 javascript教学视频_学习笔记18_js超级玛丽小游戏2_js面向对象的进一步说明
- js面向对象学习笔记之七(函数 与 基础控制结构)
- JS 学习笔记--12---面向对象
- js面向对象学习笔记之三(Array 对象)
- JS面向对象---封装(阮一峰网络日志学习笔记)
- 面向对象--传统的过程式和面向对象式编写选项卡
- js学习笔记-编写高效、规范的js代码-Tom
- js面向对象学习笔记之二(debug调试方法)
- js面向对象学习笔记之八(cookie使用 与 url的get参数获取)
- js学习笔记(1)-面向对象开发
- js面向对象学习笔记之六(变量)
- ECMAScript 面向对象JS学习笔记1
- C#学习笔记——面向对象、面向组件以及类型基础
- JS学习笔记(10)面向对象
- js面向对象学习笔记之一(类与对象)
- JS面向对象学习笔记(三)
- java语言面向对象笔记,在学习面向对象时应该理解掌握的原理-作者:逝秋
- OC学习笔记之面向过程与面向对象