MooTools教程(4):函数和MooTools

今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲，请先查看上一篇教程<《Mootools 1.2教程(3)——数组使用简介》。今天我们先不讲MooTools，而是讲一讲JavaScript中的函数（function）的基本知识。

但是，为了符合MooTools这个主题，你需要知道在哪里该使用MooTools的函数。此前，我们已经在我们的所有示例代码中，把代码都放在domready方法中。当我们需要把它放在domready的外面时，我们使用了函数（function）。在你在domready里面调用函数之前，函数并不会被执行。

一般来说，一种比较好的方式是尽可能地把你的函数代码都放在页面之外的某一个地方，然后通过JavaScript应用来调用它们。当你只是写代码玩玩，可能把所有的东西写在一个页面上更容易一些。在这个教程中，我们使用下面的约定：

虽然这个初一看起来可能有些混乱，但是实际上却非常简单。如果你在两个数字之间使用加号（+），你就是把它们加在一起。如果你在任意组合的数字和字符串之间使用加号（+），那么就是把所有的东西作为字符串连接起来。
返回值
在一个弹出对话框中显示一个函数的执行结果可能很有用，但是有些时候你可能需要在其他地方用到这个结果。要完成这个任务，你需要使用函数中的return功能。下面的示例代码中，函数和上面的示例一样，不过这里不是弹出一个对话框，而是返回两个数字相加后的结果：
把函数作为参数
如果你看看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);});