Résumé de l'utilisation de Require.js-js tutoriel-php.cn

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

一个新手

Libérer： 2017-10-26 09:48:27

original

1715 Les gens l'ont consulté

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 :

　implémenter js Chargement asynchrone de fichiers pour éviter la perte de réponse des pages Web ;
　 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>

Copier après la connexion

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>

Copier après la connexion

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后缀可以省略

Copier après la connexion

3. Comment écrire le module principal

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

 require([&#39;jquery&#39;], function ($){
　　　alert($);
});

Copier après la connexion

4. Méthode require.config()

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

La méthode de chargement est la suivante :

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

Copier après la connexion

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([&#39;myLib&#39;], function(myLib){
　　function foo(){
　　　　myLib.doSomething();
　　}
　　return {     //返回模块中的函数
　　　　foo : foo
　　};
});

Copier après la connexion

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

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

 //  app.js
 function sayHello(name){
 　alert(&#39;Hi &#39;+name);
}

Copier après la connexion

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

require([&#39;app&#39;], function(sayHello) {
    alert(sayHello())  
})

Copier après la connexion

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

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

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

Copier après la connexion

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

　　require([&#39;app&#39;], function(a) {
　　　　a.sayHi(&#39;zhangsan&#39;);
　　　　a.sayHello(&#39;lisi&#39;);
　　});

Copier après la connexion

shim的有序导入

   require.config({  

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

Copier après la connexion

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!