MooTools教程(4):函数和MooTools

今天开始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);

虽然这个初一看起来可能有些混乱，可是实际上却很是简单。若是你在两个数字之间使用加号（+），你就是把它们加在一块儿。若是你在任意组合的数字和字符串之间使用加号（+），那么就是把全部的东西做为字符串链接起来。

var two_parameter_function = function(first_number, second_number){
    // 取得first_number和second_number相加的和
    var third_number = first_number + second_number;
 
    // 显示结果
    alert(first_number + " plus " + second_number + " equals " + third_number);
}
 
window.addEvent('domready', function(){
two_parameter_function(10, 5);
});

返回值

在一个弹出对话框中显示一个函数的执行结果可能颇有用，可是有些时候你可能须要在其余地方用到这个结果。要完成这个任务，你须要使用函数中的return功能。下面的示例代码中，函数和上面的示例同样，不过这里不是弹出一个对话框，而是返回两个数字相加后的结果：

return third_number;

你会发现，咱们也在domready中作了更多的事情。为了显示这个结果，咱们把这个函数的返回值赋值给了一个名称为return_value的参数，而后把它显示在弹出对话框中。

var two_parameter_returning_function = function(first_number, second_number){
    var third_number = first_number + second_number;
    return third_number;
}
window.addEvent('domready', function(){
    var return_value = two_parameter_returning_function(10, 5);
    alert("return value is : " + return_value);
});

把函数做为参数

若是你看看MooTools的domready里面咱们包装的东西，你会注意到咱们把一个函数做为参数传递进去了：

window.addEvent('domready', function(){
/* 函数代码 */
});

一个像这样把函数做为一个参数传递进去的函数称为匿名函数：

function(){
    /* 函数代码 */
}

在第一篇教程的评论中，Boomstix指出了在domready中不使用匿名函数的一种替代方式。这种方式就是这样的：

// 创建一个要在domready时调用的函数
var domready_function(){
    /* 函数代码 */
}
 
// 把函数指定到domready事件
window.addEvent('domready', domready_function);

我不知道这两种方式在性能和功能性上的任何明显差异，所以我认为这基本上只是一个风格习惯而已。咱们会继续坚持咱们的方式，若是有任何人知道这些差异请告诉咱们。

代码示例

为了刺激你明天的食欲（和弥补今天对MooTools的缺乏），我写了一个没有什么意义的函数，可让你随意改变这个页面的背景：

var changeColor = function(){
    // 用来从输入框中得到颜色值
    // （请参考：
    // http://docs.mootools.net/Element/Element#Element:get）
    var red   = $('red').get('value');
    var green = $('green').get('value');
    var blue  = $('blue').get('value');
 
    // 确保每个东西都是整数
    // （请参考：
    // http://docs.mootools.net/Native/Number#Number:toInt）
    red   = red.toInt();
    green = green.toInt();
    blue  = blue.toInt();
 
    // 确保每个数字都在1到255之间
    // 若是有须要则取整
    // （请参考：
    // http://docs.mootools.net/Native/Number#Number:limit）
    red   = red.limit(1, 255);
    green = green.limit(1, 255);
    blue  = blue.limit(1, 255);
 
    // 取得十六进制代码
    // （请参考：
    // http://docs.mootools.net/Native/Array/#Array:rgbToHex）
    var color = [red, green, blue].rgbToHex(); 
 
    // 设置为该页面的背景色
    // （请参考：
    // http://docs.mootools.net/Element/Element.Style#Element:setStyle）
    $('body_wrap').setStyle('background', color);
 
}
 
var resetColor = function(){
    // 从新设置页面的背景色为白色
    // （请参考：
    // http://docs.mootools.net/Element/Element.Style#Element:setStyle）
    $('body_wrap').setStyle('background', '#fff');
}
 
window.addEvent('domready', function(){
    // 为按钮添加点击事件（明天咱们会讲这个）
    // （请参考：
    // http://docs.mootools.net/Element/Element.Event#Element:addEvent）
    $('change').addEvent('click', changeColor);
    $('reset').addEvent('click', resetColor);
});

延伸学习...

下载包含你学习所须要的全部东西的zip包

包含MooTools 1.2核心库、一个外部JavaScript文件、一个简单的html页面和一个css文件。

更多关于JavaScript函数的内容

JavaScript函数上的Quirksmode（怪异模式）

我没有很好的关于JavaScript函数的资源，若是有人知道的话请告诉我。

有关示例的文档

• Utilities/DomReady
• Number.toInt()
• Number.limit()
• Array.rgbToHex()
• Element.setStyle()
• Element.addEvent()