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

官网

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

 

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

你可能感兴趣的:(JavaScript)