AngularJS and javascript oop

AngularJS and javascript oop

本文关键字：oop javascript and AngularJS      更新时间：2023-09-26

我正在angularjs中开发大型前端应用程序。

我想知道这种方法是否可以用于angularjs，以及是否存在漏洞、性能问题或其他缺点。

控制器中的第一个代码

 function ServiceHandler() {
         var self = this;
         self.init();
    }
    ServiceHandler.prototype = {
         constructor : ServiceHandler,
         request : undefined,
         init : function(){
           self.callService();
         },
         createRequest : function() {
             self.request = {};
             self.request = Service.getRequest();
         },
         callService : function() {
             self.iAmLoading = true;
             self.createRequest();
             Service.callService(self.request).then(function(response) {
                  self.iAmLoading = false;
                  if (angular.isDefined(response) && angular.isDefined(response.data)) {
                       self.handleRequest(response);
                  }
              }, function(error) {
                  self.handleSystemError(error);
              });
         },
         handleRequest : function(response) {
             if (angular.isUndefined(self.response)) {
                    self.response = {};
             }
             if (angular.isUndefined(response.data)) {
                    self.handleError(response);
             }else {
             self.response = response.data;
             }
          },
          handleSytemError : function(error) {
              // show 404
          },
          handleError : function(response) {
              // think on what to do with your response
          }
    }

然后我用控制器初始化方法将其绑定

$scope.init(){
    $scope.myServiceHandler = new ServiceHandler(); // in this manner i call the service first time because the constructor call the init method on my ServiceHandler object also
}

我将其与绑定在dom中

<div ng-controller="myController" ng-init="init()">

在html中，我可以用以下内容引用我的响应：

{{myServiceHandler.response.myResponseProperty}}

如果我想召回我的服务，我可以：

<button ng-click='myServiceHandler.callService()'></button>

就我个人而言，我认为这种结构的优点是代码的组织，而且这种结构似乎更面向项目，实现更有趣

让我知道你的想法。谢谢和问候Antonio

PS-我为这个问题写了这个代码，我写得很快，我认为这是有效的，但我不是100%肯定的，它没有经过测试：）我已经写过其他类似的控制器，它们现在正在生产中，似乎工作得很好。

PS2-教我英语，我现在正在学习，我现在在Duolingo上只有1500 xp：）：）

据我所知，如果采用这种方法，您可以使用Angular's Service Provider。除了每次调用具有代码为$scope.myServiceHandler = new ServiceHandler();的作用域的控制器时，您实际上想要创建新的object。我怀疑您的ServiceHandler构造函数是否是必要的，因为对于Anggular's controllers方法，我更喜欢使用singleton而不是构造函数，因为控制器通常调用不止一次。

我建议在控制器上使用工厂，而不是硬编码的服务处理程序，通常服务是您可以在应用程序上重用的代码和功能，所以如果您正在开发一个巨大的前端应用程序，我会将该服务设置为工厂。

之后，您可以将服务注入到需要的控制器中。

创建服务/工厂的优势：

  • 易于测试

  • 易于维护和扩展

  • 更多的是面向对象的

  • 所有控制器的单一实例（更好的内存使用率）

  • 更优雅。。（如果你的老板是一个优雅的程序员）

    想象一下，你在另一个控制器中需要这个serviceHandler，最后你在每个控制器中都有这个硬编码。。如果必须更改/扩展serviceHandler，则必须为每个控制器执行此操作，但如果使用工厂，则需要在服务定义中执行一次。

如果你用工厂创建serviceHandler，你的控制器会看起来像：

theApp.controller('controller', ['$scope','serviceHandler', function($scope, serviceHandler){
    serviceHandler.init(); // is practically the same of ng init
    $scope.recall = serviceHandler.callService;
}]);

通过这种方式，您可以修改serviceHandler，并在每个使用它的控制器中注入这个serviceHandler。您的服务代码是可以的，但最好在工厂/服务/提供者中创建服务，而不是在每个控制器中创建硬编码的服务，因为这是单个实例，您可以重用代码，并节省内存。

相关文章：