最近，我開始關注Dojo了，Dojo是一個強大的面向對象JavaScript框架,既然我那麼喜歡MooTools,也沒理由不喜歡Dojo。與Dojo相比我對MooTools 和 jQuery 是比較熟的。這並不重要，無論使用什麼樣的語言，咱們完成的任務是相同的，本質上的區別是使用的語法不一樣罷了。javascript
接下來，我就來看一些不一樣JavaScript框架，如何使用一些基本的語法，來完成共同任務。php
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); |
