Explication détaillée des étapes d'introduction du CSS dans require.js

Cette fois, je vais vous apporter une explication détaillée des étapes à suivre lors de l'introduction du CSS dans require.js. Quelles sont les précautions pour introduire le CSS dans require.js. cas pratique. Jetons un coup d’oeil.

Dans l'utilisation de

JavaScript, require.js peut fournir de très bons effets d'utilisation. Cette fois, l'article se concentrera sur le partage du chemin de configuration require.js et l'introduction de. css. Expérience opérationnelle, j’espère que cela sera utile à tout le monde.

Le développement front-end s'est développé très rapidement au cours des deux dernières années, et JavaScript, en tant que langage de développement courant, a acquis une popularité sans précédent. Un grand nombre de frameworks front-end ont vu le jour. Ces frameworks tentent de résoudre certains problèmes courants du développement front-end, mais les implémentations sont différentes. Habituellement, les fichiers js à chargement frontal général ressemblent à ceci :

<script type="text/javascript" src="js/js1.js"></script>
<script type="text/javascript" src="js/js2.js"></script>
<script type="text/javascript" src="js/js3.js"></script>
<script type="text/javascript" src="js/js4.js"></script>

Mais lorsqu'un projet est particulièrement volumineux, de nombreux fichiers js sont introduits, ce qui semble inesthétique et inefficace. Lorsqu'il y a de nombreux et volumineux fichiers js, le téléchargement de la page Web expirera, ce qui entraînera un délai d'attente de la réponse du site Web, directement 500, Donc un moment magique

Le framework js (js toolkit) apparaît : require.js.

require.js résout principalement deux problèmes :

1. Implémentez le chargement asynchrone de js pour éviter l'expiration du délai d'attente du site Web causé par un chargement trop important de js et un temps de réponse trop long

. 2. Gérer les dépendances entre les modules pour faciliter l'écriture et la maintenance.

Bon, passons au sujet principal aujourd'hui. Écrivons un cas d'utilisation de require.js pour votre référence :

La première étape consiste à introduire le require.js

téléchargé dans index.html Ensuite on crée un nouveau config.js pour écrire la configuration correspondante :

Ouvrez ensuite config.js et écrivez le code suivant :

require.config({
  baseUrl:'/data/points/',//配置基目录
  urlArgs:'v='+(new Date()).getTime(),//清楚缓存
  paths:{
    'css': 'libs/js/css.min',
    'jquery': 'libs/js/jquery-1.11.1.min',
    'vur': 'libs/js/vue.min',
    'amazeui': 'libs/js/amazeui.min',
    'color': 'libs/js/color.min'
  },
  shim:{
    'amazeui':{
      deps: ['jquery','css!libs/css/amazeui.min','css!style/common','css!style/footer'],
    },
    'color':{
      deps:['css!libs/css/color.min']
    }
  }
});

Lors de l'ajout de CSS, vous devez utiliser les dépendances du module, c'est-à-dire deps

deps:['css!libs/css/color.min'] Ici, les fichiers sous le nom du module css (libs/js/css.min.js) seront ajoutés en premier, suivis d'un "!" Répertoire de base. Ajouter à libs/css/color.min.css

Parmi eux, css.min.js est un module js dépendant, qui contient une méthode de chargement des fichiers CSS,

CSS.min.js spécifique

define(
  function () {
  if (typeof window == "undefined")return {
    load: function (n, r, load) {
      load()
    }
  };
  var head = document.getElementsByTagName("head")[0];
  var engine = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)/) || 0;
  var useImportLoad = false;
  var useOnload = true;
  if (engine[1] || engine[7])useImportLoad = parseInt(engine[1]) < 6 || parseInt(engine[7]) <= 9; else if (engine[2])useOnload = false; else if (engine[4])useImportLoad = parseInt(engine[4]) < 18;
  var cssAPI = {};
  cssAPI.pluginBuilder = "./css-builder";
  var curStyle;
  var createStyle = function () {
    curStyle = document.createElement("style");
    head.appendChild(curStyle)
  };
  var importLoad = function (url, callback) {
    createStyle();
    var curSheet = curStyle.styleSheet || curStyle.sheet;
    if (curSheet && curSheet.addImport) {
      curSheet.addImport(url);
      curStyle.onload = callback
    } else {
      curStyle.textContent = &#39;@import "&#39; + url + &#39;";&#39;;
      var loadInterval = setInterval(function () {
        try {
          curStyle.sheet.cssRules;
          clearInterval(loadInterval);
          callback()
        } catch (e) {
        }
      }, 10)
    }
  };
  var linkLoad = function (url, callback) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    if (useOnload)link.onload = function () {
      link.onload = function () {
      };
      setTimeout(callback, 7)
    }; else var loadInterval = setInterval(function () {
      for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if (sheet.href == link.href) {
          clearInterval(loadInterval);
          return callback()
        }
      }
    }, 10);
    link.href = url;
    head.appendChild(link)
  };
  cssAPI.normalize = function (name, normalize) {
    if (name.substr(name.length - 4, 4) == ".css")name = name.substr(0, name.length - 4);
    return normalize(name)
  };
  cssAPI.load = function (cssId, req, load, config) {
    (useImportLoad ? importLoad : linkLoad)(req.toUrl(cssId + ".css"), load)
  };
  return cssAPI
}
);

Maintenant, lorsque j'ouvre index.html dans le navigateur, je constate que les informations supplémentaires que nous devons ajouter n'ont pas été ajoutées. D'accord, ici, n'oubliez pas d'appeler la méthode require dans require.js après sous l'en-tête de index.html, c'est-à-dire Add cette phrase

<script type="javascript/text&#39; >require['color']</script>//标识调用配置中的color模块

Visitez à nouveau index.html et ce que nous voulons apparaît parfaitement.

Remarque

L'ordre introduit dans index.html ne peut être perturbé

<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">require(['color']);</script>

require.config() accepte un objet de configuration En plus de l'attribut paths mentionné précédemment, cet objet possède également un attribut shim, qui est spécialement utilisé pour configurer des modules incompatibles. Plus précisément, chaque module doit définir (1) la valeur d'exportation (sortie

nom de la variable ), indiquant le nom de ce module lorsqu'il est appelé en externe ; (2) le tableau deps, indiquant les dépendances du module.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Babel dans WebStorm ES6

JS convertit la liste en une arborescence

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!