Maison > interface Web > js tutoriel > le corps du texte

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

巴扎黑
Libérer: 2017-09-07 10:20:16
original
1750 Les gens l'ont consulté

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>
Copier après la connexion

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:&#39;/data/points/&#39;,//配置基目录
  urlArgs:&#39;v=&#39;+(new Date()).getTime(),//清楚缓存
  paths:{
    &#39;css&#39;: &#39;libs/js/css.min&#39;,
    &#39;jquery&#39;: &#39;libs/js/jquery-1.11.1.min&#39;,
    &#39;vur&#39;: &#39;libs/js/vue.min&#39;,
    &#39;amazeui&#39;: &#39;libs/js/amazeui.min&#39;,
    &#39;color&#39;: &#39;libs/js/color.min&#39;
  },
  shim:{
    &#39;amazeui&#39;:{
      deps: [&#39;jquery&#39;,&#39;css!libs/css/amazeui.min&#39;,&#39;css!style/common&#39;,&#39;css!style/footer&#39;],
    },
    &#39;color&#39;:{
      deps:[&#39;css!libs/css/color.min&#39;]
    }
  }

});
Copier après la connexion

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
}
);
Copier après la connexion

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模块
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!