Korrekter Weg zum Einrichten einer AngularJS-Anwendung im globalen Namespace?

Question

Ich habe eine AngularJS-App geerbt, die ein anderer Entwickler entwickelt hat. Und jetzt soll ich diese App weiterentwickeln und unterstützen.

Eine Sache, die ich sofort bemerkte, war die Art und Weise, in der er seine App und Controller deklarierte, nicht die Syntax IIFE (sofort aufgerufener Funktionsausdruck) verwendete oder die App und Module Variablen zuwies.

Er erklärte alles in folgendem Format:

Die App-Modul:

'use strict'; 

angular 
    .module('app', [ 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    'ngTouch', 
    'ngSanitize' 

}]); 

Beispiel Controller:

'use strict'; 

angular.module('app') 

    .controller('newCtrl', 
    ['$scope', function($scope) { 


}]); 

Statt etwas wie dies mit (IIFE):

(function() { 

    'use strict'; 

    angular.module('app') 
     .controller('newCtrl'); 

})(); 

Oder diese:

var app = angular.module('app', [ 

    "ngMessages", 
    "ngResource", 

]); 

Wird die von der vorherigen Entwickler verwendete Methode möglicherweise verschmutzt die globalen Namensraum mit Variablen usw. clashing?

Wie ich es verstehe, und IIFE ist nützlich, und aus den folgenden Gründen empfohlen:

Warum ?: Ein IIFE Variablen aus dem globalen Bereich entfernt. Dies hilft zu verhindern, dass Variablen und Funktionsdeklarationen im globalen Gültigkeitsbereich länger als erwartet leben, wodurch auch variable Kollisionen vermieden werden.

Warum ?: Wenn der Code für die Bereitstellung auf einem Produktionsserver verkleinert und in einer einzigen Datei gebündelt wird, können Kollisionen von Variablen und vielen globalen Variablen auftreten. Ein IIFE schützt Sie vor diesen beiden, indem Sie einen variablen Bereich für jede Datei bereitstellen.

Answer 1

In dem obigen Code nichts zu globalen Lecks Namensraum (außer angular gl obal, die auf jeden Fall leckt). Es gibt keine benannten Funktionen oder temporäre Variablen wie app.

Eckige Angebote angular.module Methodenverkettung und Inline-Array-Annotation genau, um eine komfortable Entwicklung ohne IIFEs oder Bündelung System zu ermöglichen.

angular.module(...).constant('constant', (() => { 
    var constant = ...; 
    ... 
    return constant; 
})()); 

Für hochmodulare Anwendung (ein Winkelmodul pro Datei:

Wenn es notwendig ist, eine Variable außerhalb der Fabrik-Funktion (dies ist der Fall für constant Service) zu definieren, ein IIFE soll verwendet werden,) Es ist möglich angular.module('moduleName') Modul-Getter loszuwerden und sich auf Angular-Module zur Abhängigkeitsverwaltung zu verlassen, dies erlaubt es, die Modulreihenfolge beim Laden oder Bündeln von Dateien nicht beizubehalten. Dies passt auch zum Bild.

Answer 2

Leider nein. Es gibt keine Möglichkeit, das zu ändern. Vielleicht können Sie die Lösung von Drittanbietern abwandeln oder ähnliche Bibliotheken finden, die auf angemessene Weise geschrieben wurden.

UPDATE

Oder können Sie Postprozessoren wie folgt verwenden:

schluck:https://www.npmjs.com/package/gulp-iife

Grunzen:https://www.npmjs.com/package/grunt-iife