官網
jQuery：http://jquery.com/
MooTools：http://mootools.net/
基本信息
| version | Minified | Uncompressed | |
| jQuery | 1.7.2 | 32KB | 247KB |
| MooTools（Compatibility） | 1.4.5 | 94KB | 157KB |
| MooTools（Incompatibility） | 1.4.5 | 88KB | 147KB |
| Dojo（Base） | 1.7.3 | 31KB | 548KB |
這里是核心的代碼，我以前一直使用jQuery，jQuery有一個jQuery UI的套件，從命名上看可以判斷，jQuery核心代碼提供基本功能，UI套件做的是和界面有關。當然還有一個jQuery Mobile，也是顧名思義的。但是我這次看了MooTools和Dojo之后，突然發現，這些框架的側重點大致相同的同時略有不同。我本來想整理一個表出來說明，但是我放棄了，只能先通過一點點的學習，最后后才能准確表述我的理解。（我不是很理解MooTools的非兼容版本是什么意思）
Core
首先我打算體驗一下Core的方法。所謂Core在這里，我把它定義成對DOM的一些基本操作， 比如DOM的選擇操作，DOM的屬性操作，DOM的事件操作。體驗他們之間的區別點。
jQuery
- jQuery.holdReady()
這是一個很有意思的方法，我知道jQuery的啟動方法是ready()方法，而這個holdReady方法卻可以暫定ready。以下是一個例子片段：
<script type="text/javascript"> $(document).ready(function(){ $('#info').append('hello !'); }); $.holdReady(true); // Step1 $.getScript('other.js', function(){ $('#info').append('gantian'); $.holdReady(false); // Step2 }); </script>Step1 和 Step2是一定要一起出現的。也就是成對出現，有多少個Step1就必須要有多少個Step2。否則ready方法是一直卡在那里。這個函數最主要的作用是：當我們需要在ready函數執行加載函數並且運行某些程序，這個方法將會非常有用。
- jQuery()
這個函數其實就是$()函數，也就是選擇DOM元素的方法。這是核心里最有用的一個方法，他的使用方法非常的豐富和多樣，以至於我一直認為這就是jQuery一切的核心！jQuery的“鏈式編程模式”就是根據這個來的！大致上講，他分為以下幾種：
- jQuery( selector [, context ] )
selector是類似css語法里的選擇器，他支持標簽名稱，元素ID，元素class名以及他們彼此之間的組合形式。這里還有各種小技巧，比如尋找節點時，可以使用$(this).find(selector)，也可以反過來$(selector, this)。所以可謂是相當的靈活。
這個方法執行完以后，會講我們選擇的DOM元素或者JS對象，全部轉化成一種叫jQuery的對象，一旦變成了jQuery對象以后，就支持統一的操作了。
- jQuery( html [, ownerDocument ] )
這個函數是用來將原始的html代碼創建成jQuery元素。當然，除了html元素，還可以同時給他賦予各種屬性值。
- jQuery( callback )
這就是jQuery最最開始的起始方法。類似C語言的main函數，而且這個方法允許重復執行。
jQuery的核心從其提供的API來看，提供了這樣一種方式：將幾乎所有的頁面元素（html元素，js對象），全部轉化成jQuery對象，所有的操作基於同一的對象來進行。
Dojo
- require()
這個寫其實不是很對，目前我看下來，使用Dojo的方式是不停地加載他的插件。從Dojo的包可以看出來，Dojo分成dijit、dojo、dojox。我並沒有使用dijit和dojox。就dojo里就有300個文件。
如果要在DOM准備好的時候進行DOM操作的話，需要一個類似這樣的代碼：
<script type="text/javascript"> require(['dojo/query', 'dojo/NodeList-data', 'dojo/NodeList-manipulate', 'dojo/domReady!'], function(query, NodeList) { query('li') .data('updated', new Date()) .on('click', function(e) { (new NodeList(this)).data('updated', new Date()); }); var btn = query('#btn'); btn.on('click', function() { query('li').data('updated').forEach(function(date) { console.log(date.getTime()); }); }); console.log(query('div').append(123456)); }); </script>require每一個插件，都會去加載相應的js文件，這就是dojo文件很多的原因。從官網的API說明來看，Dojo做了很多默認js不提供的事情，比如String的擴展。
或者DOM靠的是query方法，此方法會返回一個NodeList類型的DOM數組，通過加載不同的擴展包（NodeList-data，NodeList-manipulate）來對DOM進行操作。
MooTools
MooTools從官網Docs上的說明和源代碼來看，似乎是對原生JavaScript的一種擴展或再加工。她主要解決了兩個很重要的問題：原生JS的功能不足和JS語法兼容性問題。至少我體驗下來目前是這個想法。
Demo
我想了一下，在關於DOM操作的問題上，最好的方式是用幾個例子來比較一下相互之間的代碼呈現。
Demo1-多選框：N個多選框，點擊第一個，所有多選框的狀態和第一個一樣。
HTML
<body> <input type="checkbox" id="all" value="All" /> <input type="checkbox" name="chk" value="1" /> <input type="checkbox" name="chk" value="2" /> <input type="checkbox" name="chk" value="3" /> <input type="checkbox" name="chk" value="4" /> <input type="checkbox" name="chk" value="5" /> <input type="checkbox" name="chk" value="6" /> <input type="checkbox" name="chk" value="7" /> <br /> <div id="message"> </div> </body>JavaScript
function chkall(chk) { var chked = !!chk.checked; var temps = document.getElementsByTagName('input'); var chks = []; for (var i = 0; i < temps.length; i++) { if(temps[i].type == 'checkbox') { chks.push(temps[i]); } }; for (var i = 0; i < chks.length; i++) { chks[i].checked = chked; }; } // html... <input type="checkbox" id="all" value="All" onclick="chkall(this);" />
jQuery
$(document).ready(function() { var $chkall = $('#all'), $chks = $('input[type=checkbox]'), $message = $('#message'); $chkall.click(function(evt) { var chked = !!$(this).attr('checked'); $chks.each(function(idx) { $(this).attr('checked', chked); }); }); });
Dojo
require(['dojo/query', 'dojo/domReady!'], function(query) { var chkall = query('#all'), chks = query('input[type=checkbox]'), message = query('#message'); chkall.on('click', function(evt) { var chked = !!query(this).attr('checked')[0]; chks.forEach(function(node, idx, nodeList) { query(node).attr('checked', chked); }); }); });
MooTools
window.addEvent('domready', function() { var chkall = $('all'), chks = $$('input[type=checkbox]'), message = $('message'); chkall.addEvent('click', function(evt) { var chked = $(this).getProperty('checked'); chks.each(function(chk, idx) { $(chk).setProperty('checked', chked); }); }); });
我為我找這個一個無聊的Demo而感到羞愧，他們幾乎是無差的！不過即使如此，代碼還是值得細細回味的。
基本上所有的框架都可以將DOM元素進行包裝，包裝完以后就變成了該框架的“特定DOM元素”。然后可以通過比較直觀的“方法賦值”一改傳統的“等號賦值”。這種轉變我覺得，根本原因是方法是可控的，是可以擴展的。完成不同的目標可以通過相同的方式完成，只是更改參數形式即可。
選擇DOM的方式非常豐富，基本上都提供了類似CSS的選擇器。
Dojo封裝DOM以后是一個數組，這個數組不會去特別區分一個還是多個，導致對單一元素的屬性處理上有一點點小小的變化。
MooTools在DOM選擇上專門為byId提供了一種便捷方式，而通用的DOM選擇了另一種方式。
Dojo因為其結構的緣故，比較好的規避了相同框架載入時的變量名沖突的問題。這一點jQuery感覺做的一般，需要使用一些代碼來改進這個問題。
MooTools的編寫最類似原生JavaScript的寫法。
MooTools提供了可選擇性的編譯方式，什么意思？也就是說，需要多少擴展就可以量身定制一下。這一點上，jQuery的做法是盡可能的減少代碼量，Dojo的做法是拆成數量龐大的小文件，手動按需加載。
下次需要再換一個有點意思的例子。