Question

最近我开始担心AngularJS / ui-router应用程序如何“向右扩展”。 TL; DR：如何减少代码嵌套量？

好的，让我试着解释一下。典型的Angular / ui-router应用程序具有以下结构：

像(function(angular){ ... })(angular)这样的顶级模块通常包装整个源文件，以便所有变量保持在本地并且不会泄漏到全局上下文中;
然后您通常会使用module.config(['$stateProvider', function($stateProvider) { ... } ])来定义状态;

控制器的状态声明如下（最小的冗长）：

$stateProvider.state('myState', {
  controller: function() {
    ...  // thus introducing two more indent levels for your code
  }
});

如果你选择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风格requires，但它只补偿两个级别：

(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 / ui-router：源文件中的缩进级别

0 个答案: