Detaillierte Erläuterung der Pfadkonfiguration von require.js und der Einführungsmethode von CSS

Dieser Artikel stellt hauptsächlich die detaillierte Verwendung des Konfigurationspfads von require.js und die Einführung von CSS vor. Es hat einen bestimmten Referenzwert.

Die Front-End-Entwicklung der letzten ein oder zwei Jahre entwickelt sich sehr schnell und JavaScript hat als Mainstream-Entwicklungssprache eine beispiellose Popularität erlangt. Es ist eine große Anzahl von Front-End-Frameworks entstanden, die versuchen, einige häufige Probleme in der Front-End-Entwicklung zu lösen, aber die Implementierungen sind unterschiedlich. Normalerweise lauten die allgemeinen Front-End-Lade-JS-Dateien wie folgt:

<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>

Wenn ein Projekt jedoch besonders groß ist, werden viele JS-Dateien eingeführt sieht unansehnlich aus und ist nicht effizient. Wenn es viele und große JS-Dateien gibt, kommt es zu einer Zeitüberschreitung der Website-Antwort, also direkt 500, also ein magisches

js-Framework ( js Toolkit) erschien: require.js.

require.js löst hauptsächlich zwei Probleme:

1. Implementieren Sie das asynchrone Laden von js, um eine Zeitüberschreitung der Website zu vermeiden, die durch zu viele Reaktionszeiten beim Laden von js verursacht wird . Abhängigkeiten zwischen Modulen verwalten, um das Schreiben und die Wartung zu erleichtern.

Okay, kommen wir heute zum Punkt. Schreiben wir einen Fall der Verwendung von require.js als Referenz:

Angenommen, unser Projekt hat ein Ressourcenverzeichnis wie dieses:

Der erste Schritt besteht darin, die heruntergeladenen require.js in index.html einzuführen

Dann erstellen wir eine neue config.js, um die entsprechende Konfiguration zu schreiben:

Öffnen Sie dann config.js und schreiben Sie den folgenden Code:

CSS-Modulabhängigkeiten hinzufügen, die verwendet werden sollen, also deps

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']
    }
  }

});

deps: ['css!libs/css/color.min'] Hier wird zuerst die Datei unter dem CSS-Modulnamen hinzugefügt (libs/js/css.min.js), gefolgt von einem „!“ im Basisverzeichnis zu libs/css/color.min.css

Unter diesen ist css.min.js ein abhängiges Modul js, das eine Methode zum Laden von CSS-Dateien enthält,

spezifische CSS .min. js

Jetzt ist es in Ordnung. Wenn ich index.html im Browser öffne, stelle ich fest, dass die zusätzlichen Dinge, die wir hinzufügen müssen, nicht hinzugefügt werden dafür? ? Okay, denken Sie hier daran, die Methode require in require.js nach 075647b300f249e7c20cf07c8da1b16e2cacc6d41bbb37262a98f745aa00fbf0 unter der Überschrift von index.html aufzurufen, also Add diesen Satz

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

und besuchen Sie index.html erneut, und das, was wir wollen, wird perfekt angezeigt.

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

Wie gezeigt:

Beachten Sie, dass die in

index.html eingeführte Reihenfolge nicht gestört werden kann

require.config() akzeptiert ein Konfigurationsobjekt. Zusätzlich zum zuvor erwähnten Pfadattribut verfügt dieses Objekt auch über ein Shim-Attribut, das speziell zum Konfigurieren inkompatibler Module verwendet wird. Insbesondere muss jedes Modul (1) den Exportwert (Name der Ausgabevariable) definieren, der den Namen des Moduls angibt, wenn es extern aufgerufen wird; (2) das Deps-Array, das die Abhängigkeiten des Moduls angibt;

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Pfadkonfiguration von require.js und der Einführungsmethode von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!