2016-07-28 9 views
1

Ich portiere ein vorhandenes AngularJS (1.x) Projekt nach TypeScript, soweit Code funktioniert, aber ich frage mich, warum das passiert.Typskript kompiliertes Modul deklariert var vor automatischem Aufruf der Funktion

In JavaScript erkläre ich ein Modul wie folgt:

(function() { 
    'use strict'; 
    angular.module('myModule', []); 
})(); 

In Typoskript etwa so:

module myModule { 
    'use strict'; 
    angular.module('myModule', []); 
} 

, die zu dieser zusammengestellt:

var myModule; 
(function (myModule) { 
    "use strict"; 
    angular.module("myModule", []); 
})(myModule || (myModule = {})); 

Ich habe einige Zweifel :

  1. Ist es nicht falsch, dem globalen Gültigkeitsbereich var myModule hinzuzufügen?
  2. Warum wird myModule an die anonyme Funktion übergeben?
  3. Da die var myModule hinzugefügt wird, frage ich mich, ob ich das Überschreiben vermeiden sollte. Ich unterscheide Moduldeklaration von, sagen wir, dem Controller. Ich frage mich, wenn ich den Controller deklariere, sollte ich einen anderen module Namen verwenden?

Mit anderen Worten, kann ich wieder verwenden den gleichen Namen für das zweite Modul, wie so

module myModule { 
    angular 
     .module('myModule') 
     .controller('myController'); 
} 
// which will "overwrite" the preexisting var myModule 

Oder wäre es besser, einen anderen Namen für das Modul zu verwenden, etwa so:

module myModuleController { 
    angular 
     .module('myModule') 
     .controller('myController'); 
} 
// which will generate another var myModule 

Ich habe bereits gesehen, dass der Code genauso gut funktioniert, aber ich bin sicher, dass es bestimmte Dinge gibt, die ich in dieser Angelegenheit wissen sollte.

Antwort

0

Es tut, dass so können Sie dieses Modul aus anderen Orten zuzugreifen, zum Beispiel:

module ModuleA { 
    export var num = 4; 
} 

module ModuleB { 
    export function log() { 
     console.log(ModuleA.num); 
    } 
} 

können Sie auch dann mehr in dem gleichen Modul:

module ModuleA { 
    export var num = 4; 
} 

module ModuleA { 
    export var str = "string"; 
} 

console.log(ModuleA.num); // 4 
console.log(ModuleA.str); // string 

In Die kompilierte js in Ihrem Beispiel myModule wird übergeben, so dass die neuen Definitionen zum vorhandenen Modul hinzugefügt werden, wenn es einen gibt, oder {} wenn nicht.
Die kompilierten js in meinem (2.) Beispiel:

var ModuleA; 
(function (ModuleA) { 
    ModuleA.num = 4; 
})(ModuleA || (ModuleA = {})); 
var ModuleA; 
(function (ModuleA) { 
    ModuleA.str = "string"; 
})(ModuleA || (ModuleA = {})); 

Wie Sie in der zweiten Mal sehen ModuleA nicht leer sein wird und so das Hinzufügen der str Variable wird auf dem vorherigen definierten Modul durchgeführt werden.

Beachten Sie, dass dieses Verhalten nur wahr ist, wenn Sie nicht ein Modulsystem, zum Beispiel dieser Verwendung:

export module ModuleA { 
    export var num = 4; 
} 

Kompiliert in:

define(["require", "exports"], function (require, exports) { 
    "use strict"; 
    var ModuleA; 
    (function (ModuleA) { 
     ModuleA.num = 4; 
    })(ModuleA = exports.ModuleA || (exports.ModuleA = {})); 
}); 

(mit dem Standard-Modulsystem)

+0

Danke, viel klarer :-).Eine Frage aber, da ich in AngularJS bin, sollte ich define verwenden? – ghego1

+0

Ich bin kein eckiger Entwickler, also kann ich nicht aus Erfahrung antworten, aber als Ganzes bewegt sich die Javascript-Welt zu Modulladern. Überprüfen Sie diesen Artikel, den ich gefunden habe: [AngularJS 1.x mit Best Practices für TypeScript (oder ES6)] (https://codepen.io/martinmcwhorter/post/angularjs-1-x-with-typescript-o--es6-best-practices). Es empfiehlt, diesen Ansatz zu verwenden –

Verwandte Themen