使用MooTools, jQuery, and Dojo 来完成常见任务的语法归类

By Rainbow on // jQuery // 3265 Views+ // (0) Comments

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


JavaScript-Framework-Matrix

接下来，我就来看一些不同JavaScript框架，如何使用一些基本的语法，来完成共同任务。

Execute Code when the DOM is Ready / window.load注册事件的替代方法

The Dojo Toolkit :

1
2
3

dojo.ready(function() {
	//do stuff
});

The jQuery :

1
2
3

jQuery(document).ready(function() {
	//do stuff
});

The MooTools :

1
2
3

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');

The jQuery ：

1
2
3

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');

Collect Elements / 搜集元素

The Dojo Toolkit ：

1
2

var myElement = dojo.byId('myElement');
var divs = dojo.query('div');

The jQuery ：

1
2

var myElement = jQuery('#myElement');
var divs = jQuery('div');

The MooTools ：

1
2

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!');
});

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!');
});

The MooTools ：

1
2
3

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());

The jQuery ：

1

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);

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);
	}
});

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);
	}
});

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();

Animate the Opacity of an Element / 动画与透明度

The Dojo Toolkit ：

1

dojo.anim('myElement',{ opacity: 0.7 }, 250);

The jQuery ：

1
2

jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl

The MooTools ：

1

document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);

你想了解更多。。。主流JavaScript框架完成相同任务的语法吗？

请看：JavaScript Framework Matrix

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计