Mootools 1.2教程 定時(shí)器和哈希簡介
更新時(shí)間：2009年09月15日 21:40:12 作者：
在今天的教程中，我們將關(guān)注兩塊內(nèi)容：第一個(gè)就是.periodical();方法，然后我們再對hash做一個(gè)簡介。
定時(shí)器能比它表面看起來做更多的事情——定時(shí)能定期地觸發(fā)一個(gè)函數(shù)。另一方面，hash則是鍵值對（key/value）的集合。如果你對hash還不熟悉現(xiàn)在也不要著急——我們今天就會(huì)做一個(gè)快速簡要的介紹，并且會(huì)提供一些延伸閱讀的相關(guān)鏈接。就像MooTools中的所有東西一樣，一旦你看到它的正確用法，它使用起來就非常的簡單，并且不可思議的有用。
.periodical()函數(shù)
基本用法
使用這個(gè)方法你唯一要做的就是在一個(gè)函數(shù)的結(jié)尾添加.periodical();，那樣你的函數(shù)就會(huì)定時(shí)地觸發(fā)。和以前的一樣，有幾個(gè)東西你是需要定義的。對于初學(xué)者，你需要定義一個(gè)你需要使用定時(shí)器的函數(shù)，還有你需要它多久觸發(fā)一次（以毫秒為單位）。
參考代碼：
var periodicalFunction = function(){
alert('again');
}
window.addEvent('domready', function() {
// 結(jié)尾的數(shù)字決定了這個(gè)函數(shù)觸發(fā)的時(shí)間間隔，以毫秒為單位
var periodicalFunctionVar = periodicalFunction.periodical(100);
});
內(nèi)置的.bind()方法
.periodical()方法包含了一個(gè)非常好的特性——它可以自動(dòng)地綁定第二個(gè)參數(shù)。舉個(gè)例子，如果你想從domready的外面?zhèn)鬟f一個(gè)參數(shù)，你只需要把它作為第二個(gè)參數(shù)傳進(jìn)去，你就可以把它綁定到你要定期觸發(fā)的函數(shù)上了。
參考代碼：
window.addEvent('domready', function() {
// 給一個(gè)變量賦值
var passedVar = $('elementID');
// 現(xiàn)在periodicalFunction就可以使用"this"來引用"passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});
停止一個(gè)定時(shí)觸發(fā)的函數(shù)
$clear()
一旦你初始化了一個(gè)定時(shí)觸發(fā)的函數(shù)（就像我們上面所做的那樣），如果你想停止它，你可以使用$clear();方法，它使用起來非常簡單：
參考代碼： [復(fù)制代碼] [保存代碼]
// 我們傳遞那個(gè)我們使用了定時(shí)器函數(shù)的定時(shí)器變量
$clear(periodicalFunctionVar);
代碼示例
為把這所有的連貫起來，我們就用我們目前學(xué)過的一些東西（也有一些是沒有學(xué)過的）來創(chuàng)建一個(gè)定時(shí)器。首先，建立一個(gè)定時(shí)器的HTML頁面，我們還需要一個(gè)開始按鈕，一個(gè)停止按鈕，還有一個(gè)重置按鈕。另外，我們還要?jiǎng)?chuàng)建一個(gè)條形塊，它可以隨著時(shí)間慢慢變長。最后，我們還需要一個(gè)地方來顯示當(dāng)前已經(jīng)運(yùn)行的時(shí)間。
參考代碼：
<button id="timer_start">start</button>
<button id="timer_stop">pause</button>
<button id="timer_reset">reset</button>
<div id="timper_bar_wrap">
<div id="timer_bar"> </div>
</div>
<div id="timer_display">0</div>
現(xiàn)在該是MooTools的代碼了：
參考代碼：
var timerFunction = function(){
// 每次當(dāng)這個(gè)函數(shù)被調(diào)用時(shí)
// 變量currentTime就會(huì)增加一
// 同時(shí)要注意一下"this.counter"的使用
// "this"是hash
// 而"counter"是key
var currentTime = this.counter++;
// 這里我們改變顯示時(shí)間的div里面的內(nèi)容
$('timer_display').set('text', currentTime);
// 這里改變樣式表的width屬性，可以輕松地創(chuàng)建一個(gè)時(shí)間進(jìn)度條
$('timer_bar').setStyle('width', currentTime);
}
window.addEvent('domready', function() {
// 這是一個(gè)簡單的hash對象
// 只有一個(gè)鍵值對（key/value pair）
var currentCounter = new Hash({counter: 0});
// 我們初始化我們的定時(shí)器并傳入和綁定hash變量
var simpleTimer = timerFunction.periodical(100, currentCounter);
// 由于我們不想在onload的時(shí)候就啟動(dòng)定時(shí)器
// 因此我們在這里要停止這個(gè)定時(shí)器
$clear(simpleTimer);
// 在開始按鈕上添加一個(gè)事件
// 在這里再次啟動(dòng)這個(gè)定時(shí)器
$('timer_start').addEvent("click", function(){
simpleTimer = timerFunction.periodical(100, currentCounter);
});
// 在這里清除定時(shí)器
// 并是時(shí)間條閃亮一下
$('timer_stop').addEvent("click", function(){
$clear(simpleTimer);
$('timer_bar').highlight('#EFE02F');
});
$('timer_reset').addEvent("click", function(){
// 重置按鈕首先清除這個(gè)定時(shí)器
$clear(simpleTimer);
// 然后把counter設(shè)為0
// 這個(gè)稍后再詳細(xì)講
currentCounter .set('counter', 0);
//
$('timer_display').set('text', currentCounter.counter);
$('timer_bar').setStyle('width', 0);
});
});
Hash快速入門
創(chuàng)建一個(gè)hash
在上面的例子中，可能有一些東西是你從來沒有見過的。首先，我們使用了hash。hash是一個(gè)由鍵值對（key/value）組成的集合，它和一個(gè)包含許多對象的數(shù)組類似，不過這些對象都只有一個(gè)屬性。我們先來看一下如何建立一個(gè)hash：
參考代碼：
var hashVar = new Hash({
'firstKey': 0,
'secondKey': 0
});
你需要把鍵（key）放在左邊，而值（value）放在右邊（除了那些對hash很熟悉的人外，我們只講一些關(guān)于hash最基本的東西，我們會(huì)在以后將類時(shí)再來講hash的存儲(chǔ)功能）。不管怎樣，使用和這類似的系統(tǒng)還是又很多好處的。首先，你可以在一個(gè)對象中存儲(chǔ)多個(gè)集合，存取變得容易得多，對于組織復(fù)雜的數(shù)據(jù)組織起來。
.set()方法和.get()方法
你也可以在hash中使用你熟悉的.set()和.get()方法。當(dāng)你需要設(shè)置的時(shí)候，你聲明一個(gè)鍵（key），然后是你要設(shè)置的值。當(dāng)你需要獲取的時(shí)候，你值需要聲明你要獲取的鍵（key）就行了。就這么簡單。
參考代碼：
// 還是使用上面的hash
// 這里我們設(shè)置firstKay的值為200
hashVar.set('firstKey', 200);
// 這里我們獲取firstKey的值，現(xiàn)在是200
var hashValue = hashVar.get('firstKey');
你可以可以通過引用hash.鍵名來獲取一個(gè)值：
參考代碼：
var hashValue = hashVar.firstKey;
// 上面的和下面的一樣
var hashValue = hashVar.get('firstKey');
添加一個(gè)新的鍵值對到hash中
.extend();方法
你可以通過.extend();方法來添加一個(gè)或者多個(gè)新的鍵值對（key/value pair）集合到hash中。首先，我們要?jiǎng)?chuàng)建一個(gè)新的鍵值對對象。
參考代碼：
// 這是一個(gè)普通的對象
// 它包含鍵值對（key/value pairs）
// 但是沒有hash的功能
var genericObject = {
'third': 450,
'fourth': 89
};
如果我們要把這個(gè)集合加入到我們已經(jīng)存在的hash中，我們只需要使用.extend();方法來擴(kuò)展hash就行了：
參考代碼：
//現(xiàn)在hashVar包含了genericObject中的所有鍵值對
hashVar.extend(genericObject);
注意：任何重復(fù)的鍵都將會(huì)被后面的設(shè)置覆蓋掉。因此，如果你在原始的hash中有"firstKey":"letterA"這樣一對，然后你又?jǐn)U展了一對"firstKey":"letterB"，這樣你在hash中的讀取結(jié)果將是"firstKey":"letterB"。
合并兩個(gè)hash
.combine();方法
這個(gè)方法可以讓你合并兩個(gè)hash對象，如果有重復(fù)的鍵將保留原始的值。其余的則和.extend()方法一樣。
從hash中刪除一個(gè)鍵值對
.erase();方法
我們已經(jīng)見過這個(gè)方法一次了。它的工作就和你期望的那樣。你聲明一個(gè)hash，然后在后面副加上.erase();，最后你再把“鍵”（key）放在括號里面。
參考代碼：
hashVar.erase('firstKey');
hash和.each()方法
hash和.each()方法又一種特別的關(guān)系，當(dāng)你遍歷一個(gè)hash的時(shí)候，遍歷的函數(shù)將把“值”（value）作為第一個(gè)參數(shù)傳遞，而把“鍵”（key）作為第二個(gè)參數(shù)傳遞——這和你在數(shù)組上使用.each的時(shí)候一樣，它把每個(gè)“項(xiàng)”（item）作為第一個(gè)參數(shù)。
參考代碼：
hashVar.each(function(value, key) {
// 這將為hash中的每一個(gè)鍵值對彈出一個(gè)對話框
alert(key + ":" + value);
});
.periodical()函數(shù)
基本用法
使用這個(gè)方法你唯一要做的就是在一個(gè)函數(shù)的結(jié)尾添加.periodical();，那樣你的函數(shù)就會(huì)定時(shí)地觸發(fā)。和以前的一樣，有幾個(gè)東西你是需要定義的。對于初學(xué)者，你需要定義一個(gè)你需要使用定時(shí)器的函數(shù)，還有你需要它多久觸發(fā)一次（以毫秒為單位）。
參考代碼：
復(fù)制代碼 代碼如下:
var periodicalFunction = function(){
alert('again');
}
window.addEvent('domready', function() {
// 結(jié)尾的數(shù)字決定了這個(gè)函數(shù)觸發(fā)的時(shí)間間隔，以毫秒為單位
var periodicalFunctionVar = periodicalFunction.periodical(100);
});
內(nèi)置的.bind()方法
.periodical()方法包含了一個(gè)非常好的特性——它可以自動(dòng)地綁定第二個(gè)參數(shù)。舉個(gè)例子，如果你想從domready的外面?zhèn)鬟f一個(gè)參數(shù)，你只需要把它作為第二個(gè)參數(shù)傳進(jìn)去，你就可以把它綁定到你要定期觸發(fā)的函數(shù)上了。
參考代碼：
復(fù)制代碼 代碼如下:
window.addEvent('domready', function() {
// 給一個(gè)變量賦值
var passedVar = $('elementID');
// 現(xiàn)在periodicalFunction就可以使用"this"來引用"passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});
停止一個(gè)定時(shí)觸發(fā)的函數(shù)
$clear()
一旦你初始化了一個(gè)定時(shí)觸發(fā)的函數(shù)（就像我們上面所做的那樣），如果你想停止它，你可以使用$clear();方法，它使用起來非常簡單：
參考代碼： [復(fù)制代碼] [保存代碼]
// 我們傳遞那個(gè)我們使用了定時(shí)器函數(shù)的定時(shí)器變量
$clear(periodicalFunctionVar);
代碼示例
為把這所有的連貫起來，我們就用我們目前學(xué)過的一些東西（也有一些是沒有學(xué)過的）來創(chuàng)建一個(gè)定時(shí)器。首先，建立一個(gè)定時(shí)器的HTML頁面，我們還需要一個(gè)開始按鈕，一個(gè)停止按鈕，還有一個(gè)重置按鈕。另外，我們還要?jiǎng)?chuàng)建一個(gè)條形塊，它可以隨著時(shí)間慢慢變長。最后，我們還需要一個(gè)地方來顯示當(dāng)前已經(jīng)運(yùn)行的時(shí)間。
參考代碼：
復(fù)制代碼 代碼如下:
<button id="timer_start">start</button>
<button id="timer_stop">pause</button>
<button id="timer_reset">reset</button>
<div id="timper_bar_wrap">
<div id="timer_bar"> </div>
</div>
<div id="timer_display">0</div>
現(xiàn)在該是MooTools的代碼了：
參考代碼：
復(fù)制代碼 代碼如下:
var timerFunction = function(){
// 每次當(dāng)這個(gè)函數(shù)被調(diào)用時(shí)
// 變量currentTime就會(huì)增加一
// 同時(shí)要注意一下"this.counter"的使用
// "this"是hash
// 而"counter"是key
var currentTime = this.counter++;
// 這里我們改變顯示時(shí)間的div里面的內(nèi)容
$('timer_display').set('text', currentTime);
// 這里改變樣式表的width屬性，可以輕松地創(chuàng)建一個(gè)時(shí)間進(jìn)度條
$('timer_bar').setStyle('width', currentTime);
}
window.addEvent('domready', function() {
// 這是一個(gè)簡單的hash對象
// 只有一個(gè)鍵值對（key/value pair）
var currentCounter = new Hash({counter: 0});
// 我們初始化我們的定時(shí)器并傳入和綁定hash變量
var simpleTimer = timerFunction.periodical(100, currentCounter);
// 由于我們不想在onload的時(shí)候就啟動(dòng)定時(shí)器
// 因此我們在這里要停止這個(gè)定時(shí)器
$clear(simpleTimer);
// 在開始按鈕上添加一個(gè)事件
// 在這里再次啟動(dòng)這個(gè)定時(shí)器
$('timer_start').addEvent("click", function(){
simpleTimer = timerFunction.periodical(100, currentCounter);
});
// 在這里清除定時(shí)器
// 并是時(shí)間條閃亮一下
$('timer_stop').addEvent("click", function(){
$clear(simpleTimer);
$('timer_bar').highlight('#EFE02F');
});
$('timer_reset').addEvent("click", function(){
// 重置按鈕首先清除這個(gè)定時(shí)器
$clear(simpleTimer);
// 然后把counter設(shè)為0
// 這個(gè)稍后再詳細(xì)講
currentCounter .set('counter', 0);
//
$('timer_display').set('text', currentCounter.counter);
$('timer_bar').setStyle('width', 0);
});
});
Hash快速入門
創(chuàng)建一個(gè)hash
在上面的例子中，可能有一些東西是你從來沒有見過的。首先，我們使用了hash。hash是一個(gè)由鍵值對（key/value）組成的集合，它和一個(gè)包含許多對象的數(shù)組類似，不過這些對象都只有一個(gè)屬性。我們先來看一下如何建立一個(gè)hash：
參考代碼：
復(fù)制代碼 代碼如下:
var hashVar = new Hash({
'firstKey': 0,
'secondKey': 0
});
你需要把鍵（key）放在左邊，而值（value）放在右邊（除了那些對hash很熟悉的人外，我們只講一些關(guān)于hash最基本的東西，我們會(huì)在以后將類時(shí)再來講hash的存儲(chǔ)功能）。不管怎樣，使用和這類似的系統(tǒng)還是又很多好處的。首先，你可以在一個(gè)對象中存儲(chǔ)多個(gè)集合，存取變得容易得多，對于組織復(fù)雜的數(shù)據(jù)組織起來。
.set()方法和.get()方法
你也可以在hash中使用你熟悉的.set()和.get()方法。當(dāng)你需要設(shè)置的時(shí)候，你聲明一個(gè)鍵（key），然后是你要設(shè)置的值。當(dāng)你需要獲取的時(shí)候，你值需要聲明你要獲取的鍵（key）就行了。就這么簡單。
參考代碼：
復(fù)制代碼 代碼如下:
// 還是使用上面的hash
// 這里我們設(shè)置firstKay的值為200
hashVar.set('firstKey', 200);
// 這里我們獲取firstKey的值，現(xiàn)在是200
var hashValue = hashVar.get('firstKey');
你可以可以通過引用hash.鍵名來獲取一個(gè)值：
參考代碼：
復(fù)制代碼 代碼如下:
var hashValue = hashVar.firstKey;
// 上面的和下面的一樣
var hashValue = hashVar.get('firstKey');
添加一個(gè)新的鍵值對到hash中
.extend();方法
你可以通過.extend();方法來添加一個(gè)或者多個(gè)新的鍵值對（key/value pair）集合到hash中。首先，我們要?jiǎng)?chuàng)建一個(gè)新的鍵值對對象。
參考代碼：
復(fù)制代碼 代碼如下:
// 這是一個(gè)普通的對象
// 它包含鍵值對（key/value pairs）
// 但是沒有hash的功能
var genericObject = {
'third': 450,
'fourth': 89
};
如果我們要把這個(gè)集合加入到我們已經(jīng)存在的hash中，我們只需要使用.extend();方法來擴(kuò)展hash就行了：
參考代碼：
復(fù)制代碼 代碼如下:
//現(xiàn)在hashVar包含了genericObject中的所有鍵值對
hashVar.extend(genericObject);
注意：任何重復(fù)的鍵都將會(huì)被后面的設(shè)置覆蓋掉。因此，如果你在原始的hash中有"firstKey":"letterA"這樣一對，然后你又?jǐn)U展了一對"firstKey":"letterB"，這樣你在hash中的讀取結(jié)果將是"firstKey":"letterB"。
合并兩個(gè)hash
.combine();方法
這個(gè)方法可以讓你合并兩個(gè)hash對象，如果有重復(fù)的鍵將保留原始的值。其余的則和.extend()方法一樣。
從hash中刪除一個(gè)鍵值對
.erase();方法
我們已經(jīng)見過這個(gè)方法一次了。它的工作就和你期望的那樣。你聲明一個(gè)hash，然后在后面副加上.erase();，最后你再把“鍵”（key）放在括號里面。
參考代碼：
復(fù)制代碼 代碼如下:
hashVar.erase('firstKey');
hash和.each()方法
hash和.each()方法又一種特別的關(guān)系，當(dāng)你遍歷一個(gè)hash的時(shí)候，遍歷的函數(shù)將把“值”（value）作為第一個(gè)參數(shù)傳遞，而把“鍵”（key）作為第二個(gè)參數(shù)傳遞——這和你在數(shù)組上使用.each的時(shí)候一樣，它把每個(gè)“項(xiàng)”（item）作為第一個(gè)參數(shù)。
參考代碼：
復(fù)制代碼 代碼如下:
hashVar.each(function(value, key) {
// 這將為hash中的每一個(gè)鍵值對彈出一個(gè)對話框
alert(key + ":" + value);
});
更多學(xué)習(xí)
我們目前為止要講的關(guān)于hash的內(nèi)容就這么多了。由于這個(gè)系列教程中我們會(huì)更深入的學(xué)習(xí)，在以后我們將找一些機(jī)會(huì)來講有關(guān)hash的更多功能。但是現(xiàn)在，如果你是初學(xué)者，我們只是希望你能對hash有一個(gè)基本的概念。很快我們就要講解類（class）了，那個(gè)時(shí)候所有的東西才會(huì)串連起來。同時(shí)，閱讀一下文檔中有關(guān)hash的這一節(jié)。
包括MooTools 1.2的核心庫，上面的示例，一個(gè)外部的JavaScript文件，一個(gè)簡單的HTML頁面和一個(gè)CSS文件。
相關(guān)文章
MooTools 1.2中的Drag.Move來實(shí)現(xiàn)拖放
今天我們開始第十二講，今天我們將仔細(xì)看一下Drag.Move——一個(gè)很強(qiáng)大的MooTools類，它可以讓你給你的web應(yīng)用添加拖放功能。2009-09-09
從今天開始，我們將開始講解“更多”（more）庫里面的更多插件。Sortables是一個(gè)非常強(qiáng)大的插件，能夠真正地?cái)U(kuò)大你的用戶界面設(shè)計(jì)的選擇面。2009-09-09
Mootools 1.2教程 同時(shí)進(jìn)行多個(gè)形變動(dòng)畫
今天我們來學(xué)習(xí)一下Fx.Elements插件，這是一個(gè)基于Fx.Morph的插件。與應(yīng)用于單個(gè)元素不同的是，F(xiàn)x.Elements可以允許你一次性給多個(gè)元素添加動(dòng)畫。2009-09-09
今天我們將講一下用MooTools來創(chuàng)建和使用類的一些基本知識。2009-09-09
今天我們來深入地學(xué)習(xí)一下如果操縱HTML元素。通過MooTools 1.2，你可以添加新元素到一個(gè)HTML頁面中，也可以刪除元素，以及改變?nèi)魏螛邮交蛘咴貐?shù)，這些都非常容易。2009-09-09
MooTools 頁面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼
MooTools 頁面滾動(dòng)浮動(dòng)層智能定位實(shí)現(xiàn)代碼，需要的朋友可以參考下。2011-08-08
這幾天, 利用晚上的閑暇時(shí)間, 寫了個(gè)mootools組件,原型來自于jQuery UI Dialog, 為防止重復(fù),就起了名字叫mooBox.2012-01-01
Mootools 1.2教程 設(shè)置和獲取樣式表屬性
今天，我們來看一下如何通過MooTools 1.2和我們以前幾講中的內(nèi)容來操作樣式，這將給你在UI上帶來很大的控制權(quán)。2009-09-09
一些mootools的學(xué)習(xí)資源，學(xué)習(xí)mootools的朋友可以參考下。2010-02-02
Mootools 1.2教程 滾動(dòng)條（Slider）
到現(xiàn)在為止，初始化這些MooTools插件對象就會(huì)開始變得越來越熟悉。滾動(dòng)條（Slider）沒有任何不同，你要?jiǎng)?chuàng)建一個(gè)新的滾動(dòng)條，定義滾動(dòng)條和滑塊相關(guān)的元素，然后設(shè)置你的選項(xiàng)，再創(chuàng)建一些回調(diào)事件的控制函數(shù)。2009-09-09