Partage de la méthode d'utilisation de Require.js

Cet article vous apporte principalement un article basé sur l'utilisation de Require.js (résumé). L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Pourquoi utiliser require.js

Tout d'abord, si une page charge plusieurs fichiers js, le navigateur cessera de restituer la page Web. Plus il y a de fichiers chargés, plus la page Web sera chargée. le temps de réponse sera plus long ; deuxièmement, comme il existe des dépendances entre les fichiers js, l'ordre de chargement doit être strictement garanti. Lorsque les dépendances sont complexes, l'écriture et la maintenance du code deviendront difficiles.

require.js consiste à résoudre ces deux problèmes :

1. Implémenter le chargement asynchrone des fichiers js pour éviter que les pages Web ne perdent de réponse
2. rédaction et maintenance.

2. Chargement de require.js

La première étape consiste à télécharger la dernière version depuis le site officiel et à la mettre directement sur la page à charger

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

Chargement ce fichier peut provoquer Si la page Web perd la réponse, vous pouvez la placer en bas de la page pour la charger, ou vous pouvez écrire l'attribut asynchrone

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

pour indiquer que le fichier doit être chargé de manière asynchrone pour empêcher la page Web de perdre la réponse. IE ne prend pas en charge cet attribut et ne prend en charge que defer, donc defer est également écrit.

Après avoir chargé require.js, l'étape suivante consiste à charger notre propre code, qui est l'entrée. Il peut être appelé le module principal. Si le fichier s'appelle main.js, il peut être écrit comme suit. :

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

3. Comment écrire le module principal

Si le module principal dépend de jQuery, vous pouvez l'écrire comme ceci

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

4. Méthode .config()

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

Le code ci-dessus donne les noms de fichiers des trois modules, et les chemins sont dans le même répertoire (sous-répertoire js) que main.js par défaut. Si ces modules se trouvent dans d'autres répertoires, comme le répertoire js/lib, il existe deux manières de les écrire.

• L'une consiste à spécifier les chemins un par un

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

• L'autre consiste à changer directement le répertoire de base (baseUrl).

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

• Si un module est sur un autre hôte, vous pouvez également spécifier directement son URL, par exemple

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

5 Comment écrire un module AMD

.

Le module chargé par require.js adopte les spécifications AMD. En d'autres termes, le module doit être écrit conformément aux réglementations AMD.

Plus précisément, le module doit être défini à l'aide d'une fonction definition() spécifique. Si un module ne dépend pas d'autres modules, il peut être défini directement dans la fonction définir().

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

La méthode de chargement est la suivante :

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

Si ce module dépend également d'autres modules, alors le premier paramètre de la fonction définir() doit être un tableau, indiquant les dépendances de ce module.

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

Lorsque la fonction require() charge le module ci-dessus, le fichier myLib.js sera chargé en premier.

6. Chargement de modules non standards (comment utiliser 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()) 
})

Exporter une fonction signifie que nous obtenons une classe javaScript

Mais si vous en avez J'ai écrit de nombreuses fonctions dans my.js, c'est un peu gênant de les intégrer dans une seule fonction. Voulez-vous les exporter directement ? La méthode est la suivante :

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

Importation commandée de cale

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

Recommandations associées :

Partage d'exemples de méthodes spécifiques d'utilisation de require.js modulaire avancé en JavaScript

Explication détaillée des méthodes spécifiques d'utilisation de require.js modulaire avancé en JavaScript

Exiger un résumé de l'utilisation de .js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!