How to use Chain Pattern with Self Revealing Module Pattern in JavaScript?

Question

I have the below code:

filtersManager = (function ($) {

    var that = this;

    function configure() {

        // some work

        return that;
    };

    function process() {

       // some work

        return that;
    }    

    return {
        // public functions
        configure: configure,
        process: process
    };
}(jQuery));

but when it's called using the below it fails:

filtersManager.configure().process();

Error: Object doesn't support property or method 'process'

whereas the below works:

filtersManager.configure();
filtersManager.process();

Answer 1

You are returning the wrong thing (this in a plain function invocation is the global object). You want to return the object that you originally created, which I will call the interface.

filtersManager = (function ($) {

    var interface = {
        // public functions
        configure: configure,
        process: process
    };

    function configure() {

        // some work

        return interface;
    };

    function process() {

       // some work

        return interface;
    }    

    return interface;
}(jQuery));

If you're wondering why I can reference the functions defined below, it's due to hoisting.

Answer 2

Immediate function is executed in global object (window) context. Try something similar to this:

filtersManager = (function ($) {

    var that = {};

    that.configure = function() {
        // some work
        return that;
    };

    that.process = function() {
        // some work
        return that;
    }

    return that;

}(jQuery));

UPD. Based on comments

Constructor pattern seems to fit your need better:

var FiltersManager = (function($) {

    function FiltersManager() {}

    FiltersManager.prototype = {
        configure: function() {
            console.log('configure');
            return this;
        },
        process: function() {
            console.log('process');
            return this;
        }
    }

    return FiltersManager;

}(jQuery));

new FiltersManager().configure().process();

Answer 3

As to continue what others have said , I think you confused with the function constructor syntax which would work , similar to what you've said ;

var G=function g()
{
  this.configure =function (){return this;}
  this.process  =function (){return this;}
};

var _= new G();




console.log(_.configure().process())

Answer 4

If you wanted to re-use the functions on other objects too, you could do it like this

filtersManager = function ($) {

    function configure() {

        // some work

        return this;
    };

    function process() {

       // some work

        return this;
    }    

    return {
        // public functions
        configure: configure,
        process: process
    };
}(jQuery);

(OTOH, if you wanted to create aliases to them, you would then have to bind them to the object)

Or if configure and process are quite short, simple functions :

filtersManager = (function ($) {

    return {
      
        // public functions
        configure: function () {

            // some work

            return this;
        },
      
        process: function () {

           // some work

            return this;
        }
    };
}(jQuery));