AngularJS 和 javascript oop答案

【问题标题】：AngularJS and javascript oopAngularJS 和 javascript oop
【发布时间】：2014-10-25 08:35:53
【问题描述】：

我正在 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>

我个人认为这种结构的优势在于代码的组织性，而且这种结构似乎更面向对象，实现起来更有趣

让我知道你的想法。谢谢并恭祝安康安东尼奥

PS - 我为这个问题编写了这段代码，我是即时编写的，我认为它可以工作，但我不是 100% 肯定，它没有经过测试 :) 我写过其他这样的控制器，它们在现在生产，似乎工作正常。

PS2 - 请原谅我的英语，我现在正在学习它，我现在在 Duolingo 上只有 1500 xp :) :)

【问题讨论】：

这个问题似乎更适合codereview.stackexchange.com

标签： javascript angularjs oop

【解决方案1】：

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

【讨论】：

我觉得很好，但它变成了singleton 不是吗？所以我还是更喜欢使用Angular's services 来处理单例。它更具可读性，从 OOP 的角度来看也仍然可以接受。就像 Scala、Ruby、Python 等现代语言一样。可以创建对象来创建单个对象。但我认为这只是一种偏好。

【解决方案2】：

我建议在控制器上使用工厂而不是硬编码的服务处理程序，通常服务是您可以在应用程序上重用的代码和功能，因此如果您正在开发大型前端应用程序，我会本地化该服务进入工厂。

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

创建服务/工厂的优势：

易于测试
易于维护和扩展
更面向对象
所有控制器的单一实例（更好的内存使用）
更优雅..（如果你的老板是一个优雅的代码人）

假设您在其他控制器中需要此 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 注入将使用它的每个控制器中。您的服务代码是可以的，但最好在工厂/服务/提供者中创建服务，而不是在每个控制器中的硬编码服务，因为这是单个实例，您可以重用代码并节省内存。

【讨论】：