Cette fois, je vous apporte une explication détaillée de Require.js avec des images et du texte, et quelles sont les précautions lors de l'utilisation de Require.js. Voici des cas pratiques, prenons. un regard.
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 perdra de réponse. Deuxièmement, comme il existe des dépendances entre les fichiers js, cela doit être strictement le cas. Ordre de chargement assuré, lorsque les dépendances sont complexes, l'écriture et la maintenance du code deviendront difficiles.
require.js est de résoudre ces deux problèmes :
1. Implémentez le chargement asynchrone des fichiers js pour éviter que les pages Web ne répondent ;
2. Gérez les dépendances entre les modules pour faciliter l'écriture et la maintenance du code.
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>
Le chargement de ce fichier peut empêcher la page Web de répondre. Vous pouvez le mettre en bas de la page pour le 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 peut être écrit comme suit :
<script src="js/require.js" data-main="js/main"></script> .js后缀可以省略
3. Comment rédiger le module principal
Si le module principal dépend dejQuery vous pouvez écrire comme ceci
require(['jquery'], function ($){ alert($); });
4. Méthode require.config()
require.config({ paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });
require.config({ paths: { "jquery": "lib/jquery.min", "underscore": "lib/underscore.min", "backbone": "lib/backbone.min" } });
require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscor: "underscore.min", "backbone": "backbone.min" } });
require.config({ paths: { "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" } });
5. Comment écrire le module AMD
Les modules chargés par require.js adoptent les spécifications AMD. En d'autres termes, le module doit être écrit conformément aux réglementations AMD. Plus précisément, les modules doivent être définis à 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 }; });
// main.js require(['math'], function (math){ alert(math.add(1,1)); });
define(['myLib'], function(myLib){ function foo(){ myLib.doSomething(); } return { //返回模块中的函数 foo : foo }; });
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()) })
// 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'); });
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!