2种不同控制器中的相同方法;我们如何使用DRY方法优化代码

Question

使用Angular JS 1.5.8;我有多个控制器，我们已经创建了不同的方法，现在当我查看2个控制器时，他们有几乎相同的方法。所以亩问题是我们如何应用继承类的东西，使两个控制器可以从那个地方得到相同的方法。

控制器A

angular.extend(vm, { 
      cancel: cancel, 
      change: change, 
      checkTable: checkTable, 
      edit: edit, 
      enable: enable, 
      enroll: enroll, 
      listTables: listTables, 
      reload: reload, 
      save: save, 
      show: show, 
      view: view 
     }); 

控制器B

angular.extend(vm, { 
      cancel: cancel, 
      change: change, 
      checkColumn: checkColumn, 
      edit: edit, 
      enable: enable, 
      enroll: enroll, 
      listColumns: listColumns, 
      reload: reload, 
      save: save, 
      show: show, 
      view: view 
     }); 

正如你可以看到两个控制器有多个类似的方法。

我知道我们可以创建服务，但这些方法已经在使用服务。

你能提出任何好的方法。

Answer 1

您应该使用服务或工厂，根据John's Papa guidelines。

事实上，当您使用Angular进行编码时，有一些非常简单的指导方针。 我看到你的详细信息，并注意你的功能被称为“启用”，“显示”等。 现在我不知道你的代码，但似乎你正在操纵控制器中的DOM。

几个princples在角尊重：

• 定制指令始终操纵DOM或使用角指令去做。这样，你现在唯一操纵DOM的东西就是你的CSS或者你的指令，它需要一个薄层的角色：如果你想找到一些东西搞砸你的DOM，那么这很容易。

• 您应该将最少量的逻辑放入控制器。它允许您重新使用其他控制器中的逻辑，但也可以更轻松地测试您的代码，并且通过简单的一瞥，它还可以使控制器简单易懂。

• 总是使用服务来获取数据，控制器应该只关注视图，并且只知道在哪里以及在什么时候询问什么时候，但不应该关心实现细节。

现在我看到了您的评论，并且您抱怨说每个函数都使用了控制器的局部变量。

要开始的语句：如果在与视图模型无关的控制器中使用全局变量（视图可访问），那么您应该能够对其进行优化。

然后，如果您必须从控制器操作本地数据，并且这是可以理解的，那么只需将它们作为参数放入函数调用即可。如果你想修改它们，那么你可以使用回调函数。

下面是一个例子：

var vm = this; 

// bad way 
function enroll(){ 
// your current function modifying vm.example1 and vm.example2 
} 

//good way 
function enroll(){ 
    serviceName.enroll(vm.example1, vm.example2, function(value1, value2){ 
    vm.example1 = value1; 
    vm.example2 = value2; 
    } 
} 

希望这可以帮助，我劝你哟阅读entier方针，它真的帮了我学习了很多关于这个框架的东西。

Answer 2

您可以将所有这些常用方法投入服务或工厂。你可以注入一个服务到另一个。因此，如果这些方法已经在使用服务，那就没有问题了。

你可以这样做： app.service（'service1'，function（）{}）;

app.service（'service2'，['service1'，function（service1）{}]）;

Answer 3

您可以使用JavaScript继承来实现它。

function controllerBase() {} 

    controllerBase.prototype = { 
     cancel: cancel, 
     change: change, 
     checkColumn: checkColumn, 
     edit: edit, 
     enable: enable, 
     enroll: enroll, 
     listColumns: listColumns, 
     reload: reload, 
     save: save, 
     show: show, 
     view: view 
    }; 


    function controllerA() { 
     var vm = this; 
    } 

    controllerA.prototype = Object.create(controllerBase.prototype); 

    function controllerB() { 
     var vm = this; 
    } 

    controllerB.prototype = Object.create(controllerBase.prototype); 


    angular.module('app', []) 
     .controller('controllerA', controllerA) 
     .controller('controllerB', controllerB);