[jQuery,Dojo,MooTools]

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

前台

我一直在想，怎么提高自己的技术水平。网上的文章我看下来一般都是这样几类：

1. 说明型教程，就是把官网的说明书翻译成中文，如果官网有教程最好，没有其实就是技术手册，而且转来转去的，缺少图片不说，排版都有可能一塌糊涂。
2. helloworld教程，就是类似helloworld级的教程。基本上就是给入门的人看的。也不一定连续。
3. 专项型教程，针对某一个特定的问题进行阐述，这个完全看运气，有时候说的立刻能懂的，有时候则完全不知道在讲啥。
4. 搞笑型教程，类似讲故事一样的教程，长篇大论其实就是表述一个很简单的观点。市场上很多书就是这样的。
5. 定论型教程，一般可以直接看开始，看他要说明什么问题，然后看结论，并且记住他，中间扒拉扒拉的可以跳过。这种教程一般都是反常规思维的。就是我们某些固化概念也不知道哪里来的，反证不是错的就是不太准确的。
6. 架构型教程，这类文章通常都是讲述一个高大全的东西。属于拓展知识面的，必定不适合你的应用场景。只不过可以看到很多新知识而已。有时候会大呼～！原来是这样的～！
7. 开拓性教程，很多都是新框架，技能，知识的一种抢鲜体验教程，不属于helloworld级是因为，这完全看教程原作者了。
8. 其他教程，我不知道怎么归类，很多教程，我都是看了一眼不感兴趣就关了。也不能说不好，总之就是我没看完的，也许里面有新的类型。

 

我一直有一个困惑，能不能有这样的教程：横向教程。就是告诉我，我在做一件事情，A可以这么做，B可以这么做，然后我们比一下，A的效率怎么样？B的效率怎么样？单单在这样的场景下，A是不是比B好，或者反之呢？

 

我就是带着这个目的写这个的。

 

本来我想写C#，哈哈～可惜我转行了，要用这种重量级的东西条件有所限制。所以我打算写JS。其实我JS水平也就一般吧。写这个就是希望自己除了纵向学习的同时，可以横向学习一下。

 

不会有什么？

 

这里不会有语法说明，除非我写了注释。不会有客观评论，是的！不会有可能评论，因为这全是主观作用下的产物，不需要客观。但是我接受大家的评论。

 

不会有系统的教程，想到啥是啥吧。不过肯定会横向都有。

 

好了，开始吧。我选了几个JS框架：jQuery，MooTools、Dojo。其实我是随便选的，除了jQuery，其他啥都没用过。

 

我之后一直在琢磨，应该开始？是不是应该先看官网？或者说看看百科上对这个框架的评价？或者说问问圈子里的人？但是最后我全部都放弃了。这无异于管中窥豹（不知道我成语用的对不对）。最有效的方式，我觉得应该就是打开记事本然后开始写代码，通过用相同的例子，不同的框架来实现，来最终领会一下使用每一种框架给我的最最真实的感受！不做无谓的所谓“代码分析”，不过复杂的“源码剖析”。只通过自己的编写来感受框架给我最真实的感受！

 

这就是我打算写这个博客的初衷，虽然我也不知道能坚持多久，不过现在就开始，试试看吧。

官网

jQuery：http://jquery.com/

MooTools：http://mootools.net/

Dojo：http://dojotoolkit.org/

 

基本信息

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

 

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

http://www.cnblogs.com/gantianamin2001/archive/2012/07/31/2616260.html