学习流行的JavaScript框架20120731-[jQuery,Dojo,MooTools]

官网

基本信息

	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的做法是拆成数量庞大的小文件，手动按需加载。

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

posted on 2012-07-31 10:28 干田阅读(1345) 评论(6) 编辑收藏举报