[关闭]
@GivenCui 2016-08-11T13:26:45.000000Z 字数 5659 阅读 766

用构造函数重写Tab选项卡

深入理解

目录

要点总结

要点:

变形 :
1.先变型:
2.尽量不要出现函数嵌套函数
3.可以有全局变量
4.把onload中不是赋值的语句放到单独函数中

改成面向对象 :
1.全局变量就是属性
2.函数就是方法
3.Onload中创建对象
4.事件或定时器会改变this指向,尽量让面向对象中的this指向对象

注意事项
1. init() 中添加事件绑定后续所有功能函数 (方便改写事件类型)
2. 功能函数中 先恢复初值, 再实现功能

tab点击重构详解

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
  8. .active{ background:red;}
  9. </style>
  10. <script>
  11. ///////////////////////////////////////////////////////////////// //
  12. ///            第一步骤 :  面向过程实现功能                       //
  13. ////////////////////////////////////////////////////////////////////
  14. // window.onload = function () {
  15. //  var box1 = document.querySelector("#div1");
  16. //  var aBtn1 = box1.querySelectorAll("input");
  17. //  var tabs1 = box1.querySelectorAll("div");
  19.     // 方法一: for循环
  20.     // for (var i = 0; i < aBtn1.length; i++) {
  21.     //  // 添加自定义index
  22.     //  aBtn1[i].index = i;
  23.     //  aBtn1[i].onclick = function () {
  25.     //      // 恢复所有原样式
  26.     //      for (var i = 0; i < aBtn1.length; i++) {
  27.     //          tabs1[i].style.display = "none";
  28.     //          aBtn1[i].className = "";
  29.     //      }
  31.     //      // 点击加样式
  32.     //      this.className = "active";
  33.     //      tabs1[this.index].style.display = "block";
  34.     //  }
  35.     // }
  37. /*
  39.     // 方法二: [].forEack.call()
  40.     // 练习[].forEach.call()的这种
  41.     [].forEach.call(aBtn1, function (ele,idx) {
  42.         ele.index = idx;
  43.         ele.onclick = function () {
  45.             for (var i = 0; i < aBtn1.length; i++) {
  46.                 tabs1[i].style.display = "none";
  47.                 aBtn1[i].className = "";
  48.             }
  50.             ele.className = "active";
  51.             tabs1[this.index].style.display = "block";
  52.         }
  54.     })
  55. */
  57.     // 方法三: for of 
  61. // }  // onload 结束
  72. ///////////////////////////////////////////////////////////////// //
  73. ///            第二步骤 :  变形                                   //
  74. ////////////////////////////////////////////////////////////////////
  76. //先变型:
  77. //尽量不要出现函数嵌套函数
  78. //可以有全局变量
  79. //把onload中不是赋值的语句放到单独函数中
  81. // 第一组
  82. // ////////////////////全局变量///////////////////////////
  83. // var box1 = null;
  84. // var aBtn1 = null;
  85. // var tabs1 = null;
  86. // ///////////////////window.onload部分/////////////////
  87. // window.onload = function () {
  88. // // 第一组
  90. // box1 = document.querySelector("#div1")
  91. // aBtn1 = box1.querySelectorAll("input");
  92. // tabs1 = box1.querySelectorAll("div");
  94. // // 调用init函数
  95. // init()
  97. // };   // onload 结束
  98. // ///////////////事件绑定函数////////////////////////////
  99. // // init函数
  100. // // 借鉴模板设计模式
  101. // function init () {
  102. //  for(var i = 0; i < aBtn1.length; i++) {
  103. //      aBtn1[i].index = i;
  104. //      // 点击事件调用change函数
  105. //      aBtn1[i].onclick = change;
  106. //  }
  107. // }
  108. // // change函数
  109. // function change () {
  110. //  // 恢复默认样式
  111. //  for ( var i=0; i < aBtn1.length; i++) {
  112. //      aBtn1[i].className = "";
  113. //      tabs1[i].style.display = "none";
  114. //  }
  115. //  // 事件触发样式
  116. //  // 这两个this是onclick的aBtn1[i]
  117. //  tabs1[this.index].style.display = "block";
  118. //  this.className = "active";  
  119. // }
  121. ///////////////////////////////////////////////////////////////// //
  122. ///            第三步骤 :  面向对象封装                           //
  123. ////////////////////////////////////////////////////////////////////
  124. //改成面向对象:
  125. //全局变量就是属性
  126. //函数就是方法
  127. //Onload中创建对象
  129. //改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象
  131. window.onload = function () {
  132.     var box1 = document.querySelector("#div1");
  133.     var aBtn1 = box1.querySelectorAll("input");
  134.     var aDiv1 = box1.querySelectorAll("div");
  135.     var t1 = new Tab(aBtn1, aDiv1);
  136.     t1.init();
  137. }
  139. // 构造函数
  140. function Tab (a , b) {
  141.     this.a = a;
  142.     this.b = b;
  143. }
  144. // prototype添加方法
  145. // 模板方法
  146. // 事件在这里添加
  147. // 优点是很容易换事件的类型
  148. Tab.prototype.init = function () {
  149.     var that = this;
  150.     for(var i = 0; i < this.a.length; i ++) {
  151.         this.a[i].index = i;
  152.         // 这里的this因onclick而改变
  153.         this.a[i].onclick = function () {
  154.             // 函数是被onclick调用
  155.             // 这里的this指代按钮
  156.             that.change(this);
  157.         };
  159.     }
  160. };
  161. // 点击切换功能
  162. Tab.prototype.change = function (target) {
  163.     var objA = this.a;
  164.     var objB = this.b;
  165.     // 恢复原样式
  166.     for (var i = 0; i < objA.length; i++) {
  167.         objA[i].className = "";
  168.         objB[i].style.display = "none";
  169.     }
  171.     // 事件改变的样式
  172.     target.className = "active";
  173.     objB[target.index].style.display = "block";
  174. };
  175. </script>
  176. </head>
  178. <body>
  179. <div id="div1">
  180.     <input class="active" type="button" value="1">
  181.     <input type="button" value="2">
  182.     <input type="button" value="3">
  183.     <div style="display:block">11111</div>
  184.     <div>22222</div>
  185.     <div>33333</div>
  186. </div>
  188. <div id="div2">
  189.     <input class="active" type="button" value="1">
  190.     <input type="button" value="2">
  191.     <input type="button" value="3">
  192.     <div style="display:block">11111</div>
  193.     <div>22222</div>
  194.     <div>33333</div>
  195. </div>
  196. </body>
  197. </html>

tab点击和轮播

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. #div1,#div2{
  8. width: 200px;
  9. }
  10. #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;background: green;}
  11. .active{ background:red;}
  12. </style>
  13. <script>
  15. /*var arr = [4,7,1,3];
  16. arr.sort();  // 1 3 4 7
  18. var arr2 = [4,7,1,3];
  19. arr2.push(5);
  20. arr2.sort(); // 1 3 4 5 7
  21. */
  23. window.onload = function(){
  25.     var t1 = new Tab('div1');
  26.     t1.init();
  27.     // t1.autoPlay();
  29.     var t2 = new Tab('div2');
  30.     t2.init();
  31.     t2.autoPlay();
  33. };
  35. function Tab(id){
  36.     this.oParent = document.getElementById(id);
  37.     this.aInput = this.oParent.getElementsByTagName('input');
  38.     this.aDiv = this.oParent.getElementsByTagName('div');
  39.     this.iNow = 0;
  40. }
  42. Tab.prototype.init = function(){
  43.     var This = this;
  44.     for(var i=0;i<this.aInput.length;i++){
  45.         this.aInput[i].index = i;
  46.         this.aInput[i].onclick = function(){
  47.             This.change(this);
  48.         };
  49.     }
  50. };
  52. Tab.prototype.change = function(obj){
  53.     for(var i=0;i<this.aInput.length;i++){
  54.         this.aInput[i].className = '';
  55.         this.aDiv[i].style.display = 'none';
  56.     }
  57.     obj.className = 'active';
  58.     this.aDiv[obj.index].style.display = 'block';
  59.     this.iNow = obj.index;
  60. };
  62. Tab.prototype.autoPlay = function(){
  63.     var timer = null;
  64.     clearInterval(timer);
  65.     var This = this;
  67.     timer = setInterval(function(){
  69.         if(This.iNow == This.aInput.length-1){
  70.             This.iNow = 0;
  71.         } else {
  72.             This.iNow++;
  73.         }
  76.         for(var i=0;i<This.aInput.length;i++){
  77.             This.aInput[i].className = '';
  78.             This.aDiv[i].style.display = 'none';
  79.         }
  80.         This.aInput[This.iNow].className = 'active';
  81.         This.aDiv[This.iNow].style.display = 'block';
  85.     },1000);
  86.     This.oParent.onmouseover = function () {
  87.         clearInterval(timer);
  88.     };
  89.     This.oParent.onmouseout = function () {
  90.         This.autoPlay();
  91.     };
  93. };
  95. </script>
  96. </head>
  98. <body>
  99. <div id="div1">
  100.     <input class="active" type="button" value="1">
  101.     <input type="button" value="2">
  102.     <input type="button" value="3">
  103.     <div style="display:block">11111</div>
  104.     <div>22222</div>
  105.     <div>33333</div>
  106. </div>
  108. <div id="div2">
  109.     <input class="active" type="button" value="1">
  110.     <input type="button" value="2">
  111.     <input type="button" value="3">
  112.     <div style="display:block">11111</div>
  113.     <div>22222</div>
  114.     <div>33333</div>
  115. </div>
  116. </body>
  117. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注