Javascript 角度/ui路由器：源文件中的缩进级别

最近，我开始非常关注AngularJS/ui路由器应用程序如何“向正确的方向发展”。TL；DR：如何减少代码嵌套的数量

好的，让我来解释一下。典型的Angular/ui路由器应用程序具有以下结构：

• 像

  （function（angular）{…}）（angular）

  这样的顶级模块通常会包装整个源文件，以便所有变量都保持在本地，不会泄漏到全局上下文中

• 然后通常使用

  module.config（['$stateProvider'，function（$stateProvider）{…}]）

  定义状态

• 控制器的状态声明如下所示（最低详细程度）：

• 如果为Strict DI选择数组语法，并且存在少量依赖项，则通常会以换行结束，这会引入连续缩进：

  $stateProvider.state('myState', {
    controller: ['dependency1', 'dependency2', 'dependency3',
      function(dep1, dep2, dep3) {
        ...  // now there's three indents
      }
    ]
  });
  

• 最后，如果使用命名视图，则还有两个级别：

  $stateProvider.state('myState', {
    views: {
      myView: {    
        controller: ['dependency1', 'dependency2', 'dependency3',
          function(dep1, dep2, dep3) {
            ...  // wow, five levels!
          }
        ]
      }
    }
  });
  

最终，您将得到第7个缩进级别，只是开始应用程序逻辑代码！这是传统的每行120个符号中的14个空格（超过10%）。并查看源文件的结尾：

              };

            }]
        }
      }
    });

  } ]);
})(angular);

我曾考虑使用Browserify来允许Node.js-style

需要

，但它只补偿了两个级别：

(function(angular) {

  ...
  module.config(['$stateProvider', function($stateProvider) {

    $stateProvider.state('myState', require('./myState'));

  }]);

})(angular)


// myState.js

module.exports = {
  views: {
    myView: {    
      controller: ['dependency1', 'dependency2', 'dependency3',
        function(dep1, dep2, dep3) {
          ...  // still five levels :(
        }
      ]
    }
  }
}

当然，我们可以提取控制器本身以减少两个缩进，但这非常不方便，特别是如果控制器前面有

resolve

此外，Browserify还有另一个缺点：

• 它在生产中增加了一点元数据开销
• 它需要一个看门狗过程来允许开发中的热重新加载
• 在不断重新编译的过程中，开发变得有点慢；当代码库变大时，它就成了一个相当大的问题

---

现在我想听听你的想法

查看如何使用

angular.module

定义控制器，然后简单地将控制器名称用作字符串。javascript就是这样工作的。你在写单元测试吗？如果是这样，单独定义控制器会使测试更容易。另一件事是视图只是一个js对象。您可以按属性定义它的属性。。。不必一次定义所有内容。但是如果它有助于开发，那是另一个问题。@lujcon Nope，我只编写端到端测试，因为将琐碎的UI逻辑与最终结果分开测试几乎没有意义。我的问题背后的一个大局是，我试图实现漂亮的结构，每个组件都有自己的位置，对开发人员来说是“透明的”和“可访问的”，对开发和生产阶段是友好的（两者几乎同等重要），等等。

(function(angular) {

  ...
  module.config(['$stateProvider', function($stateProvider) {

    $stateProvider.state('myState', require('./myState'));

  }]);

})(angular)


// myState.js

module.exports = {
  views: {
    myView: {    
      controller: ['dependency1', 'dependency2', 'dependency3',
        function(dep1, dep2, dep3) {
          ...  // still five levels :(
        }
      ]
    }
  }
}