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 相关文章推荐
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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设计模式之单例模式使用示例
2014/01/20 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
python实现随机密码字典生成器示例
2014/04/09 Python
python查询mysql,返回json的实例
2018/03/26 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
有创意的广告词
2014/03/18 职场文书
二手房买卖协议书
2014/04/10 职场文书
给病人的慰问信
2015/03/23 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python