Grafik- und Texterklärung von Require.js

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung von Require.js mit Bildern und Text und welche Vorsichtsmaßnahmen bei der Verwendung von Require.js gelten. Hier sind praktische Fälle ein Blick.

1. Warum require.js verwenden?

Erstens: Wenn eine Seite mehrere JS-Dateien lädt, stoppt der Browser das Rendern der Webseite Wenn die Ladereihenfolge gewährleistet ist, wird das Schreiben und Warten von Code schwierig.

require.js soll diese beiden Probleme lösen:

1. Implementieren Sie das asynchrone Laden von JS-Dateien, um zu verhindern, dass Webseiten nicht mehr reagieren.
2. Abhängigkeiten zwischen Modulen verwalten, um das Schreiben und Warten von Code zu erleichtern.

2. Laden von require.js

Der erste Schritt besteht darin, die neueste Version von der offiziellen Website herunterzuladen und sie zum Laden direkt auf die Seite zu stellen

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

Das Laden dieser Datei kann dazu führen, dass die Webseite nicht mehr reagiert. Sie können sie zum Laden am Ende der Seite platzieren oder sie wie folgt schreiben:

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

Das asyncAttribut 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, 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 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 dasselbe 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 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"
  } 
});

5. So schreiben Sie ein AMD-Modul

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

Insbesondere müssen Module mithilfe einer bestimmten Funktion define() 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 Array sein, das die Abhängigkeiten des 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 Wenn Sie jedoch viele Funktionen in my.js schreiben, ist es 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'); 
  });

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonGrafik- und Texterklärung von Require.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!