PDA

View Full Version : Why selectors (and DomQuery) are indeed cool...



jack.slocum
23 Jan 2007, 9:25 AM
Old code:


// find the header, body and footer
var cn = el.dom.childNodes;
for(var i = 0, len = cn.length; i < len; i++) {
var node = cn[i];
if(node && node.nodeType == 1){
if(YAHOO.util.Dom.hasClass(node, 'ydlg-hd')){
this.header = getEl(node, true);
}else if(YAHOO.util.Dom.hasClass(node, 'ydlg-bd')){
this.body = getEl(node, true);
}else if(YAHOO.util.Dom.hasClass(node, 'ydlg-ft')){
/**
* The footer element
* @type Ext.Element
*/
this.footer = getEl(node, true);
}
}
}

New code:



this.header = el.child('/.ydlg-hd');
this.body = el.child('/.ydlg-bd');
this.footer = el.child('/.ydlg-ft');

:)

tryanDLS
23 Jan 2007, 9:40 AM
That rocks! Major code shrinkage across the board - I take it this is the 50kb you mentioned? :)

jack.slocum
23 Jan 2007, 9:44 AM
I just started on BasicDialog. I expect it will drop 1/2 it's original size (maybe more). It's time it used an Ext.Layer.

Here's another code savings using new functionality added after BasicDialog was created:

Old Code:

var hl = dh.insertBefore(this.header.dom, {tag: 'div', cls:'ydlg-hd-left'});
var hr = dh.append(hl, {tag: 'div', cls:'ydlg-hd-right'});
hr.appendChild(this.header.dom);

New Code

this.header.wrap({cls:'ydlg-hd-right'}).wrap({cls:'ydlg-hd-left'});

jack.slocum
23 Jan 2007, 9:49 AM
More selector coolness:

Old:
this.centerBg = getEl(this.bg.dom.firstChild.firstChild.firstChild);

New:
this.centerBg = this.bg.child('div.ydlg-bg-center');

Not a big code savings but a whole lot cleaner and easier to maintain.

ilazarte
23 Jan 2007, 10:08 AM
Awesome.

Question about selectors... Are you in process or considering doing something like this but as a way to augment delegation based patterns? Currently I see DomQuery being used to get a list of nodes and then act on each in turn. How about selectors as a predicate factory to inform delegation?




signature: EventManager.delegate(event, selector, function, [scope]);

psuedocode:
EventManager.delegate(
"click",
"#grid-id pre code span",
clickHandler);



so this code would only attach an listener to "grid-id', and if any event bubbles up which meets the "pre code span" query, it would execute clickHandler. This is an inversion I suppose of the usual "query to attach to each item of" pattern.

I just starting really learning yui-ext past couple days, so forgive me if this is already included ;)

dewd
23 Jan 2007, 10:08 AM
I love code manageability features! :-)

jack.slocum
23 Jan 2007, 2:16 PM
ilazarte - That's a good idea. I already added some params to e.getTarget() so it should be easy to implement.


/**
* Gets the target for the event.
* @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
* @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
search as a number or element (defaults to 10 || document.body)
* @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node
* @return {HTMLelement}
*/
getTarget : function(selector, maxDepth, returnEl){


The old way, findTarget() will be deprecated in the next release.

jack.slocum
23 Jan 2007, 2:34 PM
You have to love when a good foundation makes something that should be complex so simple it can be done in 2 minutes. ;)



delegate : function(el, eventName, selector, fn, scope){
return this.on(el, eventName, function(e){
var t = e.getTarget(selector, el);
if(t){
fn.call(scope || t, e, t);
}
});
}

This next release is going to be awesome!

moraes
23 Jan 2007, 2:40 PM
This next release is going to be awesome!

he. :D

jack.slocum
23 Jan 2007, 2:45 PM
I also added delegate to Element.

ilazarte
23 Jan 2007, 5:48 PM
Jack you are incredible. I don't think I've been so excited for a software release since Kings Quest 2.

Animal
24 Jan 2007, 12:13 AM
This kind of thing is what I meant when I was responding to the jQuery bloggers on your blog.

They were saying how tiny jQuery was, but I was saying what's the point without a bunch of other javascript code which CREATES a complex document with the necessity for expression-based node selection?

Put jQuery aolne in a web page, and you have what? A way of selecting DOM nodes (to do WHAT with without a javascript widget library). Oh, and a few <blink> lookalikes.

DomQuery is an integral part of the Ext UI framework, not something which is inconveniently coupled to a useless waste of bandwidth!!!!

jack.slocum
24 Jan 2007, 7:36 AM
I am with you Animal. jQuery IMO is like a more useful (although not as thorough) version of dom+event+animation. I do respect that not every wants (or needs) a bigger lib, and for something simple a lib like jQuery (or YUI utilities, or prototype) makes sense.

I need to get back on the grid so I can get all this new stuff check in already!

brian.moeskau
24 Jan 2007, 10:43 AM
I don't think I've been so excited for a software release since Kings Quest 2.
I think you just gave away your age ;) I laughed my ass off when I read this.

manugoel2003
24 Jan 2007, 11:06 PM
Mindblowing.... really cool man..... is this a conspiracy or something?? I mean u r constantly eating away my code :D

ilazarte
25 Jan 2007, 9:40 AM
I don't think I've been so excited for a software release since Kings Quest 2.
I think you just gave away your age ;) I laughed my ass off when I read this.

i think it captures well how giddy i am haha :D