【问题标题】:Factory methods in multiple files Angular JS多个文件中的工厂方法Angular JS
【发布时间】:2014-09-16 12:16:46
【问题描述】:

当您拥有一个包含 4 种相关方法的工厂时,最佳实践是什么,每个方法都非常长(200 多行代码)并且您希望避免拥有 800 多行代码的巨大文件?

一种解决方案是在同一个模块下创建 4 个工厂,每个工厂在其自己的文件中公开一个方法。然后将它们全部注入需要它们的控制器中。

有没有更好的解决方案?我想创建一次工厂,然后向它添加方法,就像我使用模块模式进行模块扩充一样。然后我只需要注入一次工厂并使其所有方法都可用。

【问题讨论】:

  • 为什么你的方法有 200+ 行代码?听起来重构是最好的解决方案。可能会发布其中一种用于代码审查的巨大方法。
  • 不幸的是,我不能再缩小它们了,虽然不是全部,但我明白你的意思。由于应用程序逻辑,我有一堆 try/catch 和 if/else 要做。
  • 如果它不是敏感代码,您能否在某处发布您的大型方法之一的示例?纯粹出于好奇,我想看一个。
  • 我在这里快速粘贴了一个jsfiddle.net/mirko77/82ksvuLa,我唯一看到的是将成功/错误回调放在不同的文件中,但我应该这样做吗?
  • 该文件的大部分内容可以重构为更小、更有用的函数,也可以变得更简洁。

标签: angularjs angularjs-factory


【解决方案1】:

我想创建一次工厂,然后向它添加方法,就像我使用模块模式进行模块扩充一样。然后我只需要注入一次工厂并使其所有方法都可用。

是的,这会起作用:

// In your main module file.
angular.module('myModule', []);


// file1.js
angular.module('myModule').factory('BigService1', function(){
    // Your actual implementation here.
    console.log('I am BigService1');
});


// file2.js
angular.module('myModule').factory('BigService2', function(){
    // Your actual implementation here.
    console.log('I am BigService2');
});


// ... additional files


// Separate file/service to aggregate your big factory services.
angular.module('myModule').service('AggregateService', [
        // Add dependencies
        'BigService1','BigService2',
function(BigService1, BigService2){
    // Return an object that exposes the factory interfaces.
    return {
        service1: BigService1,
        service2: BigService2
    };
}]);

【讨论】:

    【解决方案2】:

    您还可以将代码安排为旧的 vanilla js 样式,然后在您的服务中访问这些库,如下所示:

    var Mirko = { };
    
    Mirko.FunService = {
      getAllSomething : function (p1, p2) {
      },
      ...
    };
    
    angular.module('myModule').factory('BigService', function(){
      return {
        methodOne : Mirko.getAllSomething,
        ...
      };
    });
    

    你最终会得到一个 Mirko 对象,你可以在你的 Angular 应用程序范围之外访问它,但它与你想在你的应用程序中使用的其他外部 API(不是为 Angular 编写的)没有任何不同。您处理自己的“外部”API 的方式可以采用老式的方式,每个“类”一个文件,例如'FunService'。

    这可能不是最漂亮的解决方案,但它会是一个简单的抽象。

    只是说...

    【讨论】:

    • 谢谢。这正是我试图移植到 Angular 的场景;)我有一个使用模块模式构建的现有应用程序,其中我的对象在主 APP 对象下命名空间,然后是 APP.Module1 ={}APP.Module2{} 等等。我认为 Angular 有办法处理这个问题,我是唯一一个拥有长方法的人吗? (如果200行有cmets可以称为“长”)
    • 嗯,我赞成你的问题,因为我想知道是否有比我建议的更好的选择 - 所以现在我想我们正在玩等待游戏:)
    • 目前这仍然是最好的解决方案,我会接受它。让我们拭目以待!
    【解决方案3】:

    也许通过其他工厂分割您的方法,可以将其注入您的“主”工厂:

    // file 1
    angular.module('foo').factory('segment1', function () {
      return {
        method: function () {
          // ... super long method
        }
      };
    });
    
    // file 2
    angular.module('foo').factory('segment2', function () {
      return {
        method: function () {
          // ... super long method
        }
      };
    });
    
    // your main factory file
    angular.module('foo').factory('myFactory', function (segment1, segment2) {
      return {
        method1: segment1.method,
        method2: segment2.method
      };
    }
    

    【讨论】:

    • 啊,你打败了我 :)
    • 只有一个抱怨,这仍然需要我创建 4 个工厂,再加上一个来聚合它们。是否有机会检索现有工厂并向其注入方法?
    • 我不这么认为,很遗憾.. 它会“擦除”之前定义的工厂。
    • @Per Hornshøj-Schierbeck 解决方案将是一个更好的解决方案,因此。
    • 我同意,@Per Hornshøj-Schierbeck 解决方案更适合此目的
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-29
    • 1970-01-01
    • 2013-07-06
    相关资源
    最近更新 更多