Selectors in Javascript


Ever since the Behaviour code was released, some time ago, my mind has been churning this powerful topic over. The premise for the module is as follows: Using the power of Pseudo-CSS Selectors, bind your Javascript functions to various HTML elements in the DOM. Looking at how Behaviour works, I’ve never been completely happy – it simply seems too tedious and verbose for everyday use. I’ve since begun to tinker with different styles of code layout – trying to find an optimal solution. Some of my biggest gripes with Behaviour are:

  • You can’t do any heirarchical selectors. For example, binding to “#foo bar” and “#foo bar .baz” fall under two completely different statements. It seems as if this could/should be streamlined.
  • The Behaviour object doesn’t provide any sort of binding-enhancers to make attaching to an event (e.g. “click”) easier to do.
  • The resulting Behaviour code is simply too verbose and too ugly – there is an excess of characters/formatting which will probably scare off a casual Javascript programmer.

I’ve created a syntactical mock-up for how I think ‘Behaviour’ could’ve been implemented. I’m not sure if I’m completely happy with it yet – the only way to know is to do some real-world testing and come back with some tweaks.

Sample #1

Note: In all of these examples, Behaviour uses ‘element.onclick’ (or similar bindings) in order to attach an event handler – this is generally accepted as an improper way of doing this, since you will only be able to attach one event handler at a time – newer handlers will overwrite older ones.

  1. Behaviour.register({
  2.     '#example li': function(e){
  3.       e.onclick = function(){
  4.         this.parentNode.removeChild(this);
  5.       }
  6.     }
  7.   });

The same as above, done in my code:

  1. $('#example li').bind('click',function(){
  2.     this.parentNode.removeChild(this);
  3.   });

Syntactic fluff comparision (This is a comparision of how many extra non-critical characters there are, slowing the programmer down – not counting endlines/whitespace):

A: Behaviour.register({'':function(e){e.on=}});
B: $('').bind('',);

Sample #2

This is the second example made available on the Behaviour web site. It goes to two disparate branches in the DOM Document and attaches two different event handlers.

  1. Behaviour.register({
  2.     'b.someclass' : function(e){
  3.       e.onclick = function(){
  4.         alert(this.innerHTML);
  5.       }
  6.     },
  7.     '#someid u' : function(e){
  8.       e.onmouseover = function(){
  9.         this.innerHTML = "BLAH!";
  10.       }
  11.     }
  12.   });

The same as above, done using my syntax:

  1. $('b.someclass').bind('click',function(){
  2.     alert(this.innerHTML);
  3.   });
  4.  
  5.   $('#someid u').bind('mouseover',function(){
  6.     this.innerHTML = 'BLAH!';
  7.   });

Syntactic fluff comparision

A: Behaviour.register({'':function(e){e.on=},'':function(e){e.on=}});
B: $('').bind('',);$('').bind('',);

Sample #3

This is the Behaviour code required to meet a ‘more advanced’ test case. I included changing style properties and element attributes.

  1. Behaviour.register({
  2.     '#foo ol li': function(a) {
  3.       a.title = "List Items!";
  4.       a.onclick = function(){alert('Hello!');};
  5.     },
  6.     '#foo ol li.tmp': function(a) {
  7.       a.style.color = 'white';
  8.     },
  9.     '#foo ol li.tmp .foo': function(a) {
  10.       a.style.background = 'red';
  11.     }
  12.   });

And the same result using my syntax:

  1. $('#foo ol li')
  2.     .set('title','List Items!')
  3.     .bind('click',function(){alert('Hello!');})
  4.     .select('.tmp')
  5.       .style('color','white')
  6.       .select('.foo')
  7.         .style('background','red');

Syntactic fluff comparision For this comparision I included the selectors that Behaviour uses, but shouldn’t need to.

A: Behaviour.register({'':function(a){a.=;a.on=;},'#foo ol li':function(a){a.style.='';},'#foo ol li.tmp':function(a){a.style.='';}});
B: $('').set('','').bind('',).select('').style('','').select('').style('','');

I’m going to have some more information on, how exactly, this new method of binding would work – hopefully along with some demoable code. More coming very soon!

Posted: August 22nd, 2005


If you particularly enjoy my work, I appreciate donations given with Gittip.

3 Comments (Show Comments)



Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Ukiyo-e Database and Search

Ukiyo-e.org

Japanese woodblock print database and search engine.


John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.


via Ad Packs