Monday, October 8th, 2007

$: Now with more magic!

Category: Examples, JavaScript, Library

Dustin Diaz is on a roll :) He has posted about Roll out your own JavaScript Interfaces in which he discusses the desire to use style from libraries such as prototype, jquery and friends, yet in a small bit of code where you don’t want to use the library:

There are times when using a JavaScript library is called for. Building large web applications that use a wide array of utility functions that help aid in developing multi-tiered class systems, advanced UI components, complex event models, and heavy use of DOM scripting helpers. Yep. Those are all great.
However, there are other times when you don’t need all that. And often what we end up doing is just importing a few of our favorite functions as globals, and work off those. But what ends up happening in this case is that we lose the particular style that these libraries offer. For instance, I’d still like to be able to do something like this without a library.

Dustin would like to write something like this:

javascript

  1. $('foo', 'bar').on('click', function(e) {
  2.     $(this).css({
  3.         color: 'green',
  4.         fontSize: '2em'
  5.     }).addClass('active');
  6. });

And to implement the magic he takes Prototypes $() and makes it a special object that can do much more:

(function() {
// private constructor
function _$(els) {
this.elements = [];
for (var i=0; idemonstration at work.

Posted by Dion Almaer at 6:47 am
12 Comments

+++--
3.6 rating from 37 votes

12 Comments »

Comments feed TrackBack URI

Basically, Dustin is reinventing jQuery =P

I wholeheartedly agree though and am currently in a similar process of thought. jQuery can be a whole lot less bulky (and it’s small to begin with) and it seems they’re headed towards the same mentality as well.

ps. I’m not on the pro-jQuery bandwagon, we use prototype ourselves as well at my company…

Comment by Ben — October 8, 2007

jQuery in 54 lines ;)

Comment by Simon Brüchner — October 8, 2007

Amazing!

Comment by EmEhRKay — October 8, 2007

Neat stuff. Maybe some simplified version of Prototype’s Ajax object and it’ll be all I need. Also, can someone explain to me what the parentheses around the function do? Like


(function (){
...
})();

Is this another way to create objects? Thanks in advance for any help.

Comment by Scriptor — October 8, 2007

Is that console.log in the css function left in there on purpose?

Comment by tom — October 8, 2007

it is a function that call itself,the reason to do this is to keep the global namespace clean so the _$ is local to the function but the $ function is exposed because it is append to the global namespace(i.e. window).

Comment by Uriel Katz — October 8, 2007

To be fair, this isn’t “all” of jQuery in 54 lines. It was just a couple of the core functions. And by no means is it a replacement, or a released js library – this was just a sample implementation of a couple functions that has a cool chainable interface :)

Comment by Dustin Diaz — October 8, 2007

Sorry, but what is the point with that? You can do that with mootools core functions and elements extensions…
$$(‘#foo’, ‘#bar’).addEvent(‘click’, function(){
this.setStyles({
‘color’: ‘green’,
‘fontSize’: ‘2em’
}).addClass(‘active’);
});

it is neither news, nor it is something special, so what is the point?

Comment by Chris — October 9, 2007

Nice work Dustin.

@Chris: “There are times when using a JavaScript library is called for…” i read this somewhere.

Comment by Miguel Benevides — October 9, 2007

That is why mootools is modular

Comment by Chris — October 9, 2007

In prototype you can do:
$('mydiv').innerHTML = "Hello everybody";

The code above does not allow you to do that… :p

Comment by Sjoerd — November 20, 2007

Holy shit! Its a f**king example, its not a JS library to replace jQuery or Prototype. It is simply showing you how the core of jQuery is built

Comment by Rozzy — November 23, 2007

Leave a comment

You must be logged in to post a comment.