SitePoint Sponsor |
|
User Tag List
Results 1 to 16 of 16
Thread: Chaining methods
-
Jul 10, 2006, 01:49 #1
- Join Date
- May 2006
- Posts
- 89
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Chaining methods
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
-
Jul 19, 2006, 08:06 #2
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.htmlAdobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Jul 19, 2006, 12:09 #3
- Join Date
- May 2006
- Posts
- 89
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's documentation on how to use jquery, not on the internals of jquery itself.
Thanks though.
-
Jul 19, 2006, 12:25 #4
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Jul 19, 2006, 14:00 #5
- Join Date
- Jul 2006
- Location
- Leeds, UK
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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=
-
Jul 19, 2006, 14:05 #6
- Join Date
- Mar 2004
- Posts
- 1,647
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
its easy to play with javascript when you once learn visual basic and c#
object oriented as well
-
Jul 19, 2006, 14:10 #7
- Join Date
- Jul 2006
- Location
- Leeds, UK
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by reminder
-
Jul 19, 2006, 14:11 #8
- Join Date
- Mar 2004
- Posts
- 1,647
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
cross-browser.com
script.aculo.us
check these 2 sites and look how they construct the libraries..
cheers
-
Jul 20, 2006, 01:14 #9
- Join Date
- May 2006
- Posts
- 89
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Those libraries are far too complicated (for me) to find the part where they implement this chaining functionality, unfortunately.
-
Jul 20, 2006, 07:43 #10
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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/Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Jul 20, 2006, 12:53 #11
- Join Date
- May 2006
- Posts
- 89
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 20, 2006, 13:22 #12
- Join Date
- Jul 2006
- Location
- Leeds, UK
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey wiskers, have you done much with Object Oriented JavaScript? I'm sure it's this that it's based around.
-
Jul 23, 2007, 01:29 #13
- Join Date
- Jul 2006
- Location
- Leeds, UK
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 23, 2007, 03:24 #14
- Join Date
- Apr 2004
- Location
- germany
- Posts
- 4,324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The answer is actually simple: just return "this" from the method that should be "chainable". An example
Code: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() )
-
Jul 23, 2007, 04:15 #15
- Join Date
- Jul 2006
- Location
- Leeds, UK
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Really appreciate that stereofrog, thanks.
I'd made it this far already though unfortunately, what I'm stuck on at this stage is...
...applied to your example (without remove) is me looking to be able to do both;
Code JavaScript:StringBuilder.add('foo').add('bar').text()
and
Code JavaScript:StringBuilder('some text: ').add('foo').add('bar').text()
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.
-
Jul 23, 2007, 06:57 #16
- Join Date
- Apr 2004
- Location
- germany
- Posts
- 4,324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
We have to declare our object as a function:
Code: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; }
Bookmarks