javascript - 变量绑定(bind)/第一类函数是否比私有(private)方法命名更可取？吊装如何受到影响？

Question

有关在使用变量绑定(bind)与私有(private)方法命名函数约定时构造Angular代码和JavaScript行为的一些问题。在AngularJS中通过私有(private)方法命名使用变量绑定(bind)函数/一流函数是否有性能或风格上的原因？每种方法对起重有何影响？下面的第二种方法是否会减少吊装量，这会对应用性能产生显着影响吗？

私有(private)方法命名的示例。这是构造Angular代码的推荐方法吗？

    (function () {
       'use strict'
        function modalController(dataItemsService, $scope) {
            var vm = this;

            function _getSelectedItems() {
               return dataItemsService.SelectedItems();
            }

            function _deleteSelectedItems() {
               dataItemService.DeleteItem();
               $("#existConfirmDialog").modal('hide');
            }

            vm.SelectedItems = _getSelectedItems;
            vm.deleteItemRecord = _deleteItemRecord;
        }

        angular.module('app').controller('modalController', ['dataItemService', '$scope', modalController]
})();

变量绑定(bind)函数的示例。这种在 Controller 内构造 Angular 代码的方法又如何-在性能/样式方面是否有缺点或优势？

angular.module('appname').controller("NameCtrl", ["$scope", "$log", "$window", "$http", "$timeout", "SomeService",
    function ($scope, $log, $window, $http, $timeout, TabService) {

    //your controller code
       $scope.tab = 0;    
       $scope.changeTab = function(newTab){
          $scope.tab = newTab;
       };    
       $scope.isActiveTab = function(tab){
          return $scope.tab === tab;
       }; 
    }
]);

Answer 1

第一种方法使用“私有(private)”方法并通过公共(public)别名公开它们，称为Revealing Module Pattern，尽管在示例中，这些方法实际上不是私有(private)的。
后者是一个标准的Constructor Pattern，使用$ scope作为上下文。

Is there a performance or stylistic reason for using variable bound functions / first class functions in AngularJS over private method naming?

Is [there] a recommended way to structure Angular code?

TL; DR

从根本上讲，两种样式之间没有太大区别
以上。一个使用$scope，另一个使用this。闭包中定义了一个构造函数，内联定义了一个构造函数。

在某些情况下，您可能需要私有(private)方法或值。
也有风格和(可能无关紧要)的表现
在this上使用变量vm / $scope的原因。这些不是互斥的。

您可能要使用
基本的，裸露的骨头，古老的构造函数模式，以及很多
人们通过this而不是$scope公开状态和行为。

您可以在Controller中允许自己的数据隐私，但是大多数
服务/工厂应利用的时间。主要的异常(exception)是代表 View 状态的数据。

请不要在Controller中使用jQuery。

引用文献:
Todd Motto的 AngularJS Style Guide。
AngularJS Up & Running

为了彻底回答您的问题，我认为了解财务总监的责任很重要。每个 Controller 的工作都是向 View 公开一组严格的状态和行为。简而言之，仅将您不介意用户在View中看到或使用的东西分配给 this或 $scope。
有问题的 variable( vm， $scope)是由Controller函数创建的实例的上下文( this)。 $scope是Angular的“特殊”上下文；它已经定义了一些行为供您使用(例如$ scope。$ watch)。 $scopes也遵循一个继承链，即$ scope继承分配给其父$ scope的状态和行为。
采取以下两个 Controller :

angular.module("Module")
    .controller("Controller", ["$scope", function($scope) {
        $scope.tab = 0;
        $scope.incrementTab = function() {
            $scope.tab++;
        };
    }])
    .controller("OtherController", ["$scope", function($scope) {
        // nothing
    }]);

和一个观点

<div ng-controller="Controller">
    <p>{{ tab }}</p>
    <button ng-click="incrementTab();">Increment</button>
    <div ng-controller="OtherController">
        <p>{{ tab }}</p>
        <button ng-click="incrementTab();">Increment</button>
    </div>
</div>

示例 here
您会注意到，即使我们没有在OtherController中定义 $scope.tab，它也会从Controller继承它，因为Controller是DOM中的父级。在显示选项卡的两个地方，您都应该看到“0”。这可能是您所指的 "hoisting"，尽管这是一个完全不同的概念。
当您单击第一个按钮时会发生什么？在这两个地方，我们都显示了“选项卡”，它们现在将显示“1”。当您按下第二个按钮时，两者也会更新和递增。
当然，我可能不希望我的子标签与父标签具有相同的标签值。如果将OtherController更改为此:

.controller("OtherController", ["$scope", function($scope) {
    $scope.tab = 42;
}]);

您会注意到此行为已更改-选项卡的值不再同步。
但是现在令人困惑:我有两个不同的地方叫做“tab”。其他人可能会在稍后使用“tab”行写一些代码，并无意间破坏了我的代码。
我们过去通过在 $scope上使用 namespace 来解决此问题，例如 $scope.vm并将所有内容分配给命名空间: $scope.vm.tab = 0;

<div ng-controller="OtherController">
    <p>{{ vm.tab }}</p>
    <button ng-click="vm.incrementTab();">Increment</button>
</div>

另一种方法是使用 this的简单性和简洁性，并利用controllerAs语法。

.controller("OtherController", function() {
    this.tab = 0;
});

<div ng-controller="OtherController as oc">
    <p>{{ oc.tab }}</p>
</div>

对于习惯使用普通JS的人来说，这可能会更舒适，并且这样更容易避免与其他Angular源的冲突。您始终可以随时更改 namespace 。由于您没有创建新的 $scope实例，因此它在性能上也较“轻松”，但是我不确定会有什么好处。

为了获得隐私，我建议将您的数据封装在服务或工厂中。请记住， Controller 并不总是单例。 View 和 Controller 之间存在1:1的关系，您可以多次实例化同一 Controller !但是，工厂和服务对象是单例。他们真的很擅长存储共享数据。
让所有Controller从单例中获取状态的副本，并确保所有Controller正在使用Service / Factory上定义的行为修改单例状态。

function modalController(dataItemsService) {
    var vm = this;
    vm.selectedItems = dataItemsService.SelectedItems(); // get a copy of my data
    vm.updateItem = dataItemService.UpdateItem; // update the source
}

但是，等等，我怎么知道我的应用程序的另一部分何时更改了我的私有(private)数据？我怎么知道何时获得SelectedItems的新副本？这是$ scope。$ watch发挥作用的地方:

function modalController(dataItemsService, $scope) {
    var vm = this;

    vm.updateItem = dataItemService.UpdateItem; // update the source

    // periodically check the selectedItems and get a fresh copy.
    $scope.$watch(dataItemsService.SelectedItems, function(items) {
        vm.items = items;
    });

    // thanks $scope!
}

如果您的数据没有共享，或者您的私有(private)数据代表View层而不是Model层，那么将其保留在 Controller 中是完全可以的。

function Controller() {
    var buttonClicked = false;

    this.click = function() {
        buttonClicked = true; // User can not lie and say they didn't.
    };
}

最后，请勿像您的引用资料那样在您的 Controller 中使用JQUERY!

$("#existConfirmDialog").modal('hide'); 

这个示例可能并不纯粹是邪恶的，但是避免访问和修改指令之外的DOM，您不想通过修改其下面的DOM来破坏应用程序的其他部分。