正确使用Prototype

Part I: http://thinkweb2.com/projects/prototype-checklist/
1，错:
ruby代码
  1. document.getElementById('foo')  
对:
ruby代码
  1. $('foo')  
2，错:
ruby代码
  1. var woot = document.getElementById('bar').value  
  2. var woot = $('bar').value  
对:
ruby代码
  1. var woot = $F('bar')  
3，错:
ruby代码
  1. $('footer').style.height = '100px';  
  2. $('footer').style.background = '#ffc';  
对:
ruby代码
  1. $('footer').setStyle({  
  2.   height: '100px',  
  3.   background: '#ffc'  
  4. })  
4，错:
ruby代码
  1. $('coolestWidgetEver').innerHTML = 'some nifty content'  
对:
ruby代码
  1. $('coolestWidgetEver').update('some nifty content')  
  2. $('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()  
5，错:
ruby代码
  1. new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')  
对:
ruby代码
  1. new Ajax.Request('ninja.php', {  
  2.   parameters: {  
  3.     weapon1: 'foo',  
  4.     weapon2: 'bar'  
  5.   }  
  6. })  
6，错:
ruby代码
  1. new Ajax.Request('blah.php', {  
  2.   method: 'POST',  
  3.   asynchronous: true,  
  4.   contentType: 'application/x-www-form-urlencoded',  
  5.   encoding: 'UTF-8',  
  6. })  
对:
ruby代码
  1. new Ajax.Request('blah.php')  
7，错:
ruby代码
  1. Event.observe('myContainer', 'click', doSomeMagic)  
对:
ruby代码
  1. $('myContainer').observe('click', doSomeMagic)  
8，错:
ruby代码
  1. $$('div.hidden').each(function(el) {  
  2.   el.show();  
  3. })  
对:
ruby代码
  1. $$('div.hidden').invoke('show')  
9，错:
ruby代码
  1. $$('div.collapsed').each(function(el) {  
  2.   el.observe('click', expand);  
  3. })  
对:
ruby代码
  1. $$('div.collapsed').invoke('observe', 'click', expand)  
10，错:
ruby代码
  1. $$('input.date').invoke('observe', 'focus', onFocus);  
  2. $$('input.date').invoke('observe', 'blur', onBlur);  
对:
ruby代码
  1. $$('input.date')  
  2.   .invoke('observe', 'focus', onFocus)  
  3.     .invoke('observe', 'blur', onBlur)  
11，错:
ruby代码
  1. $('productTable').innerHTMl =  
  2.   $('productTable').innerHTML +  
  3.   '<tr><td>' + productId + ' '  
  4.   + productName + '</td></tr><tr><td>'  
  5.   + productId + ' ' + productPrice +  
  6.   '</td></tr>'  
对:
ruby代码
  1. var rowTemplate = new Template('<tr><td>#{id} #{name</td></tr><tr><td>#{id} #{price}</td></tr>');  
  2. $('productTable').insert(  
  3.   rowTemplate.evaluate({  
  4.     id: productId,  
  5.     name: productName,  
  6.     price: productPrice  
  7.   }))  
  8. )  
Part II: http://thinkweb2.com/projects/prototype/?p=3
1，轻松监听键盘事件
ruby代码
  1. $('myInput').observe('keyup', function(e) {  
  2.   if (e.keyCode == Event.KEY_TAB)  
  3.     doSomethingCoolWhenTabIsPressed();  
  4. })  
2，不需要事件capturing
ruby代码
  1. $('productInfo').observe('click', displayProductInfo, false); // 'false' could be skipped  
  2. $('productInfo').observe('click', displayProductInfo);  
3，聪明的insert()
ruby代码
  1. new Insertion.Bottom('blogEntry',  
  2.   new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')  
  3.     .evaluate({  
  4.       name: blogEntry.name,  
  5.       content: blogEntry.content  
  6.     })  
  7. );  
  8. // Insertion class is deprecated - it's recommended to use Element's insert method:  
  9.   
  10. $('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')  
  11.   .evaluate({  
  12.     name: blogEntry.name,  
  13.     content: blogEntry.content  
  14.   }), 'bottom'); // 'bottom' can be skipped  
  15.   
  16. $('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')  
  17.   .evaluate{(  
  18.     name: blogEntry.name,  
  19.     content: blogEntry.content  
  20.   }));  
4，Form提交
ruby代码
  1. $('register').observe('submit', function(e) {  
  2.   Event.stop(e);  
  3.   $(this).request();  
  4. })  
  5.   
  6. $('register').observe('submit', function(e) {  
  7.   Event.stop(e);  
  8.   new Ajax.Request($(this).readAttribute('action', {  
  9.     parameters: Form.serializeElements($(this).getInputs('', 'email'))  
  10.   })  
  11. })  
  12.   
  13. $('register').observe('submit', function(e) {  
  14.   Event.stop(e);  
  15.   new Ajax.Request(this.readAttribute('action'), {  
  16.     parameters: Form.serializeElements($(this).getElements()  
  17.       .reject(function(el) {return el.hasAtrribute('multiple')})  
  18.     );  
  19.   })  
  20. })  
  21.   
  22. $('register').observe('submit', function(e) {  
  23.   Event.stop(e);  
  24.   new Ajax.Request($(this).readAttribute('action', {  
  25.     parameters: Form.serializeElements($$('#register input:not([multiple])'))  
  26.   })  
  27. })  
Enjoy prototyping!
posted @ 2009-07-13 09:47  麦飞  阅读(298)  评论(0)  编辑  收藏  举报