正确使用Prototype

Part I: http://thinkweb2.com/projects/prototype-checklist/
1，错:

ruby代码

1. document.getElementById('foo')  

document.getElementById('foo')

对:

ruby代码

1. $('foo')  

$('foo')

2，错:

ruby代码

1. var woot = document.getElementById('bar').value  
2. var woot = $('bar').value  

var woot = document.getElementById('bar').value
var woot = $('bar').value

对:

ruby代码

1. var woot = $F('bar')  

var woot = $F('bar')

3，错:

ruby代码

1. $('footer').style.height = '100px';  
2. $('footer').style.background = '#ffc';  

$('footer').style.height = '100px';
$('footer').style.background = '#ffc';

对:

ruby代码

1. $('footer').setStyle({  
2.   height: '100px',  
3.   background: '#ffc'  
4. })  

$('footer').setStyle({
  height: '100px',
  background: '#ffc'
})

4，错:

ruby代码

1. $('coolestWidgetEver').innerHTML = 'some nifty content'  

$('coolestWidgetEver').innerHTML = 'some nifty content'

对:

ruby代码

1. $('coolestWidgetEver').update('some nifty content')  
2. $('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()  

$('coolestWidgetEver').update('some nifty content')
$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()

5，错:

ruby代码

1. new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')  

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

new Ajax.Request('ninja.php', {
  parameters: {
    weapon1: 'foo',
    weapon2: 'bar'
  }
})

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

new Ajax.Request('blah.php', {
  method: 'POST',
  asynchronous: true,
  contentType: 'application/x-www-form-urlencoded',
  encoding: 'UTF-8',
})

对:

ruby代码

1. new Ajax.Request('blah.php')  

new Ajax.Request('blah.php')

7，错:

ruby代码

1. Event.observe('myContainer', 'click', doSomeMagic)  

Event.observe('myContainer', 'click', doSomeMagic)

对:

ruby代码

1. $('myContainer').observe('click', doSomeMagic)  

$('myContainer').observe('click', doSomeMagic)

8，错:

ruby代码

1. $$('div.hidden').each(function(el) {  
2.   el.show();  
3. })  

$$('div.hidden').each(function(el) {
  el.show();
})

对:

ruby代码

1. $$('div.hidden').invoke('show')  

$$('div.hidden').invoke('show')

9，错:

ruby代码

1. $$('div.collapsed').each(function(el) {  
2.   el.observe('click', expand);  
3. })  

$$('div.collapsed').each(function(el) {
  el.observe('click', expand);
})

对:

ruby代码

1. $$('div.collapsed').invoke('observe', 'click', expand)  

$$('div.collapsed').invoke('observe', 'click', expand)

10，错:

ruby代码

1. $$('input.date').invoke('observe', 'focus', onFocus);  
2. $$('input.date').invoke('observe', 'blur', onBlur);  

$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);

对:

ruby代码

1. $$('input.date')  
2.   .invoke('observe', 'focus', onFocus)  
3.     .invoke('observe', 'blur', onBlur)  

$$('input.date')
  .invoke('observe', 'focus', onFocus)
    .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>'  

$('productTable').innerHTMl =
  $('productTable').innerHTML +
  '<tr><td>' + productId + ' '
  + productName + '</td></tr><tr><td>'
  + productId + ' ' + productPrice +
  '</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. )  

var rowTemplate = new Template('<tr><td>#{id} #{name</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
  rowTemplate.evaluate({
    id: productId,
    name: productName,
    price: productPrice
  }))
)

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

$('myInput').observe('keyup', function(e) {
  if (e.keyCode == Event.KEY_TAB)
    doSomethingCoolWhenTabIsPressed();
})

2，不需要事件capturing

ruby代码

1. $('productInfo').observe('click', displayProductInfo, false); // 'false' could be skipped  
2. $('productInfo').observe('click', displayProductInfo);  

$('productInfo').observe('click', displayProductInfo, false); // 'false' could be skipped
$('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.   }));  

new Insertion.Bottom('blogEntry',
  new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
    .evaluate({
      name: blogEntry.name,
      content: blogEntry.content
    })
);
// Insertion class is deprecated - it's recommended to use Element's insert method:

$('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
  .evaluate({
    name: blogEntry.name,
    content: blogEntry.content
  }), 'bottom'); // 'bottom' can be skipped

$('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
  .evaluate{(
    name: blogEntry.name,
    content: blogEntry.content
  }));

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

$('register').observe('submit', function(e) {
  Event.stop(e);
  $(this).request();
})

$('register').observe('submit', function(e) {
  Event.stop(e);
  new Ajax.Request($(this).readAttribute('action', {
    parameters: Form.serializeElements($(this).getInputs('', 'email'))
  })
})

$('register').observe('submit', function(e) {
  Event.stop(e);
  new Ajax.Request(this.readAttribute('action'), {
    parameters: Form.serializeElements($(this).getElements()
      .reject(function(el) {return el.hasAtrribute('multiple')})
    );
  })
})

$('register').observe('submit', function(e) {
  Event.stop(e);
  new Ajax.Request($(this).readAttribute('action', {
    parameters: Form.serializeElements($$('#register input:not([multiple])'))
  })
})

Enjoy prototyping!

转载于:https://www.cnblogs.com/orez88/articles/1522291.html