Как применяться minification используя путеводитель стилей углового Джона Пэпа?

Когда "minifico" код javascript используя angular.js: Какая техника должна применяться, чтобы делать инъекцию зависимостям?

Далее я выставляю две формы:

Нормальная форма

var app;
app = angular.module('myApp', []);
app.controller('myController',['$scope', '$http', function($scope, $http){

   //Procesos a ejecutar

}]);

Jhon Папа Стиле

angular.module('myApp', [])
.controller('miControlador', miControlador)

 function miControlador(){

   //Proceso a ejecutar

 };
1
задан 27.02.2016, 02:57
4 ответа

Путеводитель стиля Джона Пэпа, который имеет в виду Педро Мигель Пимьента Моралес, напечатан здесь и очень интересен и рекомендуем.

Проблема, которая комментируется в вопросе, ссылается на правило стиля Y024, где Джон Пэпа рекомендует использовать функции с именем вместо анонимных функций:

/* avoid */
angular
    .module('app')
    .controller('DashboardController', function() { })
    .factory('logger', function() { });

/* recommended */
// dashboard.js
angular
    .module('app')
    .controller('DashboardController', DashboardController);

function DashboardController() { }

// logger.js
angular
    .module('app')
    .factory('logger', logger);

function logger() { }

Объединенная с этой хорошей практикой, эта другая, которая ссылается в, как управлять о зависимостях:

/* avoid - not minification-safe*/
angular
    .module('app')
    .controller('DashboardController', DashboardController);

function DashboardController(common, dataservice) {
}

/* avoid */
angular
.module('app')
.controller('DashboardController',
    ['$location', '$routeParams', 'common', 'dataservice', Dashboard]);

function Dashboard($location, $routeParams, common, dataservice) {
}

/* recommended */
angular
    .module('app')
    .controller('DashboardController', DashboardController);

DashboardController.$inject = ['$location', '$routeParams', 'common', 'dataservice'];

function DashboardController($location, $routeParams, common, dataservice) {
}

Рекомендация: Если стремятся к тому, чтобы продолжить хорошие практики Джона Пэпа, нужно читать повечерие, потому что они связаны между ними

4
ответ дан 24.11.2019, 14:48
  • 1
    Спасибо за помощь @rsciriano, на самом деле, что я сорвался пара вещей, это было то, что он искал, я надеюсь, что, таким образом, minificar не представляет какая-либо проблема – Pedro Miguel Pimienta Morales 25.02.2016, 15:31

Если ты используешь инструмент grunt, ты не нуждаешься в ней versiГіn отмеченная для minificar, хотя Хон Папа пишет в и делать grunt build уже, он берется за то, чтобы отмечать и minificar cГіdigo.

2
ответ дан 24.11.2019, 14:48
  • 1
    То же самое происходит, если я использую Gulp.js, или только с grunt – Pedro Miguel Pimienta Morales 25.02.2016, 15:28
  • 2
    Он не происходит из-за default, ты должен использовать что-то как ng-annotate npmjs.com/package/gulp-ng-annotate так в grunt как в gulp. – David Silva 26.02.2016, 22:09

Главным образом проблема, которая ставит, сводится к определению модулей, которым ты сделаешь инъекцию controller.

Note on Minification

Декларинг Ангулархс Modules Фор Минификатион

Esta ясно, что, если ты применяешь minification cГіdigo угловой в Jhon Papa Style, оно не будет функционировать. Это производится, потому что угловой он использует имена переменных, чтобы допускать, что он должен делать инъекцию, но minificacion меняет этих на другие мешая тому, чтобы угловой он решил зависимости.

Помнит, что minification уменьшает cГіdigo укорачивая имя переменных, функций, и т.д. меняя их на другие, что изменяет имя параметра, который ты определяешь, сделав инъекцию в controller. Отличный

- случай Forma normal, так как ты определяешь, как string модули, которым нужно делать инъекцию, применив minification, он не меняет цепи string на то, что угловой может использовать их, чтобы знать, что модули mapean с, что переменные, делать инъекцию, построив controller.

Вкратце используй Forma normal, если ты идешь использовать minification.

2
ответ дан 24.11.2019, 14:48

Когда ты говоришь о вставке углового во время minificar, только ты можешь использовать 2 из 3 форм вставки углового, используя нотацию договоренности или свойство $inject.

Нотация договоренности

angular.module('nombreModulo')
    .controller('nombreController', ['dependencia1', 'dependencia2', definicionDelController]);

function definicionDelController(dependencia1, dependencia2) {

}

Эта нотация часто обычно используется используя анонимную функцию, что очень проблематичное, когда есть большие зависимости.

angular.module('nombreModulo')
    .controller('nombreController', [
        'dependencia1', 
        'dependencia2', 
        'dependencia2', 
        function (dependencia1, dependencia2, dependencia3) {

     }]);

Поскольку ты можешь видеть это, возможно выходить из контроля быстро, если controller или услуга (наиболее названный вводимый для этих намерений), который ты осуществляешь, является посредственно комплексом. Смоги быть читабельнее или он не зависит от случая в вопросе.

Используя $inject

Это самая простая форма аннотации (даже внутри дорожка алгоритма, использованного из-за углового, чтобы заключать их, - самая быстрая), так как просто угловой он возвращает договоренность, которую ты перемещаешь его каждый раз, когда услуга $injector позвони в функцию annotate.

angular.module('nombreModulo')
    .controller('nombreController', definicionDelController)

// Esto activa esta forma de inyección
definicionDelController.$inject = ['dependencia1', 'dependencia2'];

function definicionDelController(dependencia1, dependencia2) {

}

Это вариант, рекомендуемый Джоном Пэпа и разум этого не что остальные были более плохими но у этой нотации есть много преимуществ, когда он используется в сочетании с остальные точки Вашего гида:

  1. Автоматическая вставка (Y100 и Y101)

    Джон Пэпа использует так называемую услугу ngAnnotate что находится в задании gulp или grunt что это делает точно:

    Когда он находит функцию с комментарием /*@ngInject*/ проверь аргументы этой функции и он добавляет свойство $inject в функцию (он помнит, что у всех функций в javascript могут быть свойства равно как остальные объекты) с зависимостями, которых он требует вводимые ты. Таким образом, ты можешь писать твой код, не этого отмечая в development и когда minifiques и сделай build вставки будут размещены автоматически. Если ты используешь нотацию договоренности, он будет немного сложнее, так как ты должен показывать его в ng-annotate что функция вводимая используя цепь символов в теле функции с "ngInject"; что может быть опущенным очень легко создавая большое количество ошибок в build.

  2. Использование функций (Y024)

    Джон Пэпа использует заявления функции вместо выражений функции или анонимных функций, чтобы располагать в порядке весь Ваш код. Увидь мой ответ в https://es.stackoverflow.com / в / 4572/2224 для того, чтобы ты понял различия между двумя часами, когда он делается hoisting. Согласно Вашему гиду этот главный файл - рекомендуемый

    /* recommended */
    
    // dataservice factory
    angular
        .module('app.core')
        .factory('dataservice', dataservice);
    
    dataservice.$inject = ['$http', '$logger'];
    
    function dataservice($http, logger) {
        //...
    }
    

    Поскольку ты можешь видеть функцию, которую определяет controller, перешли с ним в модуль несмотря на то, что был признан внизу тем, что позволяет тебе отделять блок определения и позволяет тебе читать наиболее каков это Ваши зависимости. Возможно читать, таким образом:

    módulo->nombre del inyectable->dependencias->implementación

    В контрасте это труднее для того, чтобы прочитать, так как имя вводимого запутывается с Вашими зависимостями.

    /* avoid */
    
    // dataservice factory
    angular
        .module('app.core')
        .factory('dataservice', ['$http', 'logger', dataservice]);
    
    function dataservice($http, logger) {
        //...
    }
    
  3. Использование $inject и зависимостей (Y091)

    ng-annotate смоги обнаруживать, когда уже была сделана вставка и не повторяет ее, использовать один $inject облегчи этот процесс, так как ng-annotate используй эту же самую технику, чтобы определять зависимости.

    В директивных органах controllers вводимые также; если ты проверяешь путеводитель, это может быть проблема, когда ты помещаешь инструкцию return перед заявлением твоей функции (что является главным файлом, очень использованным в этом путеводителе!!!!), так что использовать один $inject смоги помогать тебе немного, так как ты можешь двигать всегда твою функцию наискось вместе с Вашими зависимостями, что не всегда возможное, если ты используешь нотацию договоренности.

Подразумеваемая нотация

Эта нотация только рекомендуется в development, так как, когда minifiques твои зависимости будут названы, и например услуга $http возможно называть в a или b что способствует тому, чтобы угловой он был неспособен находить вводимо определенный; по этой причине Джон Пэпа не рекомендует ее тебе.

Чтобы включать этот одинокий способ ты должен перемещать определение тебя вводимо без свойства $inject и не используя договоренности. Эдж:

angular.module('nombreModulo')
    .controller('nombreController', definicionDelController);

function definicionDelController(dependencia1, dependencia2) {

}
2
ответ дан 24.11.2019, 14:48
  • 1
    Seg и # 250; n то, что ты говоришь, если я использую notaci и # 243; n impl и # 237; назначь встречу не podr и # 237; в minificar код, благодаря тому, что они произвели бы ошибки, не найдя имя введенных зависимостей? – Pedro Miguel Pimienta Morales 26.02.2016, 00:17
  • 2
    Если ты используешь minificaci и # 243; n подразумеваемая и не ты используешь инструмент, как ng-annotate (В сдержись john картофель уже он приходит по умолчанию в gulp), если podr и # 225; s minificar, но оно ты не будет функционировать. Этот инструмент был построен для того, чтобы ты не был должен заботиться о зависимостях независимо о типе notaci и # 243; n, который ты использовал. Это хорошая практика давать возможность inyecci и # 243; n зависимостей строгая с директивным органом ng-strict-di и использовать $inject для того, чтобы у тебя не было сюрпризов, когда ты сделаешь build. Этот recomendaci и # 243; n он приходит из самой documentaci и # 243; n углового – devconcept 26.02.2016, 17:04
  • 3
    minificadores могут конфигурироваться для того, чтобы они не назвали имена аргументов. Смотри opci и # 243; n mangle в gulp-uglify и Uglify2 , но все это может быть предотвращенным создавая h и # 225; bito писания $inject в тебе c и # 243; я говорю. Самая большая и # 237; в IDES они выносят шаблоны c и # 243; я говорю и Джон Пэпа включает его в Y250-Y260 схвати и # 237; который можешь писать ты c и # 243; я говорю уже с хорошими pr и # 225; cticas включенные;) – devconcept 26.02.2016, 17:19
  • 4
    Спасибо, о равном способе я думаю, что идеальное состоит в том, чтобы избегать конфигурировать что-то, что является тем, что я ищу, но он это не знал, спасибо за данные. – Pedro Miguel Pimienta Morales 26.02.2016, 17:29
  • 5
    Я falt и # 243;: J. Папа не и #250; nico, у которого есть gu и # 237; в стиля; Тодд Мотто tambi и # 233; n у него есть одна , которая имеет какие-то сходства со сходством J. Ешь. Оба касаются темы minificaci и # 243; n из-за точно тех же причин. Я llam и # 243; atenci и # 243; n твой вопрос, когда ты написал нормальная форма , в конце концов все нормальные, если только в моменте, который я написал, и # 243; gu и # 237; чтобы использовать $inject est и # 225; модный;) Раньше notaci и # 243; n договоренности это была мода и нет ничего из дьявола в этом: D – devconcept 26.02.2016, 17:34

Теги

Похожие вопросы