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设置FieldSet展开与收缩
May 15 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 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
php discuz 主题表和回帖表的设计
2009/03/13 PHP
关于页面优化和伪静态
2009/10/11 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python实现控制台进度条功能
2016/01/04 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
浅谈Python中的模块
2020/06/10 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
美术国培研修感言
2014/02/12 职场文书
入党介绍人评语
2014/05/06 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
师范生见习报告
2014/10/31 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
分析Java中Map的遍历性能问题
2021/06/26 Java/Android