Блог

Я новичок в javascript и AngularJS.

Итак… Может быть, это глупый вопрос, но у меня есть два способа определения функций в javascript.

В следующем для контроллеров, пожалуйста, посмотрите на «grupoCancha» и «grupoVisible» (я вставил сценарий hole, потому что есть другая переменная, которая зависит от функции)

Контроллер:

 (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;
    };


}
})();
  

Не могли бы вы объяснить мне, какой способ лучше всего определять функции и почему?
Спасибо!!

Существует много способов написания Java Script. Однако придерживайтесь рекомендуемого использования, как указано в документации. Помните, что производительность является проблемой в крупномасштабных приложениях. Таким образом, минимизация — это способ ее достижения.

Я изменил ваш контроллер 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])}();
  

Итак, я предлагаю вам руководство по стилю Angular от Джона Папы.

Надеюсь, это может вам помочь

Придерживайтесь одного шаблона, убедитесь, что команда работает по одному шаблону.

Надеюсь, это полезно 🙂.

единственное отличие, которое я вижу, — это использование виртуальной машины с двумя последними функциями во втором примере кода. Когда вы используете

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

эта функция является закрытой для текущего кода JS вашего контроллера (поскольку ваш контроллер выполняется немедленно — (function(){})() ) и недоступна из HTML. Когда вы записываете его как

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

к нему можно получить доступ позже в HTML через ng-controller=»CanchaController как cc», а затем cc.grupoVisible, например:

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