向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教程 。