|
|
但是，為了符合MooTools這個主題，你需要知道在哪里該使用MooTools的函數(shù)。此前，我們已經(jīng)在我們的所有示例代碼中，把代碼都放在domready方法中。當(dāng)我們需要把它放在domready的外面時，我們使用了函數(shù)（function）。在你在domready里面調(diào)用函數(shù)之前，函數(shù)并不會被執(zhí)行。
一般來說，一種比較好的方式是盡可能地把你的函數(shù)代碼都放在頁面之外的某一個地方，然后通過JavaScript應(yīng)用來調(diào)用它們。當(dāng)你只是寫代碼玩玩，可能把所有的東西寫在一個頁面上更容易一些。在這個教程中，我們使用下面的約定：
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
/*
* 函數(shù)定義寫在這里
*/
window.addEvent('domready', function() {
/*
* 函數(shù)調(diào)用寫在這里
*/
});
</script>
所有的例子都遵循這個格式，當(dāng)頁面載入的時候（load）執(zhí)行函數(shù)代碼。在每個函數(shù)的下面，都有一個相應(yīng)的按鈕，你可以點擊它們，然后看到結(jié)果。這是通過使用MooTools的事件處理來完成的，明天我們將會講到這個。
函數(shù)基礎(chǔ)
在JavaScript中，有幾種方式來定義函數(shù)，由于我們的主題是講解MooTools，因此我們將選擇MooTools的首選方式。下面的示例是一個函數(shù)定義的開始。我們什么了一個變量，并命名為simple_function，并吧這個變量定義為一個函數(shù)：
參考代碼：
var simple_function = function(){
然后我們給這個函數(shù)增加了一個alert語句，當(dāng)函數(shù)被調(diào)用的時候就會執(zhí)行：
參考代碼：
alert('This is a simple function');
最后，我們以一個花括號結(jié)束這個函數(shù)的定義：
參考代碼：
}
這個關(guān)閉花括號看起來是一件非常簡單的事情，但是很多時候要追蹤這個問題卻是一件很痛苦的事情。因此，適度地強迫對函數(shù)定義的關(guān)閉符號進行檢查是個不錯的主意。
在下面的例子中，我們把它們組合起來了。在聲明這個函數(shù)之后，我們在頁面加載后的domready事件里面添加了對這個函數(shù)的調(diào)用。可以點擊例子下面的按鈕查看調(diào)用函數(shù)simple_function();后的結(jié)果。
參考代碼：
復(fù)制代碼 代碼如下:
// 定義simple_function為一個函數(shù)
var simple_function = function(){
alert('This is a simple function');
}
window.addEvent('domready', function() {
// 當(dāng)頁面加載后調(diào)用simple_function
simple_function();
});
單個參數(shù)
雖然你有很多代碼可以輕松地隨時調(diào)用，這已經(jīng)很有用了，但是如果你可以給它傳遞參數(shù)（信息）進行處理，這將會更有用。要在函數(shù)中使用參數(shù)，你需要在function后面的括號中添加一個變量，就像這樣：
參考代碼：
復(fù)制代碼 代碼如下:
var name_of_function = function(name_of_the_parameter){
/* 函數(shù)代碼寫在這里 */
}
一旦你這樣做了，在這個函數(shù)內(nèi)部就可以使用這個變量了。盡管你可以給參數(shù)取任何你想要的名字，但是讓參數(shù)名更有意義是個不錯的選擇。舉個例子來說，如果你要傳遞一個小鎮(zhèn)的名字，可能你把參數(shù)命名為town_name比其他更模糊的名字要好一些（比如user_input）。
在下面的例子中，我們定義了一個只帶有一個參數(shù)的函數(shù)，并在彈出對話框中顯示這個變量。請注意，信息的第一部分被單引號包含起來了，而參數(shù)沒有。當(dāng)你要把參數(shù)和硬編碼的字符串連接在一起，你需要用加號（+）運算符把他們連接起來，就像下面一樣：
參考代碼：
復(fù)制代碼 代碼如下:
var single_parameter_function = function(parameter){
alert('the parameter is : ' + parameter);
}
window.addEvent('domready', function(){
single_parameter_function('this is a parameter');
});
多個參數(shù)
JavaScript沒有限制在一個函數(shù)中可以定義的參數(shù)的個數(shù)。一般來說，要讓傳給函數(shù)的參數(shù)個數(shù)盡可能地少，這會使代碼更具可讀性。函數(shù)中定義的多個參數(shù)使用逗號分割，其它行為這和單個參數(shù)函數(shù)一樣。下面的示例中的函數(shù)帶有兩個數(shù)字，并把它們的和賦值給第三個數(shù)字，就像這樣：
參考代碼：
var third_number = first_number + second_number;
這里加號（+）運算符的使用和把這些結(jié)果連接成字符串略有一些不同：
參考代碼：
alert(first_number + " plus " + second_number + " equals " + third_number);
雖然這個初一看起來可能有些混亂，但是實際上卻非常簡單。如果你在兩個數(shù)字之間使用加號（+），你就是把它們加在一起。如果你在任意組合的數(shù)字和字符串之間使用加號（+），那么就是把所有的東西作為字符串連接起來。
參考代碼：
復(fù)制代碼 代碼如下:
var two_parameter_function = function(first_number, second_number){
// 取得first_number和second_number相加的和
var third_number = first_number + second_number;
// 顯示結(jié)果
alert(first_number + " plus " + second_number + " equals " + third_number);
}
window.addEvent('domready', function(){
two_parameter_function(10, 5);
});
返回值
在一個彈出對話框中顯示一個函數(shù)的執(zhí)行結(jié)果可能很有用，但是有些時候你可能需要在其他地方用到這個結(jié)果。要完成這個任務(wù)，你需要使用函數(shù)中的return功能。下面的示例代碼中，函數(shù)和上面的示例一樣，不過這里不是彈出一個對話框，而是返回兩個數(shù)字相加后的結(jié)果：
參考代碼：
return third_number;
你會發(fā)現(xiàn)，我們也在domready中做了更多的事情。為了顯示這個結(jié)果，我們把這個函數(shù)的返回值賦值給了一個名稱為return_value的參數(shù)，然后把它顯示在彈出對話框中。
參考代碼：
復(fù)制代碼 代碼如下:
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);
});
把函數(shù)作為參數(shù)
如果你看看MooTools的domready里面我們包裝的東西，你會注意到我們把一個函數(shù)作為參數(shù)傳遞進去了：
參考代碼：
window.addEvent('domready', function(){
/* 函數(shù)代碼 */
});
一個像這樣把函數(shù)作為一個參數(shù)傳遞進去的函數(shù)稱為匿名函數(shù)：
參考代碼：
function(){
/* 函數(shù)代碼 */
}
在第一篇教程的評論中，Boomstix指出了在domready中不使用匿名函數(shù)的一種替代方式。這種方式就是這樣的：
參考代碼：
// 建立一個要在domready時調(diào)用的函數(shù)
var domready_function(){
/* 函數(shù)代碼 */
}
// 把函數(shù)指定到domready事件
window.addEvent('domready', domready_function);
我不知道這兩種方式在性能和功能性上的任何明顯差別，因此我認為這基本上只是一個風(fēng)格習(xí)慣而已。我們會繼續(xù)堅持我們的方式，如果有任何人知道這些差別請告訴我們。
代碼示例
為了刺激你明天的食欲（和彌補今天對MooTools的缺少），我寫了一個沒有什么意義的函數(shù)，可以讓你隨意改變這個頁面的背景：
參考代碼：
復(fù)制代碼 代碼如下:
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');
// 確保每一個東西都是整數(shù)
// （請參考：
// http://docs.mootools.NET/Native/Number#Number:toInt）
red = red.toInt();
green = green.toInt();
blue = blue.toInt();
// 確保每一個數(shù)字都在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();
// 設(shè)置為該頁面的背景色
// （請參考：
// http://docs.mootools.NET/Element/Element.Style#Element:setStyle）
$('body_wrap').setStyle('background', color);
}
var resetColor = function(){
// 重新設(shè)置頁面的背景色為白色
// （請參考：
// 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);
});
延伸學(xué)習(xí)...
下載包含你學(xué)習(xí)所需要的所有東西的zip包
包含MooTools 1.2核心庫、一個外部JavaScript文件、一個簡單的html頁面和一個css文件。
更多關(guān)于JavaScript函數(shù)的內(nèi)容
JavaScript函數(shù)上的Quirksmode（怪異模式）
我沒有很好的關(guān)于JavaScript函數(shù)的資源，如果有人知道的話請告訴我。
有關(guān)示例的文檔
- Utilities/DomReady
- Number.toInt()
- Number.limit()
- Array.rgbToHex()
- Element.setStyle()
- Element.addEvent()
JavaScript技術(shù)：Mootools 1.2教程 函數(shù)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
