一周學會Mootools 1.4中文教程:序論

剛才發了幾篇Mootools(以后直接簡稱Moo或Mt,看到這兩個名字的時候不要感到奇怪),有一位熱心的朋友"追殺"告訴我說現在已經出到1.4了,就不要再糾結于1.2了,想象一下有道理,其實我現在自己用的也是1.4,那么好吧,接下來的時間我將直接提供1.4的教程,1.2的那個就讓他太監掉吧.

接下來我說一下Mt是啥,其實很多人都知道jquery,mootools與之類似,我以前是寫jquery的,學了5個小時,寫了5個月,最后后悔了5個月,不得已轉至Mootools上,Mootools的官網是:Mootools.net,剛剛有人問我Mt在國內是不是不流行,說實話,Mootools在華人地區都并不流行,不僅僅是在國內(當然了這個國內指的是中國大陸,而我是在臺灣的),原因很簡單,缺少中文教學文檔.

或許有人會說1.2你要30天學會,而為何1.4反而只需要一周呢,其實原因很簡單,Mt不過就是一種寫js的手段罷了,它提供了很多的函數和效果給我們,如果死記硬背這些東西的話,可能要半年才能學會,那么既然就是一個工具,說不定哪天再升級的時候函數又變了我們何必要死記硬背呢,我們只需要知道什么函數是做什么用的就行了,用他的時候很方便的知道這個函數的函數名字和語法格式這就ok了.其他的都讓他見鬼去吧.我保證只要按照我的方法做一周決定能讓你上手寫Mt代碼,至少我用了4天就開始寫了.

MooTools是一個強大的輕量級的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注：原作者的，我的首頁也有）。

Mt的組成部分:

Mt有兩部分組成:

第一部分是:Core,核心.我們可以把它理解成jquery的核心框架包

第二部分是:More,插件.我們可以把它理解成jquery的那些亂七九糟的插件

接下來的時間我只講解Core的部分,至于插件我只挑選幾個常用的說一下.

Mt的下載:

mt的下載地址是:http://mootools.net/download

下載的時候需要注意下,目前下載頁面提供的核心下載有四個不同的版本,看下邊的圖:

我說一下右上角的定制核心,和定制插件是干啥的,定制核心就是允許你把你認為自己不需要的核心部分給剔除掉,從而減少核心js文件的大小,例如array,json等如果你不需要你就可以把左側的對勾去掉,然后拉到頁面的最下方,找到option

Include Compatibility This puts MooTools in compatibility mode with previous versions (1.3 and 1.2).

如果你需要兼容1.2和1.3的代碼寫法(1.2;1.3;1.4這幾個版本都有很大的差異),那么你就勾選一下,當然了勾選了之后js包的尺寸會大一些

然后看到下邊兩行

YUI Compressor Uses YUI Compressor by Julien Lecomte, to clean whitespace and rename internal variables to shorter values. Highest compression ratio.
No Compression Uncompressed source. Recommended in testing phase.

第一行是告訴你使用YUI壓縮一下核心框架包的js源碼

第二行當然就是不壓縮了,基本上我都是需要壓縮一下的,節省網路帶寬.

最后下載就行了

下載好后就等著下一課正式開講吧.

全局概覽

在正式開始之前，給大家提供幾個網址好讓大家預習一下。

http://mootools.net/demos/  這里有一些demo

http://mootools.net/docs/core  這是Mt的核心手冊

http://mootools.net/docs/more 這是Mt插件手冊

http://mootools.net/forge/  這是Mt提供的一些插件

同

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈