最近,我开始关注Dojo了,Dojo是一个强大的面向对象JavaScript框架,既然我那么喜欢MooTools,也没理由不喜欢Dojo。与Dojo相比我对MooTools 和 jQuery 是比较熟的。这并不重要,不管使用什么样的语言,我们完成的任务是相同的,本质上的区别是使用的语法不同罢了。

接下来,我就来看一些不同JavaScript框架,如何使用一些基本的语法,来完成共同任务。
Execute Code when the DOM is Ready / window.load注册事件的替代方法
The Dojo Toolkit :
1
2
3
| dojo.ready(function() {
//do stuff
}); |
dojo.ready(function() {
//do stuff
});
The jQuery :
1
2
3
| jQuery(document).ready(function() {
//do stuff
}); |
jQuery(document).ready(function() {
//do stuff
});
The MooTools :
1
2
3
| window.addEvent('domready',function() {
//do stuff
}); |
window.addEvent('domready',function() {
//do stuff
});
Elements Style / 设置元素的样式
The Dojo Toolkit :
1
2
| dojo.byId('myElement').style('background', 'blue');
dojo.query('#id, .class, div').style('background', 'blue'); |
dojo.byId('myElement').style('background', 'blue');
dojo.query('#id, .class, div').style('background', 'blue');
The jQuery :
1
2
3
| jQuery('#myElement').css('background', 'blue');
jQuery('#id, .class, div').css('background', 'blue');
jQuery("div p").css("background", "blue"); |
jQuery('#myElement').css('background', 'blue');
jQuery('#id, .class, div').css('background', 'blue');
jQuery("div p").css("background", "blue");
The MooTools :
1
2
3
| document.id('id').setStyle('background', 'blue');
$$('#id', '.class', 'div').setStyle('background', 'blue');
$$("div p").setStyle('background', 'blue'); |
document.id('id').setStyle('background', 'blue');
$$('#id', '.class', 'div').setStyle('background', 'blue');
$$("div p").setStyle('background', 'blue');
Collect Elements / 搜集元素
The Dojo Toolkit :
1
2
| var myElement = dojo.byId('myElement');
var divs = dojo.query('div'); |
var myElement = dojo.byId('myElement');
var divs = dojo.query('div');
The jQuery :
1
2
| var myElement = jQuery('#myElement');
var divs = jQuery('div'); |
var myElement = jQuery('#myElement');
var divs = jQuery('div');
The MooTools :
1
2
| var myElement = document.id('myElement');
var divs = $$('div'); |
var myElement = document.id('myElement');
var divs = $$('div');
Create Event Listeners / 创建事件监听器
The Dojo Toolkit :
1
2
3
| dojo.connect(dojo.byId('myElement'),'onclick',function() {
alert('You clicked me!');
}); |
dojo.connect(dojo.byId('myElement'),'onclick',function() {
alert('You clicked me!');
});
The jQuery :
1
2
3
4
5
6
7
| jQuery('#myElement').click(function() {
alert('You clicked me!');
});
// or
jQuery('#myElement').bind("click", function(){
alert('You clicked me!');
}); |
jQuery('#myElement').click(function() {
alert('You clicked me!');
});
// or
jQuery('#myElement').bind("click", function(){
alert('You clicked me!');
});
The MooTools :
1
2
3
| document.id('myElement').addEvent('click',function() {
alert('You clicked me!');
}); |
document.id('myElement').addEvent('click',function() {
alert('You clicked me!');
});
Create a New Element, Inject Into Document.Body / 元素的创建和添加
The Dojo Toolkit :
1
2
3
4
| dojo.create('div',{
innerHTML: 'This is a new element',
id: 'myElement'
},dojo.body()); |
dojo.create('div',{
innerHTML: 'This is a new element',
id: 'myElement'
},dojo.body());
The jQuery :
1
| jQuery('<div id="myElement">This is a new element</div>').appendTo('body'); |
jQuery('<div id="myElement">This is a new element</div>').appendTo('body');
The MooTools :
1
2
3
4
| new Element('div',{
id: 'myElement',
text: 'This is a new element'
}).inject(document.body); |
new Element('div',{
id: 'myElement',
text: 'This is a new element'
}).inject(document.body);
Execute AJAX Requests / 执行Ajax请求
The Dojo Toolkit :
1
2
3
4
5
6
7
8
9
| dojo.xhrPost({
url: 'save.php',
content: {
id: dojo.byId('user-id').value
}
load: function(response) {
alert('Received the following response: ' + response);
}
}); |
dojo.xhrPost({
url: 'save.php',
content: {
id: dojo.byId('user-id').value
}
load: function(response) {
alert('Received the following response: ' + response);
}
});
The jQuery :
1
2
3
4
5
6
7
8
9
10
| jQuery.ajax({
url: 'save.php',
type: 'post',
data: {
id: jQuery('#user-id').val()
},
success: function(response) {
alert('Received the following response: ' + response);
}
}); |
jQuery.ajax({
url: 'save.php',
type: 'post',
data: {
id: jQuery('#user-id').val()
},
success: function(response) {
alert('Received the following response: ' + response);
}
});
The MooTools :
1
2
3
4
5
6
7
8
9
10
| new Request({
url: 'save.php',
method: 'post',
data: {
id: document.id('user-id').value
},
onSuccess: function(response) {
alert('Received the following response: ' + response);
}
}).send(); |
new Request({
url: 'save.php',
method: 'post',
data: {
id: document.id('user-id').value
},
onSuccess: function(response) {
alert('Received the following response: ' + response);
}
}).send();
Animate the Opacity of an Element / 动画与透明度
The Dojo Toolkit :
1
| dojo.anim('myElement',{ opacity: 0.7 }, 250); |
dojo.anim('myElement',{ opacity: 0.7 }, 250);
The jQuery :
1
2
| jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl |
jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl
The MooTools :
1
| document.id('myElement').set('tween',{ duration: 250 }).fade(0.7); |
document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);
你想了解更多。。。主流JavaScript框架完成相同任务的语法吗?
请看:JavaScript Framework Matrix
文章评论 已经有 0 条评论!