Explication détaillée de la configuration du chemin de require.js et de la méthode d'introduction du CSS

Cet article présente principalement l'utilisation détaillée du chemin de configuration require.js et l'introduction du CSS. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer au

Développement front-end au cours des deux dernières années. se développe très rapidement et JavaScript, en tant que langage de développement grand public, 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 de chargement frontal généraux 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 seront introduits, ce qui semble inesthétique. et ce n'est pas efficace Lorsqu'il y a de nombreux et gros fichiers js, le téléchargement de la page Web expirera, provoquant l'expiration de la réponse du site Web, directement 500, donc un cadre

js magique ( js) est apparu : require.js.

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

1. Implémentez le chargement asynchrone de js pour éviter le délai d'attente du site Web causé par un trop grand nombre de temps de réponse de chargement de js

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

D'accord, allons droit au but aujourd'hui. Écrivons un cas d'utilisation de require.js pour votre référence :

Supposons que notre projet ait un répertoire de ressources comme celui-ci :

La première étape consiste à introduire le require.js téléchargé dans index.html

Ensuite, nous créons un nouveau config.js pour écrire la configuration correspondante :

Ensuite, ouvrez 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']
    }
  }

});

Ajoutez les dépendances du module CSS qui doivent être utilisées, 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 "!" suivi de la base. Ajouté au répertoire libs/css/color.min.css

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

css spécifiques. .min.js

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, tout va bien. Lorsque j'ouvre index.html dans le navigateur, je constate que les éléments supplémentaires que nous devons ajouter ne sont pas ajoutés. Quelle est la raison de cela ? 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[&#39;color&#39;]</script>//标识调用配置中的color模块

et visitez à nouveau index.html, et ce que nous voulons apparaîtra parfaitement.

Comme indiqué :

Notez que l'ordre introduit dans

index.html ne peut pas être perturbé

<script type="text/javascript" src="config.js"></script>
  
<script type="text/javascript" src="require.js"></script>
  
<script type="text/javascript">require([&#39;color&#39;]);</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 exports (nom de la variable de sortie), qui indique le nom du module lorsqu'il est appelé en externe ; (2) le tableau deps, qui indique les dépendances du module ;

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!