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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP分页显示制作详细讲解
2006/12/05 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
Python导入oracle数据的方法
2015/07/10 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python实现函数极小值
2019/07/10 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
社区党员志愿服务活动方案
2014/08/18 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
Go语言grpc和protobuf
2022/04/13 Golang
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby