MooTools教程(4):函數和MooTools

2024-07-21 02:04:22

字體：大中小

來源：轉載

供稿：網友

今天開始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);
});

紅（r）
綠（g）
藍（b）

延伸學習...

下載包含你學習所需要的所有東西的zip包

包含mootools 1.2核心庫、一個外部javascript文件、一個簡單的html頁面和一個css文件。

更多關于javascript函數的內容

javascript函數上的quirksmode（怪異模式）

我沒有很好的關于javascript函數的資源，如果有人知道的話請告訴我。

有關示例的文檔

utilities/domready
number.toint()
number.limit()
array.rgbtohex()
element.setstyle()
element.addevent()

上一篇：MooTools教程(3):數組管理DOM元素

下一篇：MooTools教程(5):事件處理

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遺憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 媽媽：高考雖重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回應是否會直播帶貨：有人出100萬想和他合作！

2024-06-25 19:29:23

名校搶人名場面：清華、北大太拼了！

2024-06-25 19:22:14

男生高考語文滿分！網友：第一次聽說

2024-06-25 19:19:15

疑難解答

圖片精選

網友關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

MooTools教程(4):函數和MooTools

函數基礎

單個參數

多個參數

返回值

把函數作為參數

代碼示例

延伸學習...