单个参数
虽然你有很多代码可以轻松地随时调用,这已经很有用了,但是如果你可以给它传递参数(信息)进行处理,这将会更有用。要在函数中使用参数,你需要在function后面的括号中添加一个变量,就像这样:
参考代码: name_of_function = (name_of_the_parameter){ }一旦你这样做了,在这个函数内部就可以使用这个变量了。尽管你可以给参数取任何你想要的名字,但是让参数名更有意义是个不错的选择。举个例子来说,如果你要传递一个小镇的名字,可能你把参数命名为town_name比其他更模糊的名字要好一些(比如user_input)。
在下面的例子中,我们定义了一个只带有一个参数的函数,并在弹出对话框中显示这个变量。请注意,信息的第一部分被单引号包含起来了,而参数没有。当你要把参数和硬编码的字符串连接在一起,你需要用加号(+)运算符把他们连接起来,就像下面一样:
参考代码: single_parameter_function = (parameter){ alert( + parameter); } window.addEvent(, (){ single_parameter_function(); });多个参数
JavaScript没有限制在一个函数中可以定义的参数的个数。一般来说,要让传给函数的参数个数尽可能地少,这会使代码更具可读性。函数中定义的多个参数使用逗号分割,其它行为这和单个参数函数一样。下面的示例中的函数带有两个数字,并把它们的和赋值给第三个数字,就像这样:
参考代码: third_number = first_number + second_number;这里加号(+)运算符的使用和把这些结果连接成字符串略有一些不同:
参考代码: alert(first_number + + second_number + + third_number);虽然这个初一看起来可能有些混乱,但是实际上却非常简单。如果你在两个数字之间使用加号(+),你就是把它们加在一起。如果你在任意组合的数字和字符串之间使用加号(+),那么就是把所有的东西作为字符串连接起来。
参考代码: two_parameter_function = (first_number, second_number){ third_number = first_number + second_number; alert(first_number + + second_number + + third_number); } window.addEvent(, (){ two_parameter_function(, ); });返回值
在一个弹出对话框中显示一个函数的执行结果可能很有用,但是有些时候你可能需要在其他地方用到这个结果。要完成这个任务,你需要使用函数中的return功能。下面的示例代码中,函数和上面的示例一样,不过这里不是弹出一个对话框,而是返回两个数字相加后的结果:
参考代码: third_number;你会发现,我们也在domready中做了更多的事情。为了显示这个结果,我们把这个函数的返回值赋值给了一个名称为return_value的参数,然后把它显示在弹出对话框中。
参考代码: two_parameter_returning_function = (first_number, second_number){ third_number = first_number + second_number; third_number; } window.addEvent(, (){ return_value = two_parameter_returning_function(, ); alert( + return_value); });把函数作为参数
如果你看看MooTools的domready里面我们包装的东西,你会注意到我们把一个函数作为参数传递进去了:
参考代码: window.addEvent(, (){ });一个像这样把函数作为一个参数传递进去的函数称为匿名函数:
参考代码: (){ }在第一篇教程的评论中,Boomstix指出了在domready中不使用匿名函数的一种替代方式。这种方式就是这样的:
参考代码: domready_function(){ } window.addEvent(, domready_function);我不知道这两种方式在性能和功能性上的任何明显差别,因此我认为这基本上只是一个风格习惯而已。我们会继续坚持我们的方式,如果有任何人知道这些差别请告诉我们。
代码示例为了刺激你明天的食欲(和弥补今天对MooTools的缺少),我写了一个没有什么意义的函数,可以让你随意改变这个页面的背景:
参考代码: changeColor = (){ red = $().get(); green = $().get(); blue = $().get(); red = red.toInt(); green = green.toInt(); blue = blue.toInt(); red = red.limit(, ); green = green.limit(, ); blue = blue.limit(, ); color = [red, green, blue].rgbToHex(); $().setStyle(, color); } resetColor = (){ $().setStyle(, ); } window.addEvent(, (){ $().addEvent(, changeColor); $().addEvent(, resetColor); });
红(R)
绿(G)
蓝(B)
包含MooTools 1.2核心库、一个外部JavaScript文件、一个简单的html页面和一个css文件。
更多关于JavaScript函数的内容
我没有很好的关于JavaScript函数的资源,如果有人知道的话请告诉我。
有关示例的文档