今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲,请先查看上一篇教程《Mootools 1.2教程(3)——数组使用简介》。今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识。
但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数。此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中。当我们需要把它放在domready的外面时,我们使用了函数(function)。在你在domready里面调用函数之前,函数并不会被执行。
一般来说,一种比较好的方式是尽可能地把你的函数代码都放在页面之外的某一个地方,然后通过JavaScript应用来调用它们。当你只是写代码玩玩,可能把所有的东西写在一个页面上更容易一些。在这个教程中,我们使用下面的约定:
复制代码 代码如下:
<script type="text/javascript">
/*
* 函数定义写在这里
*/
window.addEvent('domready', function() {
/*
* 函数调用写在这里
*/
});
</script>
所有的例子都遵循这个格式,当页面载入的时候(load)执行函数代码。在每个函数的下面,都有一个相应的按钮,你可以点击它们,然后看到结果。这是通过使用MooTools的事件处理来完成的,明天我们将会讲到这个。
函数基础
在JavaScript中,有几种方式来定义函数,由于我们的主题是讲解MooTools,因此我们将选择MooTools的首选方式。下面的示例是一个函数定义的开始。我们什么了一个变量,并命名为simple_function,并吧这个变量定义为一个函数:
参考代码:
var simple_function = function(){
然后我们给这个函数增加了一个alert语句,当函数被调用的时候就会执行:
参考代码:
alert('This is a simple function');
最后,我们以一个花括号结束这个函数的定义:
参考代码:
}
这个关闭花括号看起来是一件非常简单的事情,但是很多时候要追踪这个问题却是一件很痛苦的事情。因此,适度地强迫对函数定义的关闭符号进行检查是个不错的主意。
在下面的例子中,我们把它们组合起来了。在声明这个函数之后,我们在页面加载后的domready事件里面添加了对这个函数的调用。可以点击例子下面的按钮查看调用函数simple_function();后的结果。
参考代码:
复制代码 代码如下:
// 定义simple_function为一个函数
var simple_function = function(){
alert('This is a simple function');
}
window.addEvent('domready', function() {
// 当页面加载后调用simple_function
simple_function();
});
单个参数
虽然你有很多代码可以轻松地随时调用,这已经很有用了,但是如果你可以给它传递参数(信息)进行处理,这将会更有用。要在函数中使用参数,你需要在function后面的括号中添加一个变量,就像这样:
参考代码:
复制代码 代码如下:
var name_of_function = function(name_of_the_parameter){
/* 函数代码写在这里 */
}
一旦你这样做了,在这个函数内部就可以使用这个变量了。尽管你可以给参数取任何你想要的名字,但是让参数名更有意义是个不错的选择。举个例子来说,如果你要传递一个小镇的名字,可能你把参数命名为town_name比其他更模糊的名字要好一些(比如user_input)。
在下面的例子中,我们定义了一个只带有一个参数的函数,并在弹出对话框中显示这个变量。请注意,信息的第一部分被单引号包含起来了,而参数没有。当你要把参数和硬编码的字符串连接在一起,你需要用加号(+)运算符把他们连接起来,就像下面一样:
参考代码:
复制代码 代码如下:
var single_parameter_function = function(parameter){
alert('the parameter is : ' + parameter);
}
window.addEvent('domready', function(){
single_parameter_function('this is a parameter');
});
多个参数
JavaScript没有限制在一个函数中可以定义的参数的个数。一般来说,要让传给函数的参数个数尽可能地少,这会使代码更具可读性。函数中定义的多个参数使用逗号分割,其它行为这和单个参数函数一样。下面的示例中的函数带有两个数字,并把它们的和赋值给第三个数字,就像这样:
参考代码:
var third_number = first_number + second_number;
这里加号(+)运算符的使用和把这些结果连接成字符串略有一些不同:
参考代码:
alert(first_number + " plus " + second_number + " equals " + third_number);
虽然这个初一看起来可能有些混乱,但是实际上却非常简单。如果你在两个数字之间使用加号(+),你就是把它们加在一起。如果你在任意组合的数字和字符串之间使用加号(+),那么就是把所有的东西作为字符串连接起来。
参考代码:
复制代码 代码如下: