学习流行的JavaScript框架20120731-[jQuery,Dojo,MooTools]
官网
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的做法是拆成数量庞大的小文件，手动按需加载。
下次需要再换一个有点意思的例子。