Tutoriel sur l'outil de modularisation JS RequireJS (2) : Connaissances de base

Précédent :Tutoriel sur l'outil de modularisation JS RequireJS (1) : Premier aperçu de RequireJSNous avons présenté RequireJS de manière très simple. Cet article abordera quelques connaissances de base de RequireJS, notamment l'utilisation de l'API, etc.

API de base

require définit trois variables : define, require, requirejs. Parmi elles, require === requirejs, et il est généralement plus court d'utiliser require.

define : comme son nom l'indique, cette API sert à définir un module.
require : charge les modules dépendants et exécute la fonction callback après le chargement.

a.js de l'article précédent :

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})

Un module est défini via la fonction define, puis utilisé dans la page :

require(["js/a"]);

pour charger le module (Notez que les dépendances dans require sont un tableau. Même s'il n'y a qu'une seule dépendance, vous devez la définir à l'aide d'un tableau.), le deuxième paramètre de l'API require est callback, une fonction utilisée pour gérer la logique après le chargement, comme :

require(["js/a"],function(){
    alert("load finished");
})

Chargement de fichiers

Dans les exemples précédents, les modules chargés étaient tous des fichiers JS locaux. Cependant, dans la plupart des cas, le JS qu'une page web doit charger peut provenir d'un serveur local, d'autres sites web ou d'un CDN, il ne peut donc pas être chargé de cette façon. Prenons l'exemple du chargement d'une bibliothèque jQuery :

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})
require(["jquery","js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Cela impliquerequire.config，require.configsert à configurer l'emplacement de chargement des modules. En termes simples, cela donne à un module un nom plus court et plus facile à retenir. Par exemple, marquez l'adresse de la bibliothèque jQuery de Baidu commejquery, donc lors de l'appel à require, vous n'avez qu'à écrire["jquery"]pour charger ce JS. Nous pouvons configurer les fichiers JS locaux de la même manière :

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

La configuration de paths rend les noms de nos modules plus concis. paths a également une fonctionnalité importante : vous pouvez configurer plusieurs paths. Si la bibliothèque CDN distante ne parvient pas à se charger, une bibliothèque locale peut être chargée, par exemple :

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

Avec cette configuration, si le jQuery de Baidu ne parvient pas à se charger, le jQuery du répertoire js local sera chargé.

Lorsque vous utilisez RequireJS, vous n'avez pas besoin d'écrire.jscomme suffixe. Bien sûr, vous n'êtes pas non plus autorisé à écrire le suffixe.
Dans la fonction de rappel de l'exemple ci-dessus, vous pouvez voir$paramètre. C'est la variable de sortie dujquerymodule dépendant. Si vous dépendez de plusieurs modules, vous pouvez écrire plusieurs paramètres dans l'ordre pour les utiliser :

require(["jquery","underscore"],function($, _){
    $(function(){
        _.each([1,2,3],alert);
    })
})

Si un module ne produit pas de valeur de variable, alors il n'y a pas de paramètre correspondant. Par conséquent, essayez d'écrire d'abord les modules qui produisent une valeur, afin d'éviter la confusion causée par des positions non correspondantes.

Configuration globale

Dans les exemples ci-dessus, la configuration apparaît de manière répétée.require.configSi vous ajoutez la configuration à chaque page, elle paraîtra inévitablement peu élégante. RequireJS fournit une fonctionnalité appelée « main data ». Nous créons d'abord un main.js :

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

Utilisez ensuite la méthode suivante dans la page pour utiliser RequireJS :

<script data-main="js/main" src="js/require.js.html"></script>

Laissez-moi expliquer : la balise script qui charge le script RequireJS a ajouté l'data-mainattribut. Le JS spécifié par cet attribut sera traité après le chargement de require.js. Nous ajoutons l'require.configconfiguration pourdata-main, afin que chaque page puisse utiliser cette configuration. Ensuite, la page peut directement utiliserrequirepour charger tous les noms abrégés de modules.

data-mainIl y a une autre fonctionnalité importante : lorsque la balise script spécifie l'attribut data-main, require utilisera par défaut le JS spécifié par data-main comme chemin racine. Qu'est-ce que cela signifie ? Comme dans ce qui précèdedata-main="js/main"après ce réglage, lorsque nous utilisonsrequire(['jquery'])(sans configurer les chemins de jQuery), require chargera automatiquement le fichier js/jquery.js au lieu de jquery.js, ce qui équivaut à la configuration par défaut :

require.config({
    baseUrl : "js"
})

Modules tiers

Viarequireles modules chargés doivent généralement se conformer à la spécification AMD, c'est-à-dire utiliserdefinepour déclarer des modules. Cependant, il arrive parfois que nous devions charger du JS qui ne suit pas la spécification AMD. Dans ce cas, nous avons besoin d'une autre fonctionnalité : shim. shim est aussi un peu difficile à expliquer. shim se traduit directement par « pad », et il a bien ce sens. Actuellement, je l'utilise principalement à deux endroits.
1. Sortie de module non-AMD : shim transforme les modules non standard AMD en modules utilisables. Par exemple, dans les anciennes versions de jQuery, la spécification AMD n'était pas héritée, donc vous ne pouvez pas directement require["jquery"]. Dans ce cas, shim est nécessaire. Par exemple, si je veux utiliser la bibliothèque Underscore, mais qu'elle n'implémente pas la spécification AMD, nous pouvons la configurer comme ceci :

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

Après cette configuration, nous pouvons référencer le module Underscore dans d'autres modules :

require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

Modules non-AMD sous forme de plugin : nous utilisons souvent des plugins jQuery, et ces plugins ne se conforment généralement pas à la spécification AMD, comme le plugin jquery.form. Dans ce cas, nous devons intégrer le plugin form dans jQuery via shim :

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

Il peut également être abrégé ainsi :

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"]
    }
})

Après cette configuration, nous pouvons utiliser jQuery avec le plugin chargé.

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

Très bien, c'est à peu près toute la configuration de base pour RequireJS. Certaines fonctionnalités étendues seront mentionnées dans des articles ultérieurs.

Source de l'article : https://github.com/liuxey/blog/issues/2