Pour la deuxième fois, parlons des connaissances de base de JS require.js modular tool_javascript skills

Article précédent : Outil modulaire JS Nous avons présenté requirejs d'une manière très simple : http://www.jb51.net/article/82527.htm, cet article parlera de requirejs Quelques connaissances de base, y compris comment utiliser l'API, etc.

API de base

require définira trois variables : définir, exiger, requirejs, où require === requirejs, généralement l'utilisation de require est plus courte

define Comme vous pouvez le voir d'après le nom, cette API est utilisée pour définir un module
exiger Charger les modules dépendants et exécuter la fonction de rappel après le chargement
a.js dans l'article précédent :

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

Définissez un module via la fonction de définition, puis utilisez-le dans la page :

require(["js/a"]);
Pour charger le module (notez que la dépendance dans require est un tableau, même s'il n'y a qu'une seule dépendance, vous devez utiliser un tableau pour la définir. Le deuxième paramètre de l'API require est le callback, une fonction qui sert à gérer). la logique après le chargement, comme :

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

Charger le fichier

Dans les exemples précédents, les modules chargés étaient tous des js locaux, mais dans la plupart des cas, le JS qui doit être chargé par la page Web peut provenir du serveur local, d'autres sites Web ou du CDN, il ne peut donc pas être chargé dans ce façon. Nous pouvons charger une bibliothèque jquery à titre d'exemple :

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

Cela implique require.config. require.config est utilisé pour configurer l'emplacement de chargement du module, pour faire simple, il s'agit de donner au module un nom plus court et plus facile à retenir. Par exemple, marquez l'adresse de la bibliothèque jquery de Baidu comme jquery. , donc en cas de demande, il vous suffit d'écrire ["jquery"] pour charger le js. Nous pouvons également configurer les js locaux comme ceci :

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 des chemins rendra nos noms de modules plus raffinés. Les chemins ont également une fonction importante, qui consiste à configurer plusieurs chemins. Si la bibliothèque cdn distante ne se charge pas correctement, vous pouvez charger la bibliothèque locale, telle que :

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

Après cette configuration, lorsque le jquery de Baidu n'est pas chargé avec succès, jquery dans le répertoire js local sera chargé

Lorsque vous utilisez requirejs, vous n'avez pas besoin d'écrire le suffixe .js lors du chargement du module, et bien sûr vous ne pouvez pas écrire le suffixe
Le paramètre $ se trouve dans la fonction de rappel dans l'exemple ci-dessus. Il s'agit de la variable de sortie du module jquery dépendant. Si vous dépendez de plusieurs modules, vous pouvez écrire plusieurs paramètres dans l'ordre à utiliser :

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

Si un module ne génère pas de valeurs variables, alors il n'y en a pas, alors essayez d'écrire le module de sortie devant pour éviter les malentendus causés par des positions mal placées

Configuration globale

La configuration require.config apparaît à plusieurs reprises dans l'exemple ci-dessus. 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". 🎜>

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

Pour expliquer, la balise de script qui charge le script requirejs ajoute l'attribut data-main. Le js spécifié par cet attribut sera traité après le chargement de reuqire.js. Après avoir ajouté la configuration require.config à data-main, nous pouvons créer. chacune Toutes les pages utilisent cette configuration, puis require peut être utilisé directement dans la page pour charger tous les noms de modules courts

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

Modules tiers

. 1. Sortie de module non AMD, « intégrez » les modules AMD non standard dans les modules disponibles. Par exemple : dans l'ancienne version de jquery, il n'hérite pas de la spécification AMD, vous ne pouvez donc pas directement exiger ["jquery"]. cette fois, une cale est requise. Par exemple, si j'utilise la bibliothèque de classes de soulignement, mais qu'elle n'implémente pas la spécification AMD, alors nous pouvons la configurer comme ceci

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

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

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

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