SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    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

  2. #2
    SitePoint Wizard creole's Avatar
    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.html
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Enthusiast
    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.

  4. #4
    SitePoint Wizard creole's Avatar
    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

  5. #5
    SitePoint Enthusiast
    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=

  6. #6
    SitePoint Wizard
    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

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Location
    Leeds, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by reminder
    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*

  8. #8
    SitePoint Wizard
    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

  9. #9
    SitePoint Enthusiast
    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.

  10. #10
    SitePoint Wizard creole's Avatar
    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

  11. #11
    SitePoint Enthusiast
    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.

  12. #12
    SitePoint Enthusiast
    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.

  13. #13
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Location
    Leeds, UK
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    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.

  14. #14
    SitePoint Wizard stereofrog's Avatar
    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()
    )

  15. #15
    SitePoint Enthusiast
    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...

    Quote Originally Posted by NakedIntruder View Post
    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;

    Code JavaScript:
     StringBuilder.add('foo').add('bar').text()
    (foobar)

    and

    Code JavaScript:
     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.

  16. #16
    SitePoint Wizard stereofrog's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •