What's New in Prototype 1.5?
by Scott Raymond | Pages: 1, 2, 3, 4, 5

Array and Enumerable Extensions

The String prototype isn't the only language-native object that Prototype enhances. It also extends JavaScript's Array prototype with over a dozen methods, including four in the latest release.

• size() returns the number of elements in the array. For example:

  [1,2,3].size(); // => 3

• clone() returns a clone of the array. For example:

  var a = [1, 2, 3];
var b = a;
b.reverse();
a; // => [3, 2, 1]
var a = [1, 2, 3];
var b = a.clone();
b.reverse();
a; // => [1, 2, 3]

• reduce() returns the array untouched if it has more than one element. If it only has one element, reduce() returns the element. For example:

  [1, 2].reduce(); // [1, 2]
[1].reduce();    // 1
[].reduce();     // undefined

• uniq() returns a new array with duplicates removed. For example:

  [1, 3, 3].uniq(); // => [1, 3]

• Although not technically an extension to the Array prototype, the new method $w(str) creates arrays from strings, like Ruby's %w method. For example:

  $w("foo bar baz"); // => ["foo","bar","baz"]

In addition to the extensions directly to Array, Prototype also provides an object called Enumerable, inspired by the Ruby module of the same name. The methods defined in Enumerable are added to several type of collections, including Array, Hash, and ObjectRange. As with Ruby's Enumerable, it's possible to "mix-in" Prototype's Enumerable methods into your own custom classes as well. There are a handful of new features added in the 1.5 release:

• eachSlice(number[, iterator]) groups the members into arrays of size number (or less, if number does not divide the collection evenly.) If iterator is provided, it's called for each group, and the result is collected and returned.

  $R(1,6).eachSlice(3) // => [[1,2,3],[4,5,6]]
$R(1,6).eachSlice(4) // => [[1,2,3,4],[5,6]]
$R(1,6).eachSlice(3, function(g) { return g.reverse(); }) // => [[3,2,1],[6,5,4]]

• inGroupsOf(number[, fillWith]) groups the members into arrays of size number (padding any remainder slots with null or the string fillWith).

  [1,2,3,4,5,6].inGroupsOf(3); // => [[1,2,3],[4,5,6]]
$R(1,6).inGroupsOf(4); // => [[1,2,3,4],[5,6,null,null]]
$R(1,6).inGroupsOf(4, 'x') // => [[1,2,3,4],[5,6,"x","x"]]

• size() returns the number of elements in the collection.

  $R(1,5).size(); // => 5

• each() now returns the collection to allow for method chaining.

  $R(1,3).each(alert).collect(function(n){ return n+1; }); // => [2,3,4]

DOM Access

The area that has gotten the most attention in the 1.5 release is Prototype's DOM access and manipulation methods.

First, a new Selector class has been added for matching elements by CSS selector tokens. The new $$() function provides easy access to the feature, returning DOM elements that match simple CSS selector strings. For example:

// Find all <img> elements inside <p> elements with class "summary", all inside the <div> with id "page". Hide each matched <img> tag:
$$('div#page p.summary img').each(Element.hide)
// Supports attribute selectors:
$$('form#foo input[type=text]').each(function(input) {
  input.setStyle({color: 'red'});
});

Support Insertion.Before and Insertion.After for <tr> elements in IE.

Add Element.extend, which mixes Element methods into a single HTML element. This means you can now write $('foo').show() instead of Element.show('foo'). $(), $$() and document.getElementsByClassName() automatically call Element.extend on any returned elements. Plus, all destructive Element methods (i.e., those methods that change the element rather than return some value) now return the element itself—meaning that Element methods can be chained together. For example:

$("sidebar").addClassName("selected").show();

Pages: 1, 2, 3, 4, 5

Next Page