函数封装的传参、判断处理—— JS学习笔记2015-6-29(第70天)

2段相似的代码，如何封装成一个函数？

1)、先找出不同的地方；

2)、看看这些不同地方或者当成参数传递进去，或者做个判断；

 

数字是可以传递的，比较符号是无法传递的

 

封装前的代码：（有很多冗余、重复的地方）

 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 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
 8 </style>
 9 </head>
10 
11 <body>
12 
13 <input id="btn1" type="button" value="往后" />
14 <input id="btn2" type="button" value="往前" />
15 <div id="div1"></div>
16 
17 <script>
18 var oBtn1 = document.getElementById('btn1');
19 var oBtn2 = document.getElementById('btn2');
20 var oDiv = document.getElementById('div1');
21 
22 oBtn1.onclick = function () {
23     
24     clearInterval( oDiv.timer );
25     
26     oDiv.timer = setInterval(function () {
27         
28         var speed = parseInt(getStyle( oDiv, 'left' )) + -12;            // 步长
29         
30         if ( speed < 10 ) {
31             speed = 10;
32         }
33         
34         oDiv.style.left = speed + 'px';
35         
36         if ( speed == 10 ) {
37             clearInterval( oDiv.timer );
38         }
39         
40     }, 30);
41 };
42 
43 oBtn2.onclick = function () {
44     
45     clearInterval( oDiv.timer );
46     
47     oDiv.timer = setInterval(function () {
48         
49         var speed = parseInt(getStyle( oDiv, 'left' )) + 12;            // 步长
50         
51         if ( speed > 800 ) {
52             speed = 800;
53         }
54         
55         oDiv.style.left = speed + 'px';
56         
57         if ( speed == 800 ) {
58             clearInterval( oDiv.timer );
59         }
60         
61     }, 30);
62 };
63 
64 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
65 </script>
66 
67 </body>
68 </html>
View Code

封装后的代码：

 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 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; }
 8 </style>
 9 </head>
10 
11 <body>
12 
13 <input id="btn1" type="button" value="往后" />
14 <input id="btn2" type="button" value="往前" />
15 <div id="div1"></div>
16 
17 <script>
18 var oBtn1 = document.getElementById('btn1');
19 var oBtn2 = document.getElementById('btn2');
20 var oDiv = document.getElementById('div1');
21 
22 oBtn1.onclick = function () {
23     
24     doMove ( oDiv, -12, 10 );
25 
26 };
27 
28 oBtn2.onclick = function () {
29     
30     doMove ( oDiv, 12, 800 );
31     
32 };
33 
34 /*
35     oDiv 12        800        >
36     oDiv -12   -10        <
37     
38     doMove ( oDiv, 12, 800 );
39 */
40 
41 function doMove ( obj, dir, target ) {
42     clearInterval( obj.timer );
43     
44     obj.timer = setInterval(function () {
45         
46         var speed = parseInt(getStyle( obj, 'left' )) + dir;            // 步长
47         
48         if ( speed > target && dir > 0 ) {        // 往前跑
49             speed = target;
50         }
51         
52         if ( speed < target && dir < 0 ) {        // 往后跑
53             speed = target;
54         }
55         
56         obj.style.left = speed + 'px';
57         
58         if ( speed == target ) {
59             clearInterval( obj.timer );
60         }
61         
62     }, 30);
63 }
64 
65 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
66 </script>
67 
68 </body>
69 </html>
View Code

 

posted on 2015-06-29 23:22  张小国  阅读(435)  评论(0)  编辑  收藏  举报

导航