Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Pfadkonfiguration von require.js und der Einführungsmethode von CSS

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

Sep 07, 2017 am 10:20 AM
javascript

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>
Nach dem Login kopieren

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

});
Nach dem Login kopieren
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 <script type="javascript/text" src="config.js"></script> unter der Überschrift von index.html aufzurufen, also Add diesen Satz

define(
  function () {
  if (typeof window == &quot;undefined&quot;)return {
    load: function (n, r, load) {
      load()
    }
  };
  var head = document.getElementsByTagName(&quot;head&quot;)[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]) &lt; 6 || parseInt(engine[7]) &lt;= 9; else if (engine[2])useOnload = false; else if (engine[4])useImportLoad = parseInt(engine[4]) &lt; 18;
  var cssAPI = {};
  cssAPI.pluginBuilder = &quot;./css-builder&quot;;
  var curStyle;
  var createStyle = function () {
    curStyle = document.createElement(&quot;style&quot;);
    head.appendChild(curStyle)
  };
  var importLoad = function (url, callback) {
    createStyle();
    var curSheet = curStyle.styleSheet || curStyle.sheet;
    if (curSheet &amp;&amp; curSheet.addImport) {
      curSheet.addImport(url);
      curStyle.onload = callback
    } else {
      curStyle.textContent = &#39;@import &quot;&#39; + url + &#39;&quot;;&#39;;
      var loadInterval = setInterval(function () {
        try {
          curStyle.sheet.cssRules;
          clearInterval(loadInterval);
          callback()
        } catch (e) {
        }
      }, 10)
    }
  };
  var linkLoad = function (url, callback) {
    var link = document.createElement(&quot;link&quot;);
    link.type = &quot;text/css&quot;;
    link.rel = &quot;stylesheet&quot;;
    if (useOnload)link.onload = function () {
      link.onload = function () {
      };
      setTimeout(callback, 7)
    }; else var loadInterval = setInterval(function () {
      for (var i = 0; i &lt; 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) == &quot;.css&quot;)name = name.substr(0, name.length - 4);
    return normalize(name)
  };
  cssAPI.load = function (cssId, req, load, config) {
    (useImportLoad ? importLoad : linkLoad)(req.toUrl(cssId + &quot;.css&quot;), load)
  };
  return cssAPI
}
);
Nach dem Login kopieren


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

&lt;script type=&quot;javascript/text&#39; &gt;require[&#39;color&#39;]&lt;/script&gt;//标识调用配置中的color模块
Nach dem Login kopieren
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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems

So verwenden Sie insertBefore in Javascript So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

So verwenden Sie insertBefore in Javascript

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript

See all articles