Chaining methods

[wiskers]

Some javascript libraries like jquery or prototype can chain methods like so

$('element').html('bla').show('fast');

I can't figure out how this is done, does anyone have a simplified example?

Thanks

[creole]

jQuery has a documentation page:
http://jquery.com/docs/fx/

I'd also suggest getting on the jQuery mailing list: discuss@jquery.com. You can also find a searchable archive of all the previous posts:
http://www.nabble.com/JQuery-f15494.html

[wiskers]

It's documentation on how to use jquery, not on the internals of jquery itself.

Thanks though.

[creole]

I understand that it's the documentation. Did you look through it at all? There's examples in there. Did you look through the Nabble forum? There's examples in there of code chains that are 5 or 6 inches long.

John, the jQuery creator, is working on finalizing jQuery and along with that will come proper documentation.

[NakedIntruder]

I'd like to know this too, it's something to do with Object Oriented JavaScript and using return in your functions I think, the return part is assumption based on this page;

"Your function must return the $() object, unless explicity noted otherwise."
- http://jquery.com/docs/Plugin/

The answer's in here somewhere
http://www.google.co.uk/search?hl=en...G=Search&meta=

[reminder]

its easy to play with javascript when you once learn visual basic and c#
object oriented as well

[NakedIntruder]

its easy to play with javascript when you once learn visual basic and c#
object oriented as well

You sound like you could tell us how to get started with it *nudge*

[reminder]

cross-browser.com
script.aculo.us

check these 2 sites and look how they construct the libraries..
cheers

[wiskers]

Those libraries are far too complicated (for me) to find the part where they implement this chaining functionality, unfortunately.

[creole]

Here's a post that someone on the jQuery email list made:
http://www.nabble.com/Tip%3A-jQuery-...tf1972798.html

and the full text
jQuery chains are one of the best features of jQuery, but did you know
that the code doesn't have to be on the same line? For example take
this chain (totally fictional, but I think it demonstrates the point):

$("table").each(addToList).addClass("zebratable").find("tr").mouseover(highlight).mouseout(unhighlight).find("td:even").addClass("even").end().find("td
a").click(showpopup).end().end().fadeIn();

Can be quite hard to decipher code like that. Thankfully there is a better way:

$("table")
// add to list of tables
.each(addToList)
// style it like a zebra table
.addClass("zebratable")
// get rows
.find("tr")
// apply row highlight function
.mouseover(highlight)
// apply row unhighlight
.mouseout(unhighlight)
// get even cells
.find("td:even")
// apply even class
.addClass("even")
// finished with even cells
.end()
// get all links within table cells
.find("td a")
// make them show a popup rather than going to the page
.click(showpopup)
// finished with links
.end()
// finished with table rows
.end()
// fade in the table
.fadeIn();

I have used this method before (found it out by accident) and it
allows you to use a chain while still allowing comments. By biggest
chain has been 6 so far, but I could do longer ones in the future.

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

[wiskers]

Um creole, that post does not explain the MECHANICS of this technique, the design pattern used if you will, e.g. how I can extract this functionality that is inherent to jquery (chaining) and a few other libraries and add it to my own.

It is not a standard javascript functionality.

[NakedIntruder]

Hey wiskers, have you done much with Object Oriented JavaScript? I'm sure it's this that it's based around.

[NakedIntruder]

haha, unbelievably an entire year later I'm still looking for this. I can't find any articles anywhere on this anywhere.

I don't want to know how I can chain jQuery $() methods as I can do that already. I'd like to know how to create an object of my own, completely seperate from jQuery and whose methods I can chain, in a similar way to jQuery.

Really hope someone can help, I can't believe it's been so hard to find info on this.

I've tried to do it myself, but the thing that confuses me is that the jQuery $() object can be called as a function eg: $('.someclass').get() but it's also an object as it has methods eg: $.someplugin()

Can anyone confirm this assumption? There's nothing special about $ is there? My assumption is that $ is just the chosen name for the jQuery object rather than something part of the JavaScript language.

[stereofrog]

The answer is actually simple: just return "this" from the method that should be "chainable". An example

StringBuilder = {
	b: '',
	
	add: function(str) {
		this.b += str;
		return this;
	},
	remove: function(str) {
		this.b = this.b.split(str).join('');
		return this;
	},
	text: function() {
		return this.b;
	}
}

alert(
	StringBuilder.add('foo').add('bar').remove('ob').text()
)

[NakedIntruder]

Really appreciate that stereofrog, thanks.

I'd made it this far already though unfortunately, what I'm stuck on at this stage is...

that the jQuery $() object can be called as a function eg: $('.someclass').get() but it's also an object as it has methods eg: $.someplugin()

...applied to your example (without remove) is me looking to be able to do both;

 StringBuilder.add('foo').add('bar').text()

(foobar)

and

 StringBuilder('some text: ').add('foo').add('bar').text()

(some text: foobar)

So you can pass in a subject which the methods in the chain can all work against.

Any ideas on this area? Thanks again for your help.

[stereofrog]

We have to declare our object as a function:

function clone(obj) {
	var p = {}
	for(var t in obj) p[t] = obj[t];
	return p;
}
StringBuilder = function(text) {
	var p = clone(StringBuilder);
	p.buf = text;
	return p;
}
StringBuilder.buf = '';
StringBuilder.add = function(str) {
	this.buf += str;
	return this;
}
StringBuilder.text = function() {
	return this.buf;
}