Mootools 1.2教程 函数


Posted in Javascript onSeptember 15, 2009

今天开始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()
Javascript 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 #Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 #Javascript
MooTools 1.2介绍
Sep 14 #Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 #Javascript
JavaScript 函数调用规则
Sep 14 #Javascript
prototype与jquery下Ajax实现的差别
Sep 13 #Javascript
JS 参数传递的实际应用代码分析
Sep 13 #Javascript
You might like
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
JS画线(实例代码)
2013/11/20 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
详解python Todo清单实战
2018/11/01 Python
Python中安装easy_install的方法
2018/11/18 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
焊接专业毕业生求职信
2013/10/01 职场文书
科室工作个人总结的自我评价
2013/10/29 职场文书
师范大学毕业自我鉴定
2013/11/21 职场文书
简历上的自我评价
2014/02/03 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
聊聊Python String型列表求最值的问题
2022/01/18 Python