Résumé de l'utilisation de Require.js

1. Pourquoi utiliser require.js

Tout d'abord, si une page charge plusieurs fichiers js, le Le navigateur cessera de restituer la page Web. Plus il y a de fichiers chargés, plus la page Web perdra de réponse. 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, le code Il. deviendra difficile à écrire et à maintenir.

require.js est de résoudre ces deux problèmes :

1. 　implémenter js Chargement asynchrone de fichiers pour éviter la perte de réponse des pages Web ;

2. 　 gère les dépendances entre les modules pour faciliter l'écriture et la maintenance du code.

2. Chargement de require.js

Chapitre. Première étape, rendez-vous sur le site officiel pour télécharger la dernière version et mettez-la directement sur la page à charger

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

Le chargement de ce fichier peut faire perdre la réponse à la page Web, vous pouvez la mettre en bas de la page pour la charger, ou vous pouvez l'écrire comme ceci

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

L'attribut async indique que ce fichier doit être chargé de manière asynchrone pour éviter que la page Web ne réponde. 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, qui peut être appelée le module principal si le fichier s'appelle main.js, il s'écrira comme suit Voilà :

<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 require.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. Le chemin par défaut est le même répertoire que main. .js (sous-répertoire js). Si ces modules se trouvent dans d'autres répertoires, comme le répertoire js/lib, il existe deux manières de les écrire.

• La première consiste à préciser 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ébergeur, vous pouvez également préciser directement son URL, par exemple

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

5. Comment écrire le module AMD

modules requis. chargé par 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 définie () 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 des le paramètre de la fonction definition() doit être un tableau indiquant les dépendances du module.

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

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!