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

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

WBOY

Libérer： 2016-05-16 15:05:12

original

1448 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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

data-main a également une fonction importante. Lorsque la balise de script spécifie l'attribut data-main, require utilisera par défaut le js spécifié par data-main comme chemin racine. Par exemple, une fois que data-main="js/main" est défini ci-dessus, après avoir utilisé require(['jquery']) (sans configurer les chemins jquery), require chargera automatiquement le fichier js/jquery.js au lieu de jquery. js, équivalent à la configuration par défaut :

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

Copier après la connexion

Modules tiers

Les modules chargés via require doivent généralement être conformes aux spécifications AMD, c'est-à-dire utiliser set pour déclarer le module. Cependant, parfois, des js non standard AMD doivent être chargés à ce stade, une autre fonction est nécessaire : shim et. shim est également difficile à expliquer. Comprenez, shim est directement traduit par "pad", ce qui a en fait cette signification. Actuellement, je l'utilise principalement à deux endroits

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

Copier après la connexion

Après avoir configuré de cette façon, nous pouvons référencer le module de soulignement dans d'autres modules :

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

Copier après la connexion

Pour les modules non AMD sous forme de plug-ins, nous utilisons souvent des plug-ins jquery, et ces plug-ins ne sont fondamentalement pas conformes aux spécifications AMD, comme le plug-in jquery.form pour le moment. , vous devez "remplir" le plug-in de formulaire dans jquery : <🎜 >

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

Copier après la connexion

peut également être abrégé comme :

这样配置之后我们就可以使用加载插件后的jquery了

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

Copier après la connexion

好了，requirejs的基本配置大致就是这么多，还有一些扩展的功能会在之后的篇幅中提到，大家不要错过呀！