Question

我是javascript和AngularJS的新手。

所以......可能是一个愚蠢的问题，但我有两种方法来定义javascript中的函数。

在下面的控制器中请看“grupoCancha”和“grupoVisible”（我粘贴了漏洞脚本，因为定义的另一个变量取决于函数）

控制器：

(function() {
'use strict';

angular
    .module('example.cancha')
    .controller('CanchaController', CanchaController);

CanchaController.$inject = ['$state', 'canchaService'];

function CanchaController($state, canchaService) {
    var vm = angular.extend(this, {
        canchasComplejo: [],
        grupoCancha: grupoCancha,
        grupoVisible: grupoVisible
        });



    (function activate() {
        cargarCanchasComplejo();

    })();

    //funcion que llama al servicio para obtener las canchas del complejo
    function cargarCanchasComplejo() {
        canchaService.obtenerCanchasComplejo()
            .then(function(canchasComplejo) {
                vm.canchasComplejo = canchasComplejo;
            });
    }


    function grupoCancha(canchaComplejo){
        if (vm.grupoVisible(canchaComplejo)) {
            vm.grupoMostrado = null;
        } 
        else {
          vm.grupoMostrado = canchaComplejo;
        }
    }

    function grupoVisible(canchaComplejo){
       return vm.grupoMostrado === canchaComplejo;
    }


}
})();

另一种方式有点奇怪（可能是因为我来自Java）。但是函数的定义很复杂：

控制器2：

(function() {
'use strict';

angular
    .module('example.cancha')
    .controller('CanchaController', CanchaController);

CanchaController.$inject = ['$state', 'canchaService'];

function CanchaController($state, canchaService) {
    var vm = angular.extend(this, {
        canchasComplejo: []
        });



    (function activate() {
        cargarCanchasComplejo();

    })();

    //funcion que llama al servicio para obtener las canchas del complejo
    function cargarCanchasComplejo() {
        canchaService.obtenerCanchasComplejo()
            .then(function(canchasComplejo) {
                vm.canchasComplejo = canchasComplejo;
            });
    }

    vm.grupoCancha = function(canchaComplejo) {
        if (vm.grupoVisible(canchaComplejo)) {
            vm.grupoMostrado = null;
        } 
        else {
          vm.grupoMostrado = canchaComplejo;
        }
    };

    vm.grupoVisible = function(canchaComplejo) {
        return vm.grupoMostrado === canchaComplejo;
    };


}
})();

你能解释一下最好定义函数的方法和原因吗？ 谢谢！

Answer 1

我看到的唯一区别是在第二个代码示例中使用带有两个最后一个函数的vm。当你使用

function grupoVisible(canchaComplejo){
   return vm.grupoMostrado === canchaComplejo;
}

此函数对控制器的当前JS代码是私有的（因为您的控制器立即执行 - (function(){})()），并且无法从HTML访问。当你把它写成

时

vm.grupoVisible = function(canchaComplejo) {
    return vm.grupoMostrado === canchaComplejo;
};

稍后可以通过ng-controller =“CanchaController as cc”以及cc.grupoVisible来访问HTML，例如：

<div ng-controller="CanchaController as cc">
  <button ng-if="cc.grupoVisible()">SOME BUTTON</button>
</div>

Answer 2

编写Java Script有很多种方法。但请坚持使用文档中指定的建议用法。请记住，性能是大规模应用程序中的关注点。所以Minfication是实现它的方法。

我修改了 Controller 1 ，它看起来像

(function() {
'use strict';
angular
    .module('example.cancha')
    .controller('CanchaController', 
                ['$state', 
                'canchaService',
                CanchaController]);
/*Order of dependencies in both should be one and the same as it will be usefull for minification of your code*/

function CanchaController($state, canchaService) {
    var vm = this ;

        canchasComplejo: [],

        vm.grupoCancha=function (canchaComplejo){
                if (vm.grupoVisible(canchaComplejo)) {
                    vm.grupoMostrado = null;
                } 
                else {
                    vm.grupoMostrado = canchaComplejo;
                }
        }
    //funcion que llama al servicio para obtener las canchas del complejo
    ////Sugesting to use exception handling below as it makes a service call.
        vm.cargarCanchasComplejo=function() {
                canchaService.obtenerCanchasComplejo()
                        .then(function(canchasComplejo) {
                        vm.canchasComplejo = canchasComplejo;
                        });
        }

        vm.grupoVisible=function(canchaComplejo){
                return vm.grupoMostrado === canchaComplejo;
        }
    }
}());

当缩小此代码时，它看起来如下

!function(){"use strict";function a(a,b){var c=this;c.grupoCancha=function(a){c.grupoVisible(a)?c.grupoMostrado=null:c.grupoMostrado=a},c.cargarCanchasComplejo=function(){b.obtenerCanchasComplejo().then(function(a){c.canchasComplejo=a})},c.grupoVisible=function(a){return c.grupoMostrado===a}}angular.module("example.cancha").controller("CanchaController",["$state","canchaService",a])}();

所以我建议你John Papa Angular Style Guide 。

希望这可以帮到你

坚持一种模式，确保团队以相同的模式工作。

希望它有用：）。

在Controller As中正确定义vm功能

2 个答案: