recherche

Maison >interface Web >js tutoriel >guide d'utilisation requireJS_others

guide d'utilisation requireJS_others

WBOY
WBOYoriginal
2016-05-16 15:03:361352parcourir

La plupart des projets utilisent le développement modulaire. requireJS est un modèle de développement de modules AMD, il est donc nécessaire de l'apprendre. En utilisant requireJS pour écrire des démos étape par étape, vous pouvez découvrir le processus de développement global de requireJS et certains de vos propres sentiments concernant l'utilisation de requireJS.

AMD : un mécanisme basé sur un module pour charger du code JavaScript de manière asynchrone. Il recommande aux développeurs d'encapsuler le code JavaScript dans des modules. La dépendance envers les objets globaux devient une dépendance envers d'autres modules. Résolvez les dépendances de modules individuels grâce à un chargement paresseux et à la demande. Les avantages du code JavaScript modularisé sont évidents. Le couplage lâche de chaque composant fonctionnel peut grandement améliorer la réutilisabilité et la maintenabilité du code. Ce chargement non bloquant, simultané et rapide du code JavaScript permet à d'autres éléments d'interface utilisateur de la page Web qui ne dépendent pas du code JavaScript, tels que les images, CSS et autres nœuds DOM, d'être chargés en premier. La page Web se charge plus rapidement et les utilisateurs obtiennent. meilleurs résultats. Bonne expérience.

1. Téléchargez requireJS

Avant le développement modulaire avec requireJS, nous devons préparer certaines choses. Ensuite, vous devez télécharger le fichier require.js, hahaha, car il est développé sur cette base.

2. Créez un fichier HTML

Après avoir créé un fichier HTML, vous devez utiliser la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a lors de l'importation de requireJS. Cela ne fait aucun doute. Ensuite, il y a un attribut data-main dans cette balise, qui fonctionne comme une entrée et une sortie, c'est-à-dire qu'après le chargement de requireJS, entrez à partir de l'attribut data-main.

Par exemple : 

 <!DOCTYPE html>
  <head>
    <title>require</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
    <!--这是requireJS，data-main是作为入口模块，在这里就是js/main-->
    <script data-main="js/main" src="js/require.js"></script>
  </body>
</html>

Lorsque je charge js/require.js, j'exécute le fichier js de js/main. main est également un fichier js. Nous pouvons omettre son suffixe .js et requireJS l'ajoutera.

3. données principales

Lorsque le programme exécute e4e68973213230bde45ab37f3eb5d0cc2cacc6d41bbb37262a98f745aa00fbf0, entrez main.js via data-main et exécutez main.js . Alors, qu’y a-t-il dans main.js ?

Veuillez consulter le code : 

/*
  require.config执行baseUrl为'js'，
  baseUrl指的模块文件的根目录，可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require，来引入monkey.js，
  然后通过后面的匿名函数给他们分配参数，如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

À partir du code ci-dessus, vous pouvez voir que main.js contient deux modules : require.config et require.

La fonction de require.config est de configurer certains paramètres de requireJS puis de les référencer publiquement.

Par exemple, la baseUrl ci-dessus, sa fonction est de l'utiliser comme chemin de base et de rechercher des fichiers sous ce chemin. J'ai mis tous les fichiers .js dans le dossier js. Par conséquent, après avoir configuré cet attribut, les futurs fichiers rechercheront du contenu sous le chemin js.

Comme suit : 

require(['monkey'], function(monkey){
  monkey.init();
});

Quand il fait référence à singe, il fait référence à singe, pas à js/monkey.

Quel est le rôle des chemins ? Remplacez simplement certains fichiers js couramment utilisés par des noms communs. Par exemple, jquery-1.8.2.min.js, nous ne pouvons pas écrire ceci à chaque fois que nous l'appelons, donc pour plus de commodité, nous remplacerons jquery-1.8.2.min.js par jquery. Vous pouvez désormais l'utiliser. jquery directement, ce qui est rapide et pratique.

D'accord, require.config semble familier. En un mot, sa fonction est de configurer requireJS.

Qu'en est-il de l'exigence ?

La fonction de require est l'exécution. Par exemple, ici, j'ai seulement besoin de Monkey.js pour s'exécuter, j'ai donc importé Monkey, puis utilisé le paramètre mk pour obtenir la valeur de retour après l'exécution de Monkey. S'il existe une valeur de retour, nous pouvons alors gérer mk en conséquence.

Hé, qu'est-ce qu'il y a dans le singe ?

Voyons : 

/*
  define的参数为匿名函数，该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});

définir ! Sa fonction est de définir un module js destiné à être utilisé par d'autres modules ou requis. La méthode de référencement d'autres modules js est similaire à require. Elle importe les fichiers js requis, puis les paramètres correspondent un à un. Ce à quoi tout le monde doit faire attention, c'est que les méthodes ou variables définies dans définir ne sont pas accessibles par d'autres modules. Par conséquent, si vous souhaitez que d'autres modules aient accès, jetez simplement la méthode correspondante (retour) sur l'objet ou la fonction. Ici, ce que je renvoie est un objet qui fournit un init aux autres modules à appeler.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le composant JS Bootstrap implémente les compétences code_javascript de l'effet de boîte contextuelleArticle suivant：Le composant JS Bootstrap implémente les compétences code_javascript de l'effet de boîte contextuelle

Articles Liés

Voir plus