JavaScript 面向对象(二) —— 案例篇 JavaScript 面向对象(三) —— 高级篇

前端开发作者： 2024-08-26 09:05:01

看案例前可以先看看基础篇： JavaScript 面向对象(一) —— 基础篇案例——面向对象的选项卡：把面向过程的程序一步步改成面向对象的形式，使其能够更加的通用(但是通用的东西，一般会

 1 <!DOCTYPE html>
 2 <html 3 head 4     style 5         #tabBox input {
 6             background: #F6F3F3;
 7             border 1px solid #FF0000 8         }
 9         #tabBox .active 10  #E9D4D411         12         #tabBox div 13             width300px; 
14             height250px15             displaynone16             padding 10px17 18 19         20     </21     meta charset="utf-8" />
22     title>选项卡23     script24         window.onload=function(){
25             var tabBox  document.getElementById('tabBox);
26              tabBtn  tabBox.getElementsByTagName(input27              tabDiv div28             
29             for( i0;i<tabBtn.length;i++){
30                 tabBtn[i].index  i;
31                 tabBtn[i].onclick =  (){
32                      j;jtabBtn.length;j33                         tabBtn[j].className'';
34                         tabDiv[j].style.display35                     }
36                     this.classNameactive37                     tabDiv[.index].style.displayblock38                 };
39             }
40         };
41     42 43 
44 body45     div id="tabBox"46         input type="button" value="游戏" class="active" 47         ="旅行" 48         ="音乐" 49         ="display:block;">GTA5、孤岛惊魂div50         >澳大利亚、西藏51         >暗里着迷、一生有你52     53 54 >

24         //将在嵌套函数里的变量提取到全局中
25         null26         27         
28         window.onload             tabBtn             tabDiv 32             
33             35                 此处调用函数即可
36  clickBtn;
39         
40         将嵌套函数提取到全局中
41          clickBtn(){
42             43                 tabBtn[j].className44                 tabDiv[j].style.display45 46             47             tabDiv[48 49         
50     51 52 
54     55         56         57         58         59         60         61     62 63 >

24         
25  tab new Tab("27         }
28     
29         /**
         * 将之前window.onload里的代码提到一个构造函数里
         * [可以将这个Tab构造函数想象成一个Tab类]
32          * @param {Object} id：选项卡id以参数的形式传入
33          */
34          Tab(id){
35              document.getElementById(id);
36             将之前的全局变量变为对象的属性
37             .tabBtn 38             .tabDiv 39             
40             .tabBtn.length;i41                 .tabBtn[i].index 42                 
43                 此处这种方式调用函数，已经将clickBtn的所属变成this.tabBtn[i]
44                 .tabBtn[i].onclick .clickBtn;
46 47         将之前的全局函数添加到构造函数的原型里，作为对象的一个方法
        Tab.prototype.clickBtn 49             alert(this); HTMLInputElement
50             .tabBtn.length;j51                 .tabBtn[j].className52                 .tabDiv[j].style.display53 54             55             .tabDiv[56 57         
58     59 60 
61 62     63         64         65         66         67         68         69     70 71 >

         * 选项卡
         * @param {Object} id：选项卡id
32          33         34             35             
38             
39             40                 将this保存成一个变量，就可以在下面代码中调用对象的方法了
42                  _this 此处这种方式调用函数，就不会改变clickBtn方法的所属关系
45                     注意此处不能直接使用this，this指向this.tabBtn[i]
                    _this.clickBtn();
49 50         点击选项卡按钮
51 52 ); Object
53             54                 55                 57             58             59 60         
63 
64 65     69         70         71         72     73 74 >

43                     注意参数this代表的是this.tabBtn[i]，即input按钮
                    _this.clickBtn(48         将点击的按钮以参数的形式传入
(btn){
54             btn.className.tabDiv[btn.index].style.display>

/* * 选项卡
 * @param {Object} id 选项卡id
 4   5 function 6     var tabBox = 7     this.tabBtn = tabBox.getElementsByTagName('input' 8     this.tabDiv = tabBox.getElementsByTagName('div' 9     
10     for(var i=0;i<this.tabBtn.length;i++11         this.tabBtn[i].index =12         var _this = this13         this.tabBtn[i].onclick = 14             _this.clickBtn(15 16     }
17 };
18 19  * 为Tab原型添加点击选项卡方法
20  * @param {Object} btn 点击的按钮
21  22 Tab.prototype.clickBtn = var j=0;j<this.tabBtn.length;j++24         this.tabBtn[j].className=''25         this.tabDiv[j].style.display='none'26 27     btn.className='active'28     this.tabDiv[btn.index].style.display='block'29 };

        .tab input         .tab .active         .tab div <!-- 引入tab.js -->
24     script ="text/javascript" src="../js/tab.js" ></25     26         
28              tab1 tabBox129             
30              tab2 tabBox232     
33     34 35 
36 37     class="tab" id="tabBox1"38         39         40         41         42         43         44     br 46     ="tabBox2"="技术"="工具" ="网站" >Java、Spring>Eclipse、HBuilder52         >博客园、CSD53     55 










 3     ="UTF-8"  5          6             
 7              Person(name){
 8                 .name  name;
 9                 定时器
                setInterval(.showName,300011             Person.prototype.showName                 alert(window
姓名：+.name);
16             
17              p1  Person(jiangzhou18             
19         21 >






 9                 
10                 11                 
                    _this.showName();
                },1)">//[Object Object]
.name); 姓名：jianghzou
19 20             
21             22             
23         25 >






 4         ="UTF-8"            #box                 width 100px 8                 height                background blue                position absolute11             >拖拽14         15              oBox16              disX disY            window.onload20                 oBoxdocument.getElementById(box21                 
22                 oBox.onmousedownfnDown;
23             };
24             鼠标按下事件
 fnDown(ev){
26                  oEvent  ev||event;
                disX  oEvent.clientX - oBox.offsetLeft;
                disY  oEvent.clientY  oBox.offsetTop;
29                 
                document.onmousemove  fnMove;
                document.onmouseup  fnUp;
鼠标移动事件
 fnMove(ev){
 oEventev36                 
                oBox.style.left  disX + px                oBox.style.top  disY 鼠标抬起事件
41              fnUp(){
42 45         47 
48 49     ="box"50 >




 * 拖拽
 * @param {Object} id div的id
 Drag(id){
this.oBox =this.disX = 0this.disY = 011     
12     this.oBox.onmousedown = 13         _this.fnDown();
14 }
//鼠标按下
17 Drag.prototype.fnDown = (ev){
18     var oEvent = ev || event;
19     
this.disX = oEvent.clientX - .oBox.offsetLeft;
this.disY = oEvent.clientY - .oBox.offsetTop;
22     
24     
25     document.onmousemove =         _this.fnMove();
27     };
28     document.onmouseup = 29         _this.fnUp();
30 31 32 鼠标移动
33 Drag.prototype.fnMove = 34     var oEvent= ev ||35     
36     this.oBox.style.left = oEvent.clientX - this.disX + 'px'this.oBox.style.top = oEvent.clientY - this.disY + 'px'38 39 鼠标抬起
40 Drag.prototype.fnUp = 41     document.onmousemove = null42     document.onmouseup = 43 }



            div  8              9         10         ="../js/drag.js"             window.onload 14                  drag1  Drag(box115                 
16                 box218         19     20 
="box1" style="background: red;width: 200px;height: 200px;"23     
="box2"="background: blue;width: 100px;height: 300px;"