Teilen der Verwendungsmethode von Require.js

Dieser Artikel enthält hauptsächlich einen Artikel, der auf der Verwendung von Require.js basiert (Zusammenfassung). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Warum require.js verwenden?

Wenn eine Seite mehrere js-Dateien lädt, stoppt der Browser das Rendern der Webseite. Je mehr Dateien geladen werden, desto mehr wird die Webseite geladen Die Reaktionszeit wird länger sein. Zweitens muss die Ladereihenfolge strikt gewährleistet sein, wenn die Abhängigkeiten komplex sind.

require.js soll diese beiden Probleme lösen:

1. Implementieren Sie das asynchrone Laden von JS-Dateien, um zu vermeiden, dass Webseiten die Reaktion verlieren.
2 Schreiben und Pflege.

2. Laden von require.js

Der erste Schritt besteht darin, die neueste Version von der offiziellen Website herunterzuladen und direkt auf die Seite zu laden

<script src="js/require.js"></script>

Laden Diese Datei kann dazu führen, dass die Webseite nicht mehr reagiert. Sie können sie zum Laden unten auf der Seite platzieren oder das asynchrone Attribut

<script src="js/require.js" defer async="true" ></script>

schreiben, um anzugeben, dass die Datei asynchron geladen werden muss um zu verhindern, dass die Webseite die Reaktion verliert. Der IE unterstützt dieses Attribut nicht und unterstützt nur die Verzögerung, sodass auch die Verzögerung geschrieben wird.

Nach dem Laden von require.js besteht der nächste Schritt darin, unseren eigenen Code zu laden, der als Hauptmodul bezeichnet werden kann. Wenn die Datei main.js heißt, kann sie wie folgt geschrieben werden :

<script src="js/require.js" data-main="js/main"></script>  .js后缀可以省略

3. So schreiben Sie das Hauptmodul

Wenn das Hauptmodul von jQuery abhängt, können Sie es wie folgt schreiben

require(['jquery'], function ($){ 
　　　alert($); 
});

4 .config()-Methode

require.config({ 
　　paths: { 
　　　　"jquery": "jquery.min", 
　　　　"underscore": "underscore.min", 
　　　　"backbone": "backbone.min"
　　} 
});

Der obige Code gibt die Dateinamen der drei Module an, und die Pfade befinden sich standardmäßig im selben Verzeichnis (js-Unterverzeichnis) wie main.js. Wenn sich diese Module in anderen Verzeichnissen befinden, beispielsweise im Verzeichnis js/lib, gibt es zwei Möglichkeiten, sie zu schreiben.

• Eine besteht darin, die Pfade einzeln anzugeben.

require.config({ 
　　paths: { 
　　　　"jquery": "lib/jquery.min", 
　　　　"underscore": "lib/underscore.min", 
　　　　"backbone": "lib/backbone.min"
　　} 
});

• Die andere besteht darin, das Basisverzeichnis (baseUrl) direkt zu ändern.

require.config({ 
　　baseUrl: "js/lib", 
　　paths: { 
　　　　"jquery": "jquery.min", 
　　　　"underscor: "underscore.min", 
　　　　"backbone": "backbone.min" 
　　} 
});

• Wenn sich ein Modul auf einem anderen Host befindet, können Sie seine URL auch direkt angeben, z. B.

require.config({ 
　　paths: { 
　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　} 
});

So schreiben Sie ein AMD-Modul

Das von require.js geladene Modul übernimmt AMD-Spezifikationen. Mit anderen Worten: Das Modul muss gemäß den AMD-Vorschriften geschrieben sein.

Konkret muss das Modul mit einer bestimmten define()-Funktion definiert werden. Wenn ein Modul nicht von anderen Modulen abhängig ist, kann es direkt in der Funktion define() definiert werden.

// math.js 
define(function (){ 
　　var add = function (x,y){ 
　　　　return x+y; 
　　}; 
　　return { 
　　　　add: add 
　　}; 
});

Die Lademethode ist wie folgt:

 // main.js 
require(['math'], function (math){ 
　　alert(math.add(1,1)); 
});

Wenn dieses Modul auch von anderen Modulen abhängt, muss der erste Parameter der Funktion define() ein sein Array, das die Abhängigkeiten dieses Moduls angibt.

define(['myLib'], function(myLib){ 
　　function foo(){ 
　　　　myLib.doSomething(); 
　　} 
　　return {  //返回模块中的函数 
　　　　foo : foo 
　　}; 
});

Wenn die Funktion require() das obige Modul lädt, wird zuerst die Datei myLib.js geladen.

6. Nicht standardmäßige Module laden (wie man Shim verwendet)

// app.js 
 function sayHello(name){ 
 　alert('Hi '+name); 
}

// main.js 
require.config({ 
　　shim: { 
　　　　'app': { //这个键名为要载入的目标文件的文件名，不能随便命名。 
　　　　　　exports: 'sayHello' //exports的值为my.js提供的 对外接口的名称 
　　　　} 
　　} 
}); 
 
require(['app'], function(sayHello) { 
 alert(sayHello()) 
})

Das Exportieren einer Funktion bedeutet, dass wir eine JavaScript-Klasse erhalten

Aber wenn ja Ich habe viele Funktionen in my.js geschrieben. Es ist etwas mühsam, sie in eine Funktion zu integrieren. Möchten Sie sie direkt exportieren? Die Methode ist wie folgt:

//　app.js 
function sayHi(name){ 
 alert('Hi '+name); 
} 
function sayHello(name){ 
 alert('Hiello '+name); 
}

// main.js 
　　require.config({ 
　　　　shim: { 
　　　　　　app: { 
　　　　　　　　init: function() { //这里使用init将2个接口返回 
　　　　　　　　　　return { 
　　　　　　　　　　　　sayHi: sayHi, 
　　　　　　　　　　　　sayHello: sayHello 
　　　　　　　　　　} 
　　　　　　　　} 
　　　　　　} 
　　　　} 
　　}); 
 
　　require(['app'], function(a) { 
　　　　a.sayHi('zhangsan'); 
　　　　a.sayHello('lisi'); 
　　});

Bestellter Import von Unterlegscheiben

require.config({ 
 
 shim: { 
 　　 'jquery.ui.core': ['jquery'], //表示在jquery导入之后导入 
 　　 'jquery.ui.widget': ['jquery'], 
 　　 'jquery.ui.mouse': ['jquery'], 
 　　 'jquery.ui.slider':['jquery'] 
 　 }, 
 paths : {  
  jquery : 'jquery-2.1.1/jquery',  
  domReady : 'require-2.1.11/domReady',  
  'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',  
  'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',  
  'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',  
  'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider' 
  } 
　　});  
 
　　require(['jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'], function($) {    
 　　$("#slider" ).slider({    
 　　 value:0,   
 　　 min: 0,   
  　　max: 4,   
  　　step: 1,   
  　　slide: function( event, ui ) {}  
  　　 });  
　　 });

Verwandte Empfehlungen:

Beispielfreigabe spezifischer Methoden zur Verwendung erweiterter modularer require.js in JavaScript

Detaillierte Erläuterung spezifischer Methoden zur Verwendung erweiterter modularer require.js in JavaScript

Zusammenfassung zur Verwendung von .js erforderlich

Das obige ist der detaillierte Inhalt vonTeilen der Verwendungsmethode von Require.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!