MooTools教程(4):函数和MooTools

http://www.itjxue.com  2015-08-06 23:19  来源:未知  点击次数: 

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

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

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

参考代码： [复制代码] [保存代码]
  1. <script type="text/javascript">
  2. /*
  3.  * 函数定义写在这里
  4.  */
  5.  
  6. window.addEvent('domready', function() {
  7.     /*
  8.      * 函数调用写在这里
  9.      */
  10. });
  11. </script>

所有的例子都遵循这个格式，当页面载入的时候（load）执行函数代码。在每个函数的下面，都有一个相应的按钮，你可以点击它们，然后看到结果。这是通过使用MooTools的事件处理来完成的，明天我们将会讲到这个。

函数基础

在JavaScript中，有几种方式来定义函数，由于我们的主题是讲解MooTools，因此我们将选择MooTools的首选方式。下面的示例是一个函数定义的开始。我们什么了一个变量，并命名为simple_function，并吧这个变量定义为一个函数：

参考代码： [复制代码] [保存代码]
  1. var simple_function = function(){

然后我们给这个函数增加了一个alert语句，当函数被调用的时候就会执行：

参考代码： [复制代码] [保存代码]
  1. alert('This is a simple function');

最后，我们以一个花括号结束这个函数的定义：

参考代码： [复制代码] [保存代码]
  1. }

这个关闭花括号看起来是一件非常简单的事情，但是很多时候要追踪这个问题却是一件很痛苦的事情。因此，适度地强迫对函数定义的关闭符号进行检查是个不错的主意。

在下面的例子中，我们把它们组合起来了。在声明这个函数之后，我们在页面加载后的domready事件里面添加了对这个函数的调用。可以点击例子下面的按钮查看调用函数simple_function();后的结果。

参考代码： [复制代码] [保存代码]
  1. // 定义simple_function为一个函数
  2. var simple_function = function(){
  3.     alert('This is a simple function');
  4. }
  5.  
  6. window.addEvent('domready', function() {
  7.     // 当页面加载后调用simple_function
  8.     simple_function();
  9. });

单个参数

虽然你有很多代码可以轻松地随时调用，这已经很有用了，但是如果你可以给它传递参数（信息）进行处理，这将会更有用。要在函数中使用参数，你需要在function后面的括号中添加一个变量，就像这样：

参考代码： [复制代码] [保存代码]
  1. var name_of_function = function(name_of_the_parameter){
  2.     /* 函数代码写在这里 */
  3. }

一旦你这样做了，在这个函数内部就可以使用这个变量了。尽管你可以给参数取任何你想要的名字，但是让参数名更有意义是个不错的选择。举个例子来说，如果你要传递一个小镇的名字，可能你把参数命名为town_name比其他更模糊的名字要好一些（比如user_input）。

在下面的例子中，我们定义了一个只带有一个参数的函数，并在弹出对话框中显示这个变量。请注意，信息的第一部分被单引号包含起来了，而参数没有。当你要把参数和硬编码的字符串连接在一起，你需要用加号（+）运算符把他们连接起来，就像下面一样：

参考代码： [复制代码] [保存代码]
  1. var single_parameter_function = function(parameter){
  2.     alert('the parameter is : ' + parameter);
  3. }
  4.  
  5. window.addEvent('domready', function(){
  6.         single_parameter_function('this is a parameter');
  7. });

多个参数

JavaScript没有限制在一个函数中可以定义的参数的个数。一般来说，要让传给函数的参数个数尽可能地少，这会使代码更具可读性。函数中定义的多个参数使用逗号分割，其它行为这和单个参数函数一样。下面的示例中的函数带有两个数字，并把它们的和赋值给第三个数字，就像这样：

参考代码： [复制代码] [保存代码]
  1. var third_number = first_number + second_number;

这里加号（+）运算符的使用和把这些结果连接成字符串略有一些不同：

参考代码： [复制代码] [保存代码]
  1. alert(first_number + " plus " + second_number + " equals " + third_number);

虽然这个初一看起来可能有些混乱，但是实际上却非常简单。如果你在两个数字之间使用加号（+），你就是把它们加在一起。如果你在任意组合的数字和字符串之间使用加号（+），那么就是把所有的东西作为字符串连接起来。

参考代码： [复制代码] [保存代码]
  1. var two_parameter_function = function(first_number, second_number){
  2.     // 取得first_number和second_number相加的和
  3.     var third_number = first_number + second_number;
  4.  
  5.     // 显示结果
  6.     alert(first_number + " plus " + second_number + " equals " + third_number);
  7. }
  8.  
  9. window.addEvent('domready', function(){
  10. two_parameter_function(10, 5);
  11. });

返回值

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

参考代码： [复制代码] [保存代码]
  1. return third_number;

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

参考代码： [复制代码] [保存代码]
  1. var two_parameter_returning_function = function(first_number, second_number){
  2.     var third_number = first_number + second_number;
  3.     return third_number;
  4. }
  5. window.addEvent('domready', function(){
  6.     var return_value = two_parameter_returning_function(10, 5);
  7.     alert("return value is : " + return_value);
  8. });

把函数作为参数

如果你看看MooTools的domready里面我们包装的东西，你会注意到我们把一个函数作为参数传递进去了：

参考代码： [复制代码] [保存代码]
  1. window.addEvent('domready', function(){
  2. /* 函数代码 */
  3. });

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

参考代码： [复制代码] [保存代码]
  1. function(){
  2.     /* 函数代码 */
  3. }

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

参考代码： [复制代码] [保存代码]
  1. // 建立一个要在domready时调用的函数
  2. var domready_function(){
  3.     /* 函数代码 */
  4. }
  5.  
  6. // 把函数指定到domready事件
  7. window.addEvent('domready', domready_function);

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

代码示例

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

参考代码： [复制代码] [保存代码]
  1. var changeColor = function(){
  2.     // 用来从输入框中获得颜色值
  3.     // （请参考：
  4.     // http://docs.mootools.net/Element/Element#Element:get）
  5.     var red   = $('red').get('value');
  6.     var green = $('green').get('value');
  7.     var blue  = $('blue').get('value');
  8.  
  9.     // 确保每一个东西都是整数
  10.     // （请参考：
  11.     // http://docs.mootools.net/Native/Number）
  12.     red   = red.toInt();
  13.     green = green.toInt();
  14.     blue  = blue.toInt();
  15.  
  16.     // 确保每一个数字都在1到255之间
  17.     // 如果有需要则取整
  18.     // （请参考：
  19.     // http://docs.mootools.net/Native/Number）
  20.     red   = red.limit(1, 255);
  21.     green = green.limit(1, 255);
  22.     blue  = blue.limit(1, 255);
  23.  
  24.     // 取得十六进制代码
  25.     // （请参考：
  26.     // http://docs.mootools.net/Native/Array/）
  27.     var color = [red, green, blue].rgbToHex(); 
  28.  
  29.     // 设置为该页面的背景色
  30.     // （请参考：
  31.     // http://docs.mootools.net/Element/Element.Style）
  32.     $('body_wrap').setStyle('background', color);
  33.  
  34. }
  35.  
  36. var resetColor = function(){
  37.     // 重新设置页面的背景色为白色
  38.     // （请参考：
  39.     // http://docs.mootools.net/Element/Element.Style）
  40.     $('body_wrap').setStyle('background', '#fff');
  41. }
  42.  
  43. window.addEvent('domready', function(){
  44.     // 为按钮添加点击事件（明天我们会讲这个）
  45.     // （请参考：
  46.     // http://docs.mootools.net/Element/Element.Event）
  47.     $('change').addEvent('click', changeColor);
  48.     $('reset').addEvent('click', resetColor);
  49. });


红（R）
绿（G）
蓝（B）

延伸学习...

下载包含你学习所需要的所有东西的zip包

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

更多关于JavaScript函数的内容

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

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

有关示例的文档

(责任编辑：IT教学网)

更多

阅读排行

推荐Javascript/Ajax文章

最新更新Javascript/Ajax