2

i've searched on google, and read many articles about js pattern, n get confused. I search on stackoverflow, and still confused. So, i think, i have to ask here. (Im still newbie in javascript)

I want to "create the module, singleton or something pattern, and then roll/call multiple method in the same time".

Exmple: Yourlib.getId('elmID').setColor('somecolor').setHtml('somehtml').show().blaa.blaa.blaa

How to create the basic pattern?

var Yourlib = (function() {
    var anyPrivateVar = blablabla;
    anyFunctions(){
        any stuff...
    }

    return {
        setHtml: blablabla,
        method2: function() {
            anything... 
        }
        getId: function() {
            anything...
        },
        setColor: function() {
            anything...
        },
        show: function() {
            anything...
        }
    }
}())

How to create the pattern, so i can call/roll the method in same time? Yourlib.getId('elmID').setColor('somecolor').setHtml('somehtml').show().blaa.blaa.blaa

Improve this question
4
  • Add return this to the end of each of these (non-getter) methods. Commented May 9, 2013 at 10:49
  • Search for Fluent interfaces or method chaining Commented May 9, 2013 at 10:52
  • @raina77ow , Thank You, i'll add return this to each of (non-getter) methods. Thanks for your help.. Commented May 9, 2013 at 12:45
  • @c.P.u1, Yes, i should search more about method chaining. I just learned the term "chaining" method today. Commented May 9, 2013 at 12:48

4 Answers 4

Reset to default
1

This pattern is sometimes called "chaining" or, when used for an options class that will ultimately construct some other class, the "builder" pattern.

Basically, the way to do it is have each function return an object on which subsequent methods may be invoked (typically the object is the same as the one on which the current method is invoked).

In JavaScript, you would do it like this:

 var Point = function(x, y) {
   this.x = x;
   this.y = y;
 };

 var PointBuilder = function() {
   this.x = null;
   this.y = null;
 };

 PointBuilder.prototype.setX = function(x) {
   this.x = x; 
   return this;  // <= so that one can call .setY() on the result
 };

 PointBuilder.prototype.setY = function(y) {
   this.y = y; 
   return this;  // <= so that one can call .setX() on the result
 };

 PointBuilder.prototype.build = function() {
   return new Point(this.x, this.y);
 };

The code above is a trivial example, but you get the idea. Basically, return this from your methods or return some other object that provides the remaining available methods.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for answering.. i will learn more about this, because sometimes it's confusing, where the 'this' is referencing to
0

I think you are asking for chaining methods. Here is a simple example. The key is to return object back.

var obj = {  
    method1: function() { alert('first');   return obj; },
    method2: function() { alert('second');  return obj; },
    method3: function() { alert('third');   return obj; },
    method4: function() { alert('fourth');  return obj; }
}

obj.method1().method2().method3().method4();

Live Demo

Improve this answer

3 Comments

Whoaa thank you Sir! It works. So, every methods should return back the obj?
Yes, that's how chaining works. Please accept the answer if it helped you.
Thank you sir! Sure, the answer helped me.. This is accepted answer, and i want to vote up, but not enough reputation :D
0

It's called method chaining and is employed heavily in jQuery. You simply return the current context in the methods you want to be able to chain: 

show: function() {
    // allow chaining
    return this;
}
Improve this answer

2 Comments

Thank you sir! Yes, chaining methods is what im looking for. And i will learn about returning "this"
This refers to the current scope and it can sometimes be confusing in JavaScript. In your case it's a reference to the module which contains the chainable method.
0

You should take a look at "fluent" apis too. I personally don't think too much of fluent apis but people do like how they read especially while writing tests.

Also chaining can be a great way to "defer" actual calculation (sort of lazy evaluation) - see underscore's _.chain() method in conjuction with its value() method [I don't think underscore actually does anything too fancy though]

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.