javascript – 代码组织AngularJS巨大的控制器

前端之家收集整理的这篇文章主要介绍了javascript – 代码组织AngularJS巨大的控制器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个巨大的控制器,我已将它拆分为子控制器,我根据其功能将其放入其他文件中.

一切正常,但我需要一个建议和我的问题的答案:
我做得对吗?

这是一个巨大的控制器:

function controller($scope,$http) { 
  //code
  someFunction($scope,boolA,function1,function2);
  //code
}

这是我在其他文件中的子控制器的代码,我在前端控制器后加载:

function someFunction($scope,function2) {
  //code where I use all the parametrs of function
  function someFunctionSubcontoller() {
    //here is used another function from other subcontroller
  }
}

函数作为参数发送是否可以?我是否可以从子控制器返回任何东西,因为$scope会监视所有内容吗?我是否可以在另一个中使用控制器的某些功能

现在我看到它不好而且不对,但我需要拆分主控制器,因为其中有超过10k行代码.

感谢您的建议和帮助!

解决方法

一个拥有10,000行代码的控制器会尖叫您在代码中多次破坏 Single Responsibility Principle.

您应该考虑首先重构代码并将可重用的代码段移动到服务中,而不是制作“子控制器”.然后,在UI中查找可以转换为指令的常用组件,并使用隔离范围将一些逻辑移动到这些指令的Controller中.你会发现,当他们对自己负责时,控制和测试这些元素要容易得多.

接下来,查看使用’Controller As‘语法,它允许您打破与$scope的关系.使用$scope是一个anti-pattern,因为很难确定直接放在$scope上的项目来自,使用和修改的位置.很容易发现一个对象的值不是你想要的,因为它在其他地方被修改了.从Angular Documentation开始:

•Using controller as makes it obvIoUs which controller you are accessing in the template when multiple controllers apply to an element.

•If you are writing your controllers as classes you have easier access to the properties and methods,which will appear on the scope,from inside the controller code.

•Since there is always a . in the bindings,you don’t have to worry about prototypal inheritance masking primitives.

最重要的是,您可能会发现,如果您重构代码而不是“分解”代码,您最终将获得更易于管理,可测试且可靠的解决方案.

猜你在找的JavaScript相关文章