使用 Angular，我应该绑定到“域命令”函数（更少抽象）还是 GUI 操作处理函数（更多抽象）？答案

【问题标题】：With Angular, should I bind to "domain command" functions (less abstraction) or GUI action handling functions (more abstraction)?使用 Angular，我应该绑定到“域命令”函数（更少抽象）还是 GUI 操作处理函数（更多抽象）？
【发布时间】：2016-06-23 21:34:34
【问题描述】：

我搜索了几个 Angular 样式指南和最佳实践链接，但找不到关于此问题的说明。（注意，我没有使用 $scope。）如果我们有一个普通的网页，其中的元素调用控制器上的函数，我使用 WPF 的直觉是：

<button ng-click="myCtrl.save()">Save</button>

...

function myController(thingSavingService){
     var ctrl = this;
     // ...
     ctrl.model.thing = {};
     // ...
     ctrl.saveThing() = function () {
         thingSavingService.save(ctrl.model.thing);
     } 
}

有人建议也许拥有特定于元素的处理程序函数是一种很好的做法，例如：

<button ng-click="myCtrl.onSaveClicked()">Save</button>

...

function myController(thingSavingService){
     var ctrl = this;
     // ...
     ctrl.model.thing = {};
     // ...
     ctrl.onSaveClicked = function () {
         saveThing();
     }
     var saveThing = function () {
         thingSavingService.save(ctrl.model.thing);
     } 
}

将这些东西直接绑定到控制器上的函数是一种好习惯，还是在两者之间有另一层更好，以便“动作处理程序”与域级函数分开？

换句话说，对于 Angular，我应该绑定到“域命令”函数（更少抽象）还是 GUI 动作处理函数（更多抽象）？

另外，是否有任何文章或最佳实践指南来探讨这些细微差别？

【问题讨论】：

只是出于好奇，onSaveClicked 除了打电话给saveThing 之外还应该做其他事情吗？否则，这没有任何意义。无论如何它都没有用。这闻起来像类似 java 的代码。
Angular 是一个专注于 UI 的框架，它的设计确实倾向于特定于调用它们的元素的控制器功能，以及服务中的域功能（通常是 API 调用）。话虽如此，这个问题感觉很主观，可能永远不会真正得到一个在所有情况下都是正确的充分答案。
理论上，我想 onSaveClicked 是特定于被点击的保存按钮，并且可能有另一个函数从另一个控件调用 saveThing，例如，从自动保存计时器。

标签： angularjs model-view-controller

【解决方案1】：

就我个人而言，我遵循 John Papa 的风格指南，关于函数放置和抽象级别，他声明在分配给控制器的情况下具有纯函数。当然主要是为了便于阅读。

function SessionsController() {
    var vm = this;

    vm.gotoSession = gotoSession;
    vm.refresh = refresh;
    vm.search = search;
    vm.sessions = [];
    vm.title = 'Sessions';

    ////////////

    function gotoSession() {
      /* */
    }

    function refresh() {
      /* */
    }

    function search() {
      /* */
    }
}

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y033

【讨论】：

换句话说，将视图元素直接绑定到控制器上的函数是一种很好的做法；我总是可以只在需要时再写一层。

【解决方案2】：

更多的是关于样式。在 sitepoint 中，有这篇文章 StyleGuide 讨论了样式指南。

正如LIFT 原则所述；

最好这样做

function myController(thingSavingService){
     var ctrl = this;
     ctrl.model.thing = {};
     ctrl.onSaveClicked = saveThing;
     var saveThing = function () {
         thingSavingService.save(ctrl.model.thing);
     } 
}

不是因为性能，而是因为可读性更高。

【讨论】：

【解决方案3】：

根据您的术语，角度控制器公共方法可以被视为“动作处理程序”，它们与域级函数是分开的。当我说域级函数时，我指的是 Angular Services Functions/apis。

【讨论】：