Eine eingehende Analyse der Module in AngularJS_AngularJS

Was sind AngularJS-Module?

Das Modul, über das wir sprechen, ist ein integraler Bestandteil Ihrer AngularJS-Anwendung. Es kann ein Controller, ein Dienst, ein Filter oder eine Direktive usw. sein. Sie gehören alle zu einem Modul.

Die meisten Anwendungen verfügen über eine eigene Funktionseingabemethode Main, mit der verschiedene Module initialisiert, geladen und zusammengestellt werden. Die Kombination dieser Module bildet dann Ihre Anwendung, oder?

Aber, aber, die AngularJS-Anwendung ist nicht so. Sie hat keine Hauptmethode und keinen Funktionseintrag. Stattdessen wird im Modul angegeben, wie dieses Modul in der AngularJS-Anwendung geladen und gestartet werden soll.

Diese Methode hat folgende Vorteile:

1) Verwenden Sie Deklarationen, um es den Menschen leichter verständlich zu machen.

2) Sie können Ihren Code einfacher wiederverwenden.

3) Die Ladereihenfolge der Module ist einfacher zu steuern. Weil diese Module träge ausgeführt werden.

4) Es wird bequemer, Unit-Tests durchzuführen. Zuverlässiger: Sie müssen dieses Modul nur zum Testen laden.

5) Beim End-to-End-Testen können Sie Module verwenden, um Konfigurationen neu zu schreiben.

Module sind eine Kernexistenz in AngularJS und umfassen viele Aspekte wie Controller, Konfiguration, Service, Factory, Direktive, Konstante usw.

Wie implementiert man modulähnliche Funktionen in Javascript?

Mit anderen Worten: Wenn wir eine Funktion definieren, wie öffnen wir die Funktionen innerhalb der Funktion für die Außenwelt?

Ich denke, dass die Funktion in der Funktion als Schlüsselwert eines Objekts verwendet werden kann, um es für die Außenwelt zu öffnen.

Es ist sehr allgemein, das zu sagen, aber es ist tatsächlich so:

var myModule = function outerFuction(){
  var method1 = new function(){}
  var method2 = new function(){}
  return{
    method1: method1,
    method2, method2
  }
}
var o = outerFucntion();
o.method1();
o.mehtod2(); 

Geben Sie ein Beispiel für die Ein- und Auszahlung von Geld bei einer Bank.

var account = function(){
 //余额
 var balance = 0;
 //存钱
 var deposit = function(money){
  balance+=money;
  console.log("卡上余额为： " + balance);
  notifyUser();
 }
 //取钱
 var withdraw = function(money){
  balance -= money;
  console.log("卡上余额为： " + balance)
  notifyUser();
 }
 //通知用户
 var notifyUser = function(){
  console.log("卡上余额有变动");
 }
 return {
  deposit:deposit,
  withdraw: withdraw
 }
}
var a1 = account();
a1.deposit(100);
a1.withdraw(50); 

Wenn wir zu AngularJS kommen, sind wir es gewohnt, so zu schreiben:

var app = angular.module('app',[]);
app.config();
app.controller();
app.factory();
... 

Das heißt, holen Sie sich das Modul und rufen Sie dann die Methode auf, die uns das Modul zur Verfügung stellt.

Sehen Sie sich den Quellcode von angle.js an und finden Sie:

angular = window.angular || (window.angular = {} )

Aus diesem Grund können wir die Winkelvariable verwenden.

...
var moduleInstace = {
    provider: invokeLater('$provide','provider'),
    factory: invokeLater('$provider', 'factory'),
    service: invokeLater('$provider', 'service'),
    value: invokeLater('$provide', 'value'),
    constant: invokeLater('$provider', 'constant'...),
    animation: invokeLater('$animateProvider',...),
    filter: invokeLater('$filterProvider',...),
    controller: invokeLater('$controllerProvider',...),
    directive: invokeLater('$compileProvider',...),
    config: config,
}
return moduleInstance;
... 

Die obige Schreibmethode entspricht genau der Art und Weise, wie das Modul geschrieben wird.

PS: Es gibt einen kleinen, aber wichtigen Unterschied zwischen angle.module('MyApp',[...]) und angle.module('MyApp')

angle.module('MyApp',[...]) erstellt ein neues Angular-Modul und lädt die Abhängigkeitsliste in eckigen Klammern ([...]); während angle.module('MyApp') verwendet wird das vorhandene Modul, das durch den ersten Aufruf definiert wurde.

Für den folgenden Code müssen Sie also sicherstellen, dass er in der gesamten Anwendung nur einmal verwendet wird:

angular.module('MyApp', [...]) //Wenn Ihre Anwendung modular ist, kann dies MyModule sein

Wenn Sie nicht vorhaben, die Modulreferenz in einer Variablen zu speichern und dann in der gesamten Anwendung über diese Variable auf das Modul zu verweisen, kann die Verwendung von angle.module(MyApp) in anderen Dateien sicherstellen, dass Sie die richtige AngularJS-Modulreferenz erhalten . Alles im Modul muss definiert werden, indem auf diese Modulreferenz zugegriffen wird oder indem der erforderliche Inhalt dort hinzugefügt wird, wo das Modul definiert ist.