Zusammenfassung der Anwendungsfälle für das modulare Laden von Require.js/AMD in Javascript

Modulares Laden von Require.js/AMD

Entwickler möchten Skriptlader verwenden, um chaotische Rich-Script-Anwendungen übersichtlicher zu gestalten, und Require .js ist eine dieser Optionen. Require.js ist ein leistungsstarkes Toolkit, das automatisch mit AMD-Technologie arbeitet, um selbst die komplexesten Skriptabhängigkeitsdiagramme zu glätten.
Schauen wir uns nun ein einfaches Beispiel zum Laden eines Skripts an, bei dem die gleichnamige Funktion in Require.js verwendet wird. Die

require(['moment'], function(moment) {
  console.log(moment().format('dddd')); // 星期几
});

require-Funktion akzeptiert ein Array von Modulnamen und lädt alle diese Skriptmodule parallel. Im Gegensatz zu yepnope garantiert Require.js nicht, dass die Zielskripte in der richtigen Reihenfolge ausgeführt werden, sondern stellt nur sicher, dass ihre Ausführungsreihenfolge ihre jeweiligen Abhängigkeitsanforderungen erfüllen kann, allerdings nur, wenn die Definition dieser Skripte AMD (Asynchronous Module Definition, asynchrones Modul) entspricht Definition) Spezifikation.

Fall Eins: Laden von JavaScript-Dateien

 <script src="./js/require.js"></script> 
<script> 
  require(["./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

Wie in Fall Eins gezeigt, gibt es zwei JavaScript-Dateien a.js und b.js definieren jeweils zwei Methoden myFunctionA und myFunctionB. Sie können RequireJS verwenden, um diese beiden Dateien auf die folgende Weise zu laden. Der Code im Funktionsteil kann auf die Methoden in diesen beiden Dateien verweisen.

Der String-Array-Parameter in der Require-Methode kann unterschiedliche Werte zulassen. Wenn die Zeichenfolge mit „.js“ endet oder mit „/“ beginnt oder eine URL ist, wird RequireJS berücksichtigt Wenn die Zeichenfolge andernfalls „my/module“ ähnelt, wird davon ausgegangen, dass es sich um ein Modul handelt, und das JavaScript wird dort geladen, wo sich das entsprechende Modul basierend auf der Basis-URL und den konfigurierten Pfaden befindet vom Benutzer erstellt. Der Konfigurationsteil wird später ausführlich vorgestellt.

Hier sollte darauf hingewiesen werden, dass RequireJS nicht garantiert, dass myFunctionA und myFunctionB standardmäßig ausgeführt werden müssen, nachdem die Seite geladen wurde Wenn die Seite geladen ist, stellt RequireJS ein unabhängiges domReady-Modul bereit. Sie müssen zur offiziellen Website von RequireJS gehen, um dieses Modul herunterzuladen. Es ist nicht in RequireJS enthalten. Mit dem domReady-Modul kann der Code in Fall 1 leicht geändert und mit einer Abhängigkeit von domReady hinzugefügt werden.

Fall 2: JavaScript ausführen, nachdem die Seite geladen wurde

 <script src="./js/require.js"></script> 
<script> 
  require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

Nach der Ausführung des Codes in Fall 2 können Sie über Firebug sehen, dass RequireJS ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag für a.js und b.js auf der aktuellen Seite einfügt, um JavaScript-Dateien asynchron herunterzuladen. Das async-Attribut wird derzeit von den meisten Browsern unterstützt, was bedeutet, dass die js-Datei im 27835793f4768f4164d1421d99e293bc-Tag den Download anderer Seiteninhalte nicht blockiert.

Fall 3: RequireJS eingefügt 27835793f4768f4164d1421d99e293bc ist für die Bereitstellung einer globalen Funktion namens define verantwortlich, die drei Parameter hat:
Modulname ,

Liste der Modulabhängigkeiten,

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" 
 data-requiremodule="js/a.js" src="js/a.js"></script>

der Rückrufe, die am Ende des Ladens dieser abhängigen Module ausgelöst werden.
• Verwenden Sie RequireJS, um JavaScript-Module zu definieren
  Das JavaScript-Modul hier unterscheidet sich von herkömmlichem JavaScript-Code dadurch, dass es nicht auf globale Variablen zugreifen muss. Der modulare Aufbau ermöglicht es JavaScript-Code, diese „globalen Variablen“ über Abhängigkeiten als Parameter an den Implementierungskörper des Moduls zu übergeben, wenn er auf „globale Variablen“ zugreifen muss, wodurch die Notwendigkeit vermieden wird, in der Implementierung auf globale Variablen zuzugreifen oder diese zu deklarieren Funktionen, wodurch eine große und komplexe Namespace-Verwaltung effektiv vermieden wird.
Wie in der AMD-Spezifikation für CommonJS angegeben, erfolgt die Definition von JavaScript-Modulen über die Methode define.
• Schauen wir uns zunächst ein einfaches Beispiel an. In diesem Beispiel erstellen wir durch die Definition eines Studentenmoduls und eines Klassenmoduls ein Studentenobjekt im Hauptprogramm und fügen das Studentenobjekt in die Klasse ein.

Fall 4: Studentenmodul, student.js

Fall 5: Klassenmodul, class.js

define(function(){ 
   return { 
    createStudent: function(name, gender){ 
       return { 
         name: name, 
         gender: gender 
       }; 
    } 
   }; 
 });

Fall Sechs: Hauptprogramm

 define(function() { 
 var allStudents = []; 
    return { 
      classID: "001", 
      department: "computer", 
      addToClass: function(student) { 
      allStudents.push(student); 
      }, 
      getClassSize: function() { 
      return allStudents.length; 
      } 
    }; 
   } 
 );

Das Studentenmodul und das Klassenmodul sind unabhängige Module. Als nächstes definieren wir ein neues Modul, dieses Modul setzt auf die Studierenden- und Klassenmodule, sodass auch die Logik des Hauptprogrammteils verpackt werden kann.
Fall 7: Manager-Modul, das auf Schüler- und Klassenmodulen basiert, manager.js

 require(["js/student", "js/class"], function(student, clz) { 
   clz.addToClass(student.createStudent("Jack", "male")); 
   clz.addToClass(student.createStudent("Rose", "female")); 
   console.log(clz.getClassSize()); // 输出 2 
 });

Fall 8: Neues Hauptprogramm

define(["js/student", "js/class"], function(student, clz){ 
  return { 
    addNewStudent: function(name, gender){ 
    clz.addToClass(student.createStudent(name, gender)); 
    }, 
    getMyClassSize: function(){ 
    return clz.getClassSize(); 
    } 
   }; 
});

require(["js/manager"], function(manager) { 
   manager.addNewStudent("Jack", "male"); 
   manager.addNewStudent("Rose", "female"); 
   console.log(manager.getMyClassSize());// 输出 2 
 });

通过上面的代码示例，我们已经清楚的了解了如何写一个模块，这个模块如何被使用，模块间的依赖关系如何定义。

其实要想让自己的站点更快捷，可以异步加载那些暂时用不到的脚本。为此最简单的做法是审慎地使用defer 属性和async 属性。如果要求根据条件来加载脚本，请考虑像yepnope 这样的脚本加载器。如果站点存在大量相互依赖的脚本，请考虑Require.js。选择最适合任务的工具，然后使用它，享受它带来的便捷。

Das obige ist der detaillierte Inhalt vonZusammenfassung der Anwendungsfälle für das modulare Laden von Require.js/AMD in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!