JavaScript 流畅的接口，如 Angular.js答案

【问题标题】：JavaScript fluent interfaces like in Angular.jsJavaScript 流畅的接口，如 Angular.js
【发布时间】：2014-02-08 14:24:04
【问题描述】：

我正在使用 Angular.js，尤其是 $http 和以下代码：

$http.get('test.url').onsuccess(function(res){});

我想知道如何编写这样的结构。第一次尝试是在 Angular.js 代码中确定这一点，但我的 JavaScript 知识可能太弱而无法理解所有代码。

所以，我自己尝试了以下方法：

var command = function(){
    this.execute = function(cmd){
        setInterval(function(){
            // What to call here?
        }, 60 * 60, 1000);

        return this;
    };

    this.onsuccess = function(callBack){
            return this;
    }
}

var bla = new command();

bla.execute("myCommand").onsuccess(function(result){
    console.log(result);
});

我很确定我的代码是错误的。我该怎么打电话才能让所有这些东西正常工作？

【问题讨论】：

这些都是承诺。它们是一种抽象，可让您轻松编写延续。这是a great read。 This is also worth checking.

标签： javascript angularjs interface fluent

【解决方案1】：

这些都是承诺。它们是一种抽象，可让您轻松编写延续。这是a great read。 This is also worth checking.

一个非常幼稚和基本的方法来做你在这里尝试的事情是：

var command = function(){
    var cbs = [];
    this.execute = function(cmd){
        setInterval(function(){
            cbs.forEach(function(f){ f();}); // call all callbacks
        }, 60 * 60, 1000);

        return this;
    };

    this.onsuccess = function(callBack){
         // a return this here would require a queue- and do return a different generic command
         // so we're not doing it here
         cbs.push(callBack); // add a callback to the list of handlers
    }
}

使用像 Bluebird 这样的承诺库 - 你会这样做：

Promise.delay(1000).then(function(yourThing){

});

【讨论】：

【解决方案2】：

这些 fluent 接口与其他 fluent 接口的不同之处在于每个方法都返回一个promise。 jQuery 有自己的 promise 方法，但可以与 q 一起使用。 Angular 使用 q ($q)。您还可以将q 用于 xhr 请求以外的异步操作。

【讨论】：

【解决方案3】：

Angular 可以使用 Promise，但您可以在没有 Promise 的情况下实现相同的功能：

var command = function(){
    this.execute = function(cmd){
        var theCallback;
        setInterval(function(){

            if(typeof theCallback === "function"){
                theCallback();
            }

        }, 60 * 60, 1000);

        return {
            onsuccess: function(callback){
                theCallback = callback;
            } 
        };
    };
}

var bla = new command();

bla.execute("myCommand").onsuccess(function(result){
    console.log(result);
});

【讨论】：