Mootools 1.2教程 函数(2)


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(){
// 用来从输入框中获得颜色值
// (请参考:
// #Element:get)
var red = $('red').get('value');
var green = $('green').get('value');
var blue = $('blue').get('value');
// 确保每一个东西都是整数
// (请参考:
// #Number:toInt)
red = red.toInt();
green = green.toInt();
blue = blue.toInt();
// 确保每一个数字都在1到255之间
// 如果有需要则取整
// (请参考:
// #Number:limit)
red = red.limit(1, 255);
green = green.limit(1, 255);
blue = blue.limit(1, 255);
// 取得十六进制代码
// (请参考:
// #Array:rgbToHex)
var color = [red, green, blue].rgbToHex();
// 设置为该页面的背景色
// (请参考:
// #Element:setStyle)
$('body_wrap').setStyle('background', color);
}
var resetColor = function(){
// 重新设置页面的背景色为白色
// (请参考:
// #Element:setStyle)
$('body_wrap').setStyle('background', '#fff');
}
window.addEvent('domready', function(){
// 为按钮添加点击事件(明天我们会讲这个)
// (请参考:
// #Element:addEvent)
$('change').addEvent('click', changeColor);
$('reset').addEvent('click', resetColor);
});


延伸学习...

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

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

更多关于JavaScript函数的内容

JavaScript函数上的Quirksmode(怪异模式)

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

有关示例的文档

Utilities/DomReady

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyxyz.html