函数传参和实际应用
Posted tongguilin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了函数传参和实际应用相关的知识，希望对你有一定的参考价值。
函数传递参数
参数=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
以上是关于函数传参和实际应用的主要内容，如果未能解决你的问题，请参考以下文章