Monday, April 5th, 2010

Prototype 1.7 RC Sizzles…

Category: JavaScript, Library, Prototype

<p>Andrew Dupont and the the Prototype team have announced the first RC of Prototype 1.7 which changes the selector engine to Sizzle, a new event API, has new layout/dimensions API, and more.

Element#on

Element#on is a new way to access the Prototype event API. It provides first-class support for event delegation and simplifies event handler removal.

E.g.

javascript
< view plain text >
  1. $("messages").on("click", function(event) {
  2.   // simple version
  3. });
  4.  
  5. // can also pass in a selector which means
  6. $("messages").on("click", "a.comment_link", function(event, element) {
  7.   // ...
  8. });
  9.  
  10. // instead of
  11. $("messages").observe("click", function(event) {
  12.   var element = event.findElement("a.comment_link");
  13.   if (element) {
  14.     // ...
  15.   }
  16. });

Element.Layout

The second major feature in 1.7 is Element.Layout, a class for pixel-perfect measurement of element dimensions and offsets.

Now you don’t have to decide between properties like offsetWidth (which return numbers, but not the numbers you want) or retrieving computed styles (which have their own set of quirks and require a call to parseInt).

javascript
< view plain text >
  1. // Simple case
  2. $('troz').measure('width'); //-> 150
  3. $('troz').measure('border-top'); //-> 5
  4. // Offsets, too:
  5. $('troz').measure('top'); //-> 226
  6.  
  7. // More complex case
  8. var layout = $('troz').getLayout();
  9. layout.get('width');  //-> 150
  10. layout.get('height'); //-> 500
  11.  
  12. layout.get('padding-left');  //-> 10
  13. layout.get('margin-left');   //-> 25
  14. layout.get('border-top');    //-> 5
  15. layout.get('border-bottom'); //-> 5
  16.  
  17. layout.get('padding-box-width'); //-> 170
  18. layout.get('border-box-height'); //-> 510

Other fixes

The JSON interface slated for ECMAScript 5 is already being implemented in major browsers. It uses many of the same method names as Prototype’s existing JSON implementation, but with different behavior, so we rewrote ours to be ES5-compliant and to fall back to the native JSON support where possible. A few other methods, like Object.keys, received similar treatment.

Related Content:

  • IT Channel News Briefs, June 13
    Today's headlines: Microhoo saga nearing end? Centro boosts Palm shares. Mozilla previews Firefox...
  • Bonita v2 Series: Part Three
    This follow-up article steps back and deals with the application layer. Indeed it demonstrates a possible way to couple a Workflow Engine and a...

Posted by Dion Almaer at 1:34 pm
8 Comments

++++-
4 rating from 48 votes

8 Comments »

Comments feed TrackBack URI

Great work guys! (who needs Microsoft anyway?). getLayout() is potentially huge

Comment by AngusC — April 5, 2010

“Microsoft” was not even mentioned and you start bashing.

Comment by Aimos — April 6, 2010

I wonder why Sizzle is the default. Weren’t there talks about making NWMatcher the default for Prototype 1.7. Will people be able to build this release with NWMatcher instead?

Comment by Veej — April 6, 2010

Veej the below was taken from PrototypeJS.org post about 1.7

“So Sizzle is the new default. But there’s more to it than that. In moving to Sizzle, we’ve modularized the selector engine entirely. If you want to use Diego Perini’s NWMatcher library in place of Sizzle, you can. Just check out the source code and build like so:

rake dist SELECTOR_ENGINE=nwmatcher”

Comment by Phunky — April 6, 2010

Great work ! I really like the new on() method. Like Veej, I wonder why they didn’t use NWMatcher as default engine, as in all the tests I’ve seen, it is faster than Proto+Sizzle.

Comment by fabienmenager — April 6, 2010

Is it THAT hard to delete/disable accounts in wordpress? for example “linkszxc”?

Comment by Aimos — April 6, 2010

@Veej, I’m pretty sure Sizzle is the default engine since NWMatcher isn’t Caja compliant.

Comment by Jadet — April 6, 2010

An heads-up for the build process.
If you want to compile the unit tests correctly and run them using NWMatcher as selector engine you have to do:

rake test:build SELECTOR_ENGINE=nwmatcher

some failing tests are a result of unit tests that haven’t been corrected by Prototype developers to reflect elements in document order

Hope this helps NWMatcher supporters out there :-)

Comment by dperini — April 7, 2010

Leave a comment

You must be logged in to post a comment.