函数传参和实际应用—JS学习笔记2015-6-5（第49天）

函数传递参数

参数=JS的数据类型=>数字、字符串、布尔、函数、对象、未定义

传递有名字的函数，直接传递函数名就可以了。

fn1(100, 'px');
function fn1(a, b){
    // alert( a+b ); // 此时参数是数字和字符串
}

fn2('miaov');
fn2('妙味课堂');
function fn2(a){
   // alert(a.charAt(2)); // 会返回i，课  这里的参数是字符串，拥有字符串的属性特征，比如这里调用了charAt
}

参数是匿名函数的情况：

fn3(function(){alert(1);})

function fn3(fn){

fn(); // 此时返回1;

}

参数为有名字的函数：

function fn4(){

  alert(4) ;

}

fn3(fn4);

function fn3(fn){

  fn();

}

参数是对象：

fn5(window,document);

function fn5(w,d){

  w.onload = function(){

  d.body.innerHTML = 123; // d 就代表document，w代表window

 };

}

利用参数的传递，来判断数据类型：

fn1(100);
fn1('miaov');
fn1(function(){alert(1);});

function fn1(a){
    if(typeof a==='number'&& a===a){
        // 这里的条件判断是为了去掉NaN
        alert(a+20);
    }else if(typeof a === 'string'){
        alert(a.charAt(2));
    }else if(typeof a=== 'function'){
        a();
    }

}
// 每一次自己亲手写代码会发现产生不必要的错误，比如typeof 常常写成tpye

实际应用案例：

在项目当中或者页面当中，发现一些样式的实现原理是相同的，此时考虑使用函数来实现功能，而用不同的参数来传递进去，实现不同的效果即可：

 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 ul { padding:0; margin:0; }
 8 li { list-style:none; }
 9 body { background:#333; }
10 .box { width:400px; height:500px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; }
11 .box img { width:400px; height:500px; }
12 .box ul { width:40px; position:absolute; top:0; right:-50px; }
13 .box li { width:40px; height:40px; margin-bottom:4px; background:#666; }
14 .box .active { background:#FC3; }
15 .box span { top:0; }
16 .box p { bottom:0; margin:0; }
17 .box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
18 </style>
19 <script>
20 
21 /*
22     重用代码：
23         1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
24         2、把核心主程序实现，用函数包起来
25         3、把每组里不同的值找出来，通过传参实现
26 */
27 
28 window.onload = function (){
29     fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小宠物', '图片二', '图片三', '面具' ], 'onclick' );
30     fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.png' ], [ '图片二', '图片三', '面具' ], 'onmouseover' );
31 };
32 
33 function fnTab( id, arrUrl, arrText, evt ){
34     var oDiv = document.getElementById(id);
35     var oImg = oDiv.getElementsByTagName('img')[0];
36     var oSpan = oDiv.getElementsByTagName('span')[0];
37     var oP = oDiv.getElementsByTagName('p')[0];
38     var oUl = oDiv.getElementsByTagName('ul')[0];
39     var aLi = oUl.getElementsByTagName('li');
40     var num = 0;
41     
42     for( var i=0; i<arrUrl.length; i++ ){
43         oUl.innerHTML += '<li></li>';
44     }
45     
46     // 初始化
47     function fnTab(){
48         oImg.src = arrUrl[num];
49         oSpan.innerHTML = 1+num+' / '+arrUrl.length;
50         oP.innerHTML = arrText[num];
51         for( var i=0; i<aLi.length; i++ ){
52             aLi[i].className = '';
53         }
54         aLi[num].className = 'active';
55     }
56     fnTab();
57     
58     for( var i=0; i<aLi.length; i++ ){
59         aLi[i].index = i;            // 索引值
60         aLi[i][evt] = function (){  // evt 因为是参数，动态变化的，所以这里使用中括号括起来;
61             num = this.index;
62             fnTab();
63         };
64     }
65 }
66 </script>
67 </head>
68 
69 <body>
70 
71 <div id="pic1" class="box">
72     <img src="" />
73   <span>数量正在加载中……</span>
74   <p>文字说明正在加载中……</p>
75   <ul></ul>
76 </div>
77 
78 <div id="pic2" class="box">
79     <img src="" />
80   <span>数量正在加载中……</span>
81   <p>文字说明正在加载中……</p>
82   <ul></ul>
83 </div>
84 
85 </body>
86 </html>

View Code