如何在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));