30天學會 MooTools 教學(1): 認識MooTools

　　其實很多人都知道jquery,mootools與之類似,我以前是寫jquery的,學了5個小時,寫了5個月,最後後悔了5個月,不得已轉至Mootools上,Mootools的官網是:Mootools.net

說實話,Mootools在華人地區並不流行,原因很簡單,缺少中文教學文檔.

　　有人最近要求我們寫一個關於MooTools 1.2的30天的教程，這似乎也是個很不錯的主意，於是我們決定現在就開始。在這些教程中，我們假設使用者沒有任何MooTools或者是JavaScript經驗，但是至少有基本的HTML和CSS知識。
MooTools 1.2 JavaScript庫介紹

　　MooTools 1.2是 個強大的輕量級的JavaScript庫，專門為減輕Web中互動性JavaScript開發。在某種程度上，你可以認為MooTools是CSS的擴 展。例如，CSS可以讓你在滑鼠移上去時發生改變。JavaScript允許你接觸更多的時間（點擊事件、滑鼠移至上方事件、鍵盤事 件……），MooTools讓這一切變得非常容易。這裡不得不順便提一下,Mootools可以自訂事件,而jquery只能用那幾個定死的事件.例如:

//jquery事件寫法:
$('#??').click(function(){...})

//充其量牛逼一點的寫法不過就是:
$('#??').bind('click,mouseover',function(){...})

//mootools的寫法:
$('??').addEvent('click',function(){...})

//這個寫法jq使用者看了一定眼暈
$('??').addEvent('click:click:relay(a.myStyle)',function(){...})

//這是自訂事件,事件是你自己隨便定義的
$('??').addEvent('ctrlPress',function(){...})

　　還有就是和jquery文法結構的差異,在jquery裡不管你要幹啥,你都得把代碼封裝進$(document).ready(function(){});這玩意裡邊然而Mootools隨便你,他不要求你這麼做,這其中是有很大差異的,想象一下,如果你的網站有很多特殊效果,那麼你就會對應的需要很多效果的外掛程式,在jquery裡你就必須要把這些外掛程式放入$(document).ready(function(){});裡才能正常使用,然後放入這裡面就要意味著當開啟你的網站的時候哪怕你什麼事情都不做,客戶的電腦都得需要執行一遍這些擴充,執行的後患就是記憶體開銷了,尤其是jquery這個不懂得釋放記憶體的架構,更是讓人抓狂.在過去的5個月內我曾遇到過瀏覽器消耗了我超過3G的記憶體的狀況,這實在太恐怖了.然而Mootools不是如此,他所有的外掛程式都是開發成class,當然了簡單的外掛程式你也可以用function,只要你不執行個體化或調用他根本就不會消耗記憶體,就算記憶體有了消耗只要一句簡單的destroy就能搞定了,天空一片晴朗,用過jquery的朋友請回想一下當你頻繁ajax的時候你的記憶體的狀況吧..

　　另外，MooTools還有各種各樣的非常好的擴充，可以讓你不只是改變一個元素的屬性，還可以讓你有」morph「（變形）或者」tween「（補間動畫）屬性，讓你有能力去建立動畫效果，就像你在我的導覽功能表上看到的一樣（Fdream註：原作者的，我的首頁也有）。

　　這隻是一個例子，MooTools可以讓你做更多的事情。在接下來的30天裡，我們將深入MooTools庫，探索從數組（Array）和函數（Function）到Fx.Slide，以及其他捆綁外掛程式的每一個東西。
引用MooTools 1.2

首先，下載並引用MooTools 1.2核心庫。

    下載MooTools 1.2核心庫
    把MooTools 1.2核心庫上傳到你的伺服器或者工作區
    在你的HTML文檔頭部head標記之內連結MooTools 1.2核心庫

<script src="mootools-1.2-core.js」 type="text/javascript"></script>

（Fdream註：現在MooTools 1.2下載下來後，預設的尾碼名是」.txt「，請更改尾碼為」.js「。）
在Head標籤之內添加Script標籤

現在，你已經在你的頁面中應用了了MooTools了，你還需要一個地方來寫你的代碼。這裡有兩種選擇：

1. 把下面的代碼寫在你的head標籤之內，你的代碼寫在script標記之內：

<script type="text/javascript">
//Mootools code goes here
</script>

2. 在外部建立一個JavaScript檔案，然後在頁面頭部連結此檔案：

<script src="myJavaScriptFile.js" type="text/javascript"></script>

 

在這裡，你可以使用任何一種方式。我通常把domready事件中調用的方法放在script標記之間，而我的函數放在外部檔案中。
把代碼放在domready中

MooTools的方法必須在domready事件中調用。

window.addEvent('domready', function() {
    exampleFunction();
});

 

（Fdream註：不完全是這樣，但是可以保證你的JavaScript代碼儘可能少地出錯。順便說一下domready事件：當頁面的HTML代 碼（不包括圖片、flash等等，只是代碼）下載完成時，此時會觸發domready事件。這樣可以在頁面完全下載完成（包括圖片、flash等都下載完 成）之前執行你的指令碼，從而避免因為一張大圖要下很長時間而導致指令碼不能執行，從而出現異常。）
把代碼放在一個函數中

你仍然可以在domready之外建立你的函數，然後在domready中調用它：

var exampleFunction = function() {
     alert('hello')
};

window.addEvent('domready', function() {
    exampleFunction();
});

 

關於庫的詳細介紹

在這第一講中，我們會仔細地看了一下這個庫架構的一些關鍵組件，然後粗略地看一下其他準系統。
Core（核心）

核心（core）部分包含MooTools庫的一些公用函數（Function）來完成一些常見的任務，也加強了許多原有功能（後面會有詳細介紹）。下面的內容只是作為MooTools功能的一些例子，並不能替代您閱讀MooTools的文檔。

    檢查一個值（如果沒有值或者為0則返回false） - $chk(value);
    返回兩個值之間的一個隨機整數 - $random(min, max);
    可以更容易地檢測瀏覽器、瀏覽器的引擎及瀏覽器的能力

（Fdream註：第一個描述有誤，$chk(value)只是檢查一個值是不是已經定義或者已經賦值，為0時會返回true，只有undefined或者null時返回false。）
Native（本機物件）

在庫的這一部分也包含了一些公用工具，可以讓你很容易地運算元組（Array，值或者對象的簡單列表）、函數（Function）、數值（Number）、字串（String）、雜湊對象（Hash）和事件（Event）。這裡是本機物件中的一些工具特性：

    對數組中的每個元素執行一段指令碼 - .each();
    得到數組中的最後一個元素 - .getLast();
    每個x毫秒觸發一個事件 - .periodical();
    對小數取整 - .round();
    把rgb轉換為十六進位（HEX） - .rgbToHex();

Class（類）

一個JavaScript類（相對於CSS的類），是一個功能可以重複使用的對象。若要更多地瞭解MooTools類，你可以看看Valerio的這篇簡單介紹的文章（MooTools類——怎樣使用它們）。我也同時推薦David Walsh的MooTools類模板。
Element（元素）

MooTools庫的Element類提供了一些非常有用的功能。通過這個類，你可以選擇DOM元素、操控他們的屬性和位置、改變他們的CSS風格。這裡是MooTools提供的一些非常強大的處理DOM元素的工具：

    選擇所有有相同ID或者CSS類名的DOM元素 - .getElements();
    給一個元素添加一個CSS類 - .addClass();
    取得一個元素的屬性值 - .getProperty();
    改變一個元素的屬性值 - .setProperty();
    取得一個元素的樣式屬性值 - .getStyle();
    改變一個元素的樣式屬性值 - .setStyle();
    取得一個元素的座標位置 - .getCoordinates();

（Fdream註：不推薦在一個頁面中有多個相同ID，最好不要出現，在一些瀏覽器下很容易出現不可預見的錯誤。）
Utilities（工具 + 生產力）

工具 + 生產力（Utilities）提供了更多精良的選擇邏輯，包括domready事件、可以管理AJAX調用的工具、可以輕鬆管理cookie的工具，甚至還有」swiff「功能，可以提供JavaScript介面給ActionScript。
FX（效果）

這可能是MooTools最有趣的部分了。通過Fx（效果），你可以建立」Tween「（補間動畫）和」morph「（形變動畫）效果，從而讓你的DOM對象動起來。

    在兩個樣式屬性值之間建立一個動畫變形（比如讓一個div平緩地變大） - var myFx = new Fx.Tween(element);
    在多個不同的屬性值之間建立一個動畫變形（比如在讓一個div平緩變大的過程中，讓它的邊框越來越初，同時變換它的背景顏色） - var myFx = new Fx.Morph(element);

Request（請求）

包含一些可以輕鬆處理JavaScript XMLHttpRequest（AJAX）功能的工具。為了減輕整個請求/響應（request/response）帶來的痛苦，Request對象還有一些專門用來處理HTML和JSON對象（JavaScript對象標記法）的擴充。
Plugins（外掛程式）

MooTools外掛程式擴充了核心功能，可以輕鬆地為你的web項目添加進階UI功能。外掛程式列表如下：

    Fx.Slide
    Fx.Scroll
    Fx.Elements
    Drag
    Drag.Move
    Color
    Group
    Hash.Cookie
    Sortables
    Tips
    SmoothScroll
    Slider
    Scroller
    Assets
    Accordion

全域概覽

在開始下一講之前，花一點時間全面地看一下MooTools的文檔。可能有些地方你看不太懂，不要管它，儘管通讀它，然後吸收那些你懂的。在接下來 的29天中，我們將逐步深入這個庫特定的部分，然後把MooTools分解成一些容易消化的小部分，但是首先，一定要好好看一下整個目錄。

其他的MooTools教程

同時，這裡列出了一些其他幫助你開始的的MooTools教程。