Partage d'exemples de méthodes d'utilisation spécifiques de javascript Advanced Modular require.js-js tutoriel-php.cn

Partage d'exemples de méthodes d'utilisation spécifiques de javascript Advanced Modular require.js

小云云

Libérer： 2018-01-02 09:08:05

original

1630 Les gens l'ont consulté

Cet article présente principalement l'utilisation spécifique de JavaScript Advanced Modular require.js. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Require.js :

RequireJS est un très petit framework de chargement de module javascript, qui est le meilleur des spécifications AMD (Asynchronous Module Definition, mécanisme de chargement de module asynchrone). des réalisations. La dernière version de requireJS n'est compressée qu'en 14 Ko, ce qui est très léger. Il peut également fonctionner en coordination avec d'autres frameworks. L'utilisation de requireJS améliorera certainement la qualité de notre code front-end.

Tout d'abord, jetons un coup d'œil au chargement normal d'une page js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/index02.js" ></script>
  </head>
  <body>
    <h1>this is a page.</h1>
  </body>
</html>

Copier après la connexion

Résultats en cours d'exécution :

À ce stade, si nous n'utilisons pas la boîte pop-up, la page ne se chargera pas et il n'y aura pas de contenu de page. Ce n'est pas le résultat que nous souhaitons obtenir.

Ci-dessous, nous utilisons require.js pour fonctionner :

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/require2.1.11.js"></script>
    <script type="text/javascript">
      require(["js/index","js/index01"],function(){
        console.log("当js加载成功后会执行的函数");
      },function(){
        console.log("当js加载失败后会执行的函数");
      });
    </script>
  </head>
  <body>
  </body>
</html>

Copier après la connexion

index.js

define(function(){
  console.log("this is a test!");
  function test(){
    console.log("haha,i am a test!");
  }
  test();
});

Copier après la connexion

Tout d'abord, test02.js n'est plus importé sur la page, seul requireJS est importé. Deuxièmement, en javascript, nous utilisons la méthode require() et passons. un paramètre de tableau dedans, le paramètre réel est le [chemin + nom du fichier js que nous voulons importer.

Les résultats en cours à cette heure :

Vous peut voir, le contenu de la page a été affiché. Au lieu d'attendre que la page se charge une fois le js terminé, comme nous le faisions auparavant, le code js n'est exécuté qu'après le chargement de la page, ce qui améliore considérablement l'efficacité opérationnelle.

D'après le code ci-dessus, nous pouvons analyser l'API de base de requirejs :

requireJS définira trois variables : définir, require, requirejs

require==requirejs, généralement l'utilisation de require est plus courte.
define est utilisé pour définir un module
require pour charger les modules dépendants (référençant les modules définis) et exécuter la fonction de rappel après le chargement

require a trois paramètres :

require(["js/index","js/index01"],function(){
        console.log("当js加载成功后会执行的函数");
      },function(){
        console.log("当js加载失败后会执行的函数");
      });
//第一个参数：定义require中的依赖，参数必须是数组形式，即使只有一个依赖，也必须使用数组形式传参。
//第二个参数：是一个回调函数，用来处理加载完毕后的逻辑，当所有模块加载完成后触发
//第三个参数：也是一个回调函数，用来处理模块加载失败后的情况。如上面代码，js中没有定义index01.js这个文件，所以出调用这个回调函数。

Copier après la connexion

Charger les fichiers réseau

Avant , nous avons chargé des fichiers js locaux, mais parfois nous devons charger des fichiers sur Internet, alors comment devons-nous les charger ? Présentons comment charger des fichiers js sur Internet

Prenons le chargement d'un fichier jquery.js comme exemple :

//百度cdn公共库jQuery地址：   http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址：      https://code.jquery.com/jquery-3.1.1.js
//注意：网络上去取时不能加后缀，否则取不到
require.config({
  paths : {
    //为网络上的库去一个名字：jquery
    "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

Copier après la connexion

Lors de la récupération de fichiers. sur le réseau, veuillez noter :

1. Le paramètre de la méthode config est un objet
2 La valeur des chemins est également un objet
3. , N'importe lequel, mais il est recommandé de choisir un nom significatif. Les autres peuvent savoir quelle est votre ressource réseau grâce au nom
4. La valeur de la bibliothèque est un tableau, ce qui signifie que plusieurs écritures peuvent être écrites en même temps. empêcher l'accès aux anomalies du réseau
5. Attention particulière : Le chemin de la ressource réseau ne peut pas avoir de nom de suffixe, sinon il ne sera pas disponible
6. Nous pouvons également aller sur le réseau pour l'obtenir en premier s'il ne le peut pas. être obtenu, puis l'obtenir localement pour réduire la pression sur les services locaux (appartient à l'optimisation du projet).

require.config({
  paths : {
    //这样配置，减轻本地服务器的压力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

Copier après la connexion

De même, nous pouvons également configurer la configuration locale en chemins :

require.config({
  paths : {
    //这样配置，减轻本地服务器的压力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //将本地的js文件同样配置，之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

//
require(["jquery","test01","test02"],function(){
  alert("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

Copier après la connexion

Ci-dessus Le require. config configuration apparaît à plusieurs reprises dans l'exemple. Si la configuration est ajoutée à chaque page, elle aura certainement l'air très inélégante. requirejs fournit une fonction appelée "master data". Nous créons d'abord un main.js :

<🎜. >

require.config({
  paths : {
    //这样配置，减轻本地服务器的压力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //将本地的js文件同样配置，之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

Copier après la connexion

Utilisez ensuite la méthode suivante pour utiliser requirejs sur la page :

<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">

  require(["jquery","t1","t2"],function(){
    alert("页面加载成功~~");
  },function(){
    alert("页面加载失败~~")
  });

</script>

Copier après la connexion

La méthode officielle est fournie Méthode basée sur les attributs des balises :

<script data-main="js/main" src="js/require2.1.11.js" ></script>

Copier après la connexion

Placez toute la configuration et les js importés dans main.js, afin qu'il n'y ait qu'une seule balise comme celle-ci sur la page.

La démonstration du code est la suivante :

//test01.js--定义一个js模块
define(function(){
  function test(){
    console.log("this is test01.js");
  }
  test();

  $("p").css("color","#DB7093");
});

Copier après la connexion

//main.js--requirejs的全局配置
require.config({
  paths:{
    "jquery":["jquery-1.8.3"],
    "test":["test01"]
  },
  shim:{
    "test":["jquery"]
  }
});
require(["test"],function(){
  console.log("success!");
});

Copier après la connexion

//index.html--此时，引入js文件只需一行代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" ></script>
  </head>
  <body>
    <p>i am liyanan and this is a testn Page.</p>
  </body>
</html>

Copier après la connexion

Recommandations associées :

Introduction détaillée à l'utilisation de require.js

Explication détaillée de la configuration du chemin de require. js et l'introduction du css

Comment utiliser require.js ? Rendre le chargement de JS plus rapide

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!