向javascript對象添加行為

Question

我是剛開始使用angular的人，並且對將行為添加到angular中的對象有疑問。

我有一種情況，我得到一個對象或對象數組說使用$http

var person =
    {
      id : 123,
      firstname : "james",
      lastname : "bond",
      username : "james00",
      profileGuid : "DSKFSJKFBSFBJBSFKJBAKBDS",
      projects : [
             {
                id : 1,
                name : "gold finger"
             }
       ] 
    }

我想添加類似的行為

 var spyBehavior = 
 {
    greet : function(){
        return this.lastname + " " + this.firstName + " " + this.lastName;
    },

    hasExperience : function(){
      this.projects && this.projects.length && this.projects.length > 0
    }
 }

目前，我使用angular.extend(person, spyBehavior)

• 使用此類spyBehavior對象添加行為的利弊是什么？
• 應該將其定義為有角度的服務嗎？ -在這種情況下，我會放棄this的引用
• 這是否應該在有角度的世界之外，並作為一個簡單的JavaScript對象存在，該對象將$ http輸出包裝起來？ 我該怎么做？

Answer 1

我認為您想要的是某種模型。 因為服務是單例的，所以我總是以以下方式將模型定義為工廠。

angular.module('myApp').factory('User', function() {
  var _greet = function() {
    console.log("hello");
  };
  var User = function(data) {
    angular.extend(this, {
      email: null,
      name: null
      greet: _greet
    }, data);
  };
  return User;
});

然后，您可以在所需的任何模塊中注入用戶“模型”。 如果要獲取該模型的新實例，只需執行

var user = new User(data);

遵循單一責任方法，此對象有點愚蠢。 它只知道它是自己的屬性，如何處理它們等等。 如果要添加一些行為，例如通過$http更新此對象，只需將$http服務注入到User模型中，然后執行所需的操作即可。 只要確定，不要與其他模型建立不必要的依賴關系。

Answer 2

我用來在Factory提供程序中定義原型對象：

angular.module('MyApp').factory('SpyBehaviour', function(){
    var SpyBehaviour = {
        greet : function(){
            return this.lastname + " " + this.firstName + " " + this.lastName;
        },

        hasExperience : function(){
            this.projects && this.projects.length && this.projects.length > 0
        }
    };

    return SpyBehaviour;
});

然后，用原型創建一個新對象，並使用$ http服務的結果對其進行擴展。 如果使用transformResponse函數 ，則$http Promise將與擴展對象一起解決。

$http.({
    method: 'GET',
    url: '/persons',
    transformResponse: function (data) {
        var persons = JSON.parse(data);

        return persons.map(function (person) {
            return angular.extend(
                Object.create(SpyBehaviour),
                person
            );
        });
    }
});

Answer 3

如果要從HTTP后端檢索模型，則AngularJS具有一個很酷的功能，稱為transformResponse 。 您可以為特定的$http調用指定transformResponse函數。 該函數將接收來自http請求的響應作為參數，根據您的實現對其進行操作，然后將其返回。 當然，由於angular $resource是建立在$http之上的，因此您可以在兩者中使用transformResponse 。

簡而言之，如果您想接待一群人並用一些功能來裝飾它，這就是我要做的：

• 實現映射到您的API的People $resource ；
• 實現一個功能，給定一系列人員，即可添加所需的行為。
• 將上述功能指定為人員資源的transformResponse參數。

您完成了。 在請求結束時您將得到一系列具有附加功能的人員。 您可以使用簡單的$http請求執行完全相同的操作，可以用相同的方式指定transformResponse屬性。

另請參閱此簡短的egghead.io教程 。