官网

jQuery：

MooTools：

Dojo：

 

基本信息

	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。以下是一个例子片段：

    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操作的话，需要一个类似这样的代码：

    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

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...

 

jQuery

$(document).ready(function() {    var $chkall = $('#all'),        $chks = $('input[type=checkbox]'),        $message = $('#message');        $chkall.click(function(evt) {                $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) {                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的做法是拆成数量庞大的小文件，手动按需加载。

 

下次需要再换一个有点意思的例子。