正确使用Prototype，节省额外的100K

阅读更多

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

document.getElementById('foo')

对:

$('foo')

2，错:

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

对:

var woot = $F('bar')

3，错:

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

对:

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

4，错:

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

对:

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

5，错:

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

对:

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

6，错:

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

对:

new Ajax.Request('blah.php')

7，错:

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

对:

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

8，错:

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

对:

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

9，错:

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

对:

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

10，错:

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

对:

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

11，错:

$('productTable').innerHTMl =
  $('productTable').innerHTML +
  '' + productId + ' '
  + productName + ''
  + productId + ' ' + productPrice +
  ''

对:

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

Part II: http://thinkweb2.com/projects/prototype/?p=3
1，轻松监听键盘事件

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

2，不需要事件capturing

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

3，聪明的insert()

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

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

$('blogEntry').insert(new Template('
#{name}
#{content}
')
  .evaluate{(
    name: blogEntry.name,
    content: blogEntry.content
  }));

4，Form提交

$('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!