Zusammenfassung der Verwendung von Require.js

1. Warum require.js verwenden?

Wenn eine Seite mehrere js-Dateien lädt, wird die Der Browser stoppt das Rendern der Webseite, desto länger verliert die Webseite die Reaktion. Zweitens muss die Ladereihenfolge strikt gewährleistet sein wird schwierig zu schreiben und zu pflegen sein.

require.js soll diese beiden Probleme lösen:

1. 　js asynchrones Laden implementieren von Dateien, um Reaktionsverluste auf Webseiten zu vermeiden;

2. 　 verwaltet Abhängigkeiten zwischen Modulen, um das Schreiben und Warten von Code zu erleichtern.

2. Laden von require.js

Kapitel Schritt eins: Gehen Sie zur offiziellen Website, um die neueste Version herunterzuladen, und legen Sie sie direkt auf die Seite zum Laden

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

Das Laden dieser Datei kann möglich sein Damit die Webseite nicht mehr reagiert, können Sie sie zum Laden am Ende der Seite platzieren oder wie folgt schreiben:

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

Das Attribut async gibt an, dass diese Datei asynchron geladen werden muss, um zu verhindern, dass die Webseite nicht mehr reagiert. 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 den Eingang darstellt und als Hauptmodul bezeichnet werden kann. Wenn die Datei main.js heißt, es wird wie folgt geschrieben. Das ist es:

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

3. Wie schreibe ich das Hauptmodul

Wenn das Hauptmodul von jQuery abhängt, können Sie es so schreiben:

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

4. require.config()-Methode

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

Der obige Code gibt die Dateinamen der drei Module an. Der Pfad ist standardmäßig im gleichen Verzeichnis wie main .js (js-Unterverzeichnis). 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 Möglichkeit 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 dessen 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 das AMD-Modul

geladen von js übernehmen 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, dann das erste von Der Parameter der Funktion define() muss ein Array sein, das die Abhängigkeiten des Moduls angibt.

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

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

六、加载非规范的模块（shim的使用方式）

 //  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())  
})

导出一个函数,意味着我们得到了一个javaScript类

但是如果在my.js中写了很多function，整合成一个function有点麻烦，想直接导出？方法如下：

 //　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');
　　});

shim的有序导入

   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 ) {}     
     　　 });    
　　 }

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