Detaillierte Erläuterung der Schritte zur Einführung von CSS in require.js

Dieses Mal werde ich Ihnen die Schritte zur Einführung von CSS in require.js ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Einführung von CSS in require.js? . Werfen wir einen Blick darauf.

Bei der Verwendung von JavaScript

kann require.js sehr gute Nutzungseffekte erzielen. Dieses Mal konzentriert sich der Artikel auf die Freigabe des Konfigurationspfads require.js und die Einführung von CSS. Betriebserfahrung, ich hoffe, es wird für alle hilfreich sein. Die Frontend-Entwicklung hat sich in den letzten ein bis zwei Jahren sehr schnell entwickelt und JavaScript hat als gängige 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:

Wenn ein Projekt jedoch besonders groß ist, werden viele js-Dateien eingeführt, was unansehnlich und ineffizient aussieht. Wenn es viele und große js-Dateien gibt, kommt es beim Herunterladen der Webseite zu einer Zeitüberschreitung, was zu einer Zeitüberschreitung der Website führt, direkt 500. Also ein magisches

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

Das js-Framework (js-Toolkit) wird angezeigt: 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 viel Laden von js und zu lange Reaktionszeit verursacht wird 2. Verwalten Sie Abhängigkeiten zwischen Modulen, um das Schreiben und die Wartung zu erleichtern.

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

Der erste Schritt besteht darin, die heruntergeladene 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:

Beim Hinzufügen von CSS sollten Sie Modulabhängigkeiten verwenden, also Deps

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 hinzufügen

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

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

Spezifisches css.min.js

Wenn ich jetzt index.html im Browser öffne, stelle ich fest, dass die zusätzlichen Informationen, die wir hinzufügen müssen, nicht hinzugefügt wurden. Ist das der Grund? Okay, denken Sie hier daran, die Methode require in require.js nach unter der Überschrift von index.html aufzurufen, also Add dieser 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
}
);

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

Hinweis

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

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

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

Variablenname

) definieren, der den Namen dieses Moduls angibt, wenn er extern aufgerufen wird; (2) das Deps-Array, das die Abhängigkeiten des Moduls angibt;

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:

So verwenden Sie Babel in WebStorm ES6

JS konvertiert die Liste in eine Baumstruktur

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