Créer une fonction chainable en javascript

Qu’est-ce qu’une fonction chainable en Javascript ?

C’est une fonction sur laquelle on peut directement appeler d’autres fonctions (qui lui appartiennent). Exemple :

var Chainable = function(){
};
var ch = new Chainable();
ch.call().loaded().triggerStatus().updateStatusToClose();

Vous l’avez compris c’est plutôt pratique ! Voyons comment faire.

var chainable = function(){
    _status = 'nulled';
    var checkStatus = function(){
        console.log('Status : '+this._status);
    };
    this.call = function(){
        console.log('call function Called');
        this._status = 'init';
        checkStatus.apply(this);
        return this;
    };
    this.loaded =function(){
        console.log('loaded function Called');
        this._status = 'loaded';
        checkStatus.apply(this);
        return this;
    };
    this.triggerStatus =function(){
        console.log('triggerStatus function called');
        checkStatus.apply(this);
        return this;
    };
    this.updateStatusToClose = function(){
        console.log('updateStatusToClose function called');
        this._status = 'close';
        checkStatus.apply(this);
        return this;
    };
};
var ch = new Chainable();
ch.call().loaded().triggerStatus().updateStatusToClose();

Cool ! Notre fonction est chainable ! Mais allons plus loin, nous allons créer une variable “nombre” et une fonction de callback à “triggerStatus” qui devra directement avoir accès au this et qui testera la valeur de nombre. Si nombre est pair on applique un status “validate” et on continue le script, si nombre est impair on arrête tout!

var chainable = function(){
    _status = 'nulled';
    _number = 0;
    _stopExecution = false;
    var checkStatus = function(){
        console.log('Status : '+this._status);
    };
    this.getNumber = function(){
        return this._number;
    };
    this.call = function(){
        console.log('call function Called');
        this._status = 'init';
        this._number = Math.round(Math.random()*100);
        checkStatus.apply(this);
        return this;
    };
    this.loaded =function(){
        console.log('loaded function Called');
        this._status = 'loaded';
        checkStatus.apply(this);
        return this;
    };
    this.triggerStatus =function(callback){
        console.log('triggerStatus function called');
        checkStatus.apply(this);
        if(typeof callback !== 'undefined'){
            callback.apply(this);
        }
        return this;
    };
    this.updateStatusToClose = function(){
        if(!this._stopExecution){
            console.log('updateStatusToClose function called');
            this._status = 'close';
            checkStatus.apply(this);
            return this;
        }
    };
};
var ch = new chainable();
ch.call().loaded().triggerStatus(function(){
    if(this.getNumber()%2){
        this._status = "validate";
        this.triggerStatus();
    }else{
        console.log('error');
        this._stopExecution = true;
    }
}).updateStatusToClose();

Vous savez maintenant comment faire pour réaliser des fonctions chainables.