


Detaillierte Erläuterung der Pfadkonfiguration von require.js und der Einführungsmethode von CSS
Sep 07, 2017 am 10:20 AMDieser 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.
Der erste Schritt besteht darin, die heruntergeladenen require.js in index.html einzuführen
Ö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'] } } });
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 == "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 = '@import "' + url + '";'; 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' >require['color']</script>//标识调用配置中的color模块
Beachten Sie, dass die in
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!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript

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

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

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

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

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems

So verwenden Sie insertBefore in Javascript

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
