Does anyone know of a JS Chaining library that allows for deferred execution of methods?

Question

I'm looking for a library that allows me to easily chain together methods but defer their execution until arguments are provided further along in the chain:

chain
    .scanDirectory  ( '/path/to/scan' )
        .recursively()
        .for        ( /\.js$/i        )
    .cache()
    .provideTo      ( '0.locals'      )
        .as         ( 'scripts'       )
    .defer();

The important thing is that the code behind the scanDirectory function isn't actually called until it's defined that it should be recursive and looking for .js files.

I'm not quite sure how to logically set this up so that I can do something like:

chain
    .scanDirectory( '/path/to/scan' )
    .scanDirectory( '/another/path' )
        .for      ( /\.js$/i        ) // provided to both paths above?
    .doSomethingElse()

which is why I'm looking for a library that may have more mature ideas that accomplish this :)

Answer 1

This post talks about types of execution in JS, there are links to relevant libraries in the end of it

Execution in JavaScript

You have two types of execution in JS:

• Synchronous - stuff that happens right when it's called
• Asynchronous - stuff that happens when after the current code is done running, also what you refer to as deferred.

Synchronous

Synchronously, you can push actions and parameters to a queue structure, and run them with a .run command.

You can do something like:

var chain = function(){
   var queue = []; // hold all the functions

   function a(param){
       //do stuff, knowing a is set, may also access other params functions set
   }
   return {
       a:function(someParam){
          queue.push({action:a,param:someParam});
          return this;
       },
       ... // more methods
       run:function(){
           queue.forEach(function(elem){ // on each item
               elem.action.apply(null,param);//call the function on that item
           });
       }
   };
}

This will execute all the functions in the queue when you call run, syntax would be something like

chain().a(15).a(17).run();

Asynchronous

You can simply set a timeout, you don't need to use something like .run for this.

var chainAsync = function(){ // no need for queue

   function a(param){
       //do stuff, knowing a is set, may also access other params functions set
   }

   return {
       a:function(someParam){
          setTimeout(a,0,someParam);
          return this;
       },
       ... // more methods
   };
}

Usage would be something like

chain().a(16).a(17);

Some issues:

• If you want to share parameters between functions, you can store them somewhere in the object itself (have a var state in addition to the queue).

• It's either sync, or async. You can't detect one or the other by context. Workarounds are being built for ES6.

More resources

• For some implementation of something similar, you can see this question where I implement something similar.

• Promises tutorial - promises let you use this type of execution called CPS (continuation passing style) to great effect.

• Another nice post on promises.

• Bluebird - the fastest and likely best promise library.

• Q - probably the most well known and widely used library for chaining execution and promises in JavaScript. Used it several times myself.

• Question here on promises and their benefits.

• How does basic chaining work in JavaScript - another relevant question here in SO.

Answer 2

Note sure you'll find an all-around working solution for this.

Looks like you're looking for a generic solution to something that would require to have been already baked into the library. I mean, I'm sure there are libraries that have this functionality, but they wouldn't hook auto-magically on other libraries (expect if they have specifically implemented overrides for the right version of the libraries you want to target, maybe).

However, in some scenarios, you may want to look at the Stream.js library, which probably covers enough data-related cases to make it interesting for you:

Answer 3

I don't know whether there's a library to build such methods, but you can easily build that feature yourself. Basically, it will be a settings object with setter methods and one execute function (in your case, defer).

function Scanner() {
    this.dirs = [];
    this.recurse = false;
    this.search = "";
    this.cache = false;
    this.to = "";
    this.name = "";
}
Scanner.prototype = {
    scanDirectory: function(dir) {
        this.dirs.push(dir);
        return this,
    },
    recursively: function() {
        this.recurse = true;
        return this;
    },
    for: function(name) {
        this.search = name;
        return thsi;
    },
    cache: function() {
        this.cache = true;
        return this;
    },
    provideTo: function(service) {
        this.to = service;
        return this;
    },
    as: function(name) {
        this.name = name;
        return this;
    },
    defer: function() {
        // now, do something with all the given settings here
    },
    doSomethingElse: function() {
        // now, do something else with all the given settings here
    }
};

That's the standard way to build a fluent interface. Of course, you could also create a helper function to which you pass a methodname-to-setting map which writes the methods for you if it gets too lengthy :-)

Answer 4

You need a queue to maintain the async and sync-ness of your method chain.

Here is an implementation using jQuery.queue I did for a project:

function createChainable(options) {
    var queue = [];

    var chainable = {

        method1 : function () {
            queue.push(function(done){
                // code here
                done();
            });
            return chainable;
        },

        exec1 : function () {
            queue.push(function(done){
                // code here
                done();
            });
            $.queue(ELEMENT, QUEUE_NAME, queue).dequeue(QUEUE_NAME);
            return chainable;
        }
    };

    return chainable;
}

Answer 5

As @Jordan Doyle said in his comment:

Just return this

So every method in your objects should return the object in the return statement so that you can chain on another method.

For example:

var obj = new (function(){

   this.methOne = function(){
      //...
      return this;
   }

   this.methTwo = function(){
      //...
      return this;
   }

   this.methThree = function(){
      //...
      return this;
   }

})();

//So you can do:
obj.methOne().methTwo().methThree();