模型数据和行为放在哪里?[tl; 博士 使用服务]

2020/10/02 07:21 · javascript ·  · 0评论

我正在为最新项目使用AngularJS。在文档和教程中,所有模型数据都放入控制器范围。我知道控制器必须可用,因此必须在相应的视图内可用。

但是我不认为该模型应该在那里实际实施。它可能很复杂,并且具有私有属性。此外,可能要在另一个上下文/应用程序中重用它。将所有内容放入控制器中完全破坏了MVC模式。

任何模型的行为都一样。如果我要使用DCI体系结构并将行为与数据模型分开,则必须引入其他对象来保存行为。这可以通过介绍角色和上下文来完成。

DCI == d ATA Ç ollaborationnteraction

当然,可以使用简单的javascript对象或任何“类”模式来实现模型数据和行为。但是AngularJS会怎么做呢?使用服务?

所以归结为这个问题:

遵循AngularJS最佳实践,如何实现与控制器分离的模型?

如果您希望多个控制器可以使用某些服务,则应使用服务。这是一个简单的示例:

myApp.factory('ListService', function() {
  var ListService = {};
  var list = [];
  ListService.getItem = function(index) { return list[index]; }
  ListService.addItem = function(item) { list.push(item); }
  ListService.removeItem = function(item) { list.splice(list.indexOf(item), 1) }
  ListService.size = function() { return list.length; }

  return ListService;
});

function Ctrl1($scope, ListService) {
  //Can add/remove/get items from shared list
}

function Ctrl2($scope, ListService) {
  //Can add/remove/get items from shared list
}

我目前正在尝试这种模式,尽管不是DCI,它提供了经典的服务/模型解耦(以及用于与Web服务对话的服务(又称为模型CRUD),以及定义对象属性和方法的模型)。

请注意,只有在模型对象需要在其自身属性上运行方法的情况下,我才使用此模式,我可能会在所有地方使用该模式(例如改进的getter / setter方法)。并不是在为每种服务系统地提倡这样做。

编辑:我曾经认为这种模式会违背“ Angular模型是普通的旧javascript对象”的口头禅,但是在我看来,现在这种模式非常好。

编辑(2):更清楚地说,我仅使用Model类来分解简单的getter / setter方法(例如:在视图模板中使用)。对于大型业务逻辑,我建议使用“了解”模型但与它们分开的单独服务,并且仅包含业务逻辑。如果需要,可将其称为“业务专家”服务层

service / ElementServices.js(注意元素如何在声明中注入)

MyApp.service('ElementServices', function($http, $q, Element)
{
    this.getById = function(id)
    {
        return $http.get('/element/' + id).then(
            function(response)
            {
                //this is where the Element model is used
                return new Element(response.data);
            },
            function(response)
            {
                return $q.reject(response.data.error);
            }
        );
    };
    ... other CRUD methods
}

model / Element.js(使用angularjs Factory,用于创建对象)

MyApp.factory('Element', function()
{
    var Element = function(data) {
        //set defaults properties and functions
        angular.extend(this, {
            id:null,
            collection1:[],
            collection2:[],
            status:'NEW',
            //... other properties

            //dummy isNew function that would work on two properties to harden code
            isNew:function(){
                return (this.status=='NEW' || this.id == null);
            }
        });
        angular.extend(this, data);
    };
    return Element;
});

Angularjs文档明确指出:

与许多其他框架不同,Angular对模型没有任何限制或要求。没有类可以继承或使用特殊的访问器方法来访问或更改模型。该模型可以是原始,对象哈希或完整的对象类型。简而言之,模型是一个普通的JavaScript对象。

AngularJS开发人员指南-V1.5概念-模型

因此,这取决于您如何声明模型。这是一个简单的Javascript对象。

我个人不会使用Angular Services,因为它们的作用类似于您可以使用的单例对象,例如,在应用程序中保持全局状态。

DCI是一个范式,因此,没有语言AngularJS的实现方式,无论语言是否支持DCI。如果您愿意使用源代码转换,那么JS会很好地支持DCI,如果您不愿意使用JS,则会有一些缺点。再说一次,DCI与依赖注入没有更多的关系,就像说C#类已经并且绝对不是服务一样。因此,使用angulusJS进行DCI的最好方法是采用JS方式进行DCI,这与DCI的最初编写方式非常接近。除非您进行源转换,否则您将无法完全完成转换,因为角色方法即使在上下文之外也将成为对象的一部分,但这通常是基于方法注入的DCI的问题。如果您查看fullOO.info在DCI的权威站点,您可以查看它们也使用方法注入的ruby实现,或者您可以在此处查看有关DCI的更多信息。它主要与RUby示例有关,但DCI内容与此无关。DCI的关键之一是系统的工作与系统的工作是分开的。因此,数据对象相当笨拙,但是一旦绑定到上下文角色中,角色方法就可以使某些行为可用。角色只是一个标识符,仅此而已;当通过该标识符访问对象时,可以使用角色方法。没有角色对象/类。使用方法注入时,角色方法的作用域与所描述的不完全相同,而是很接近。JS中的上下文示例可能是

function transfer(source,destination){
   source.transfer = function(amount){
        source.withdraw(amount);
        source.log("withdrew " + amount);
        destination.receive(amount);
   };
   destination.receive = function(amount){
      destination.deposit(amount);
      destination.log("deposited " + amount);
   };
   this.transfer = function(amount){
    source.transfer(amount);
   };
}

关于AngularJS中的模型的本文可能会有所帮助:

http://joelhooks.com/blog/2013/04/24/modeling-data-and-state-in-your-angularjs-application/

正如其他发布者所言,Angular没有提供现成的用于建模的基类,但是可以有用地提供以下功能:

  1. 与RESTful API交互并创建新对象的方法
  2. 在模型之间建立关系
  3. 在持久化到后端之前验证数据;对显示实时错误也很有用
  4. 缓存和延迟加载以防止产生浪费的HTTP请求
  5. 状态机挂钩(保存,更新,创建,新建等之前/之后)

ngActiveResource(https://github.com/FacultyCreative/ngActiveResource是一个很好地完成所有这些事情的库完全公开-我写了这个库-我已经成功地用它来构建几个企业级应用程序。它已经过良好的测试,并提供了Rails开发人员应该熟悉的API。

我和我的团队将继续积极开发该库,并希望看到更多Angular开发人员对此作出贡献并进行测试。

这是一个较旧的问题,但是我认为该主题比Angular 2.0的新方向更重要。我想说的一种最佳实践是编写对特定框架的依赖关系尽可能少的代码。仅在增加直接价值的地方使用框架特定的部分。

当前,似乎Angular服务是将其引入下一代Angular的少数几个概念之一,因此遵循将所有逻辑移至服务的一般准则可能是明智的。但是,我认为即使不直接依赖Angular服务也可以创建解耦模型。创建仅具有必要的依赖关系和责任的自包含对象可能是解决方法。进行自动化测试时,也使生活变得更加轻松。如今,单一职责是一项繁琐的工作,但这确实很有意义!

这是一个示例的示例,我认为该示例非常适合将对象模型与dom分离。

http://www.syntaxsuccess.com/viewarticle/548ebac8ecdac75c8a09d58e

一个关键目标是以一种使代码在单元测试中和在视图中一样易于使用的方式来构造代码。如果您达到目的,则可以编写出切实可行的测试。

我已经尝试在这篇博客文章中解决这个确切的问题

基本上,数据建模的最佳场所是服务和工厂。但是,根据获取数据的方式以及所需行为的复杂性,有许多不同的实现方法。Angular当前没有标准方法或最佳实践。

该帖子介绍了三种方法,分别使用$ http$ resourceRestangular

这是每个示例代码,getResult()在Job模型上具有自定义方法:

矩形(容易松开):

angular.module('job.models', [])
  .service('Job', ['Restangular', function(Restangular) {
    var Job = Restangular.service('jobs');

    Restangular.extendModel('jobs', function(model) {
      model.getResult = function() {
        if (this.status == 'complete') {
          if (this.passed === null) return "Finished";
          else if (this.passed === true) return "Pass";
          else if (this.passed === false) return "Fail";
        }
        else return "Running";
      };

      return model;
    });

    return Job;
  }]);

$ resource(稍微复杂一些):

angular.module('job.models', [])
    .factory('Job', ['$resource', function($resource) {
        var Job = $resource('/api/jobs/:jobId', { full: 'true', jobId: '@id' }, {
            query: {
                method: 'GET',
                isArray: false,
                transformResponse: function(data, header) {
                    var wrapped = angular.fromJson(data);
                    angular.forEach(wrapped.items, function(item, idx) {
                        wrapped.items[idx] = new Job(item);
                    });
                    return wrapped;
                }
            }
        });

        Job.prototype.getResult = function() {
            if (this.status == 'complete') {
                if (this.passed === null) return "Finished";
                else if (this.passed === true) return "Pass";
                else if (this.passed === false) return "Fail";
            }
            else return "Running";
        };

        return Job;
    }]);

$ http(核心):

angular.module('job.models', [])
    .service('JobManager', ['$http', 'Job', function($http, Job) {
        return {
            getAll: function(limit) {
                var params = {"limit": limit, "full": 'true'};
                return $http.get('/api/jobs', {params: params})
                  .then(function(response) {
                    var data = response.data;
                    var jobs = [];
                    for (var i = 0; i < data.objects.length; i ++) {
                        jobs.push(new Job(data.objects[i]));
                    }
                    return jobs;
                });
            }
        };
    }])
    .factory('Job', function() {
        function Job(data) {
            for (attr in data) {
                if (data.hasOwnProperty(attr))
                    this[attr] = data[attr];
            }
        }

        Job.prototype.getResult = function() {
            if (this.status == 'complete') {
                if (this.passed === null) return "Finished";
                else if (this.passed === true) return "Pass";
                else if (this.passed === false) return "Fail";
            }
            else return "Running";
        };

        return Job;
    });

博客文章本身更详细地介绍了为什么您可能使用每种方法的原因以及如何在控制器中使用模型的代码示例:

AngularJS数据模型:$ http VS $ resource VS Restangular

Angular 2.0有可能为数据建模提供更强大的解决方案,使每个人都在同一页面上。

本文地址:http://javascript.askforanswer.com/moxingshujuhexingweifangzainalitl-boshi-shiyongfuwu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!