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);