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