suchen
HeimWeb-Frontendjs-TutorialrequireJS-Nutzungsanleitung_others

Die meisten Projekte nutzen die modulare Entwicklung. requireJS ist ein Modell der AMD-Modulentwicklung, daher ist es notwendig, es zu erlernen. Indem Sie requireJS verwenden, um Schritt für Schritt Demos zu schreiben, können Sie den gesamten Entwicklungsprozess von requireJS und einige Ihrer eigenen Gefühle zur Verwendung von requireJS kennenlernen.

AMD: Ein modulbasierter Mechanismus zum asynchronen Laden von JavaScript-Code. Die Abhängigkeit von globalen Objekten wird zu einer Abhängigkeit von anderen Modulen. Lösen Sie individuelle Modulabhängigkeiten durch verzögertes und bedarfsgesteuertes Laden. Die Vorteile von modularisiertem JavaScript-Code liegen auf der Hand. Die lose Kopplung der einzelnen Funktionskomponenten kann die Wiederverwendbarkeit und Wartbarkeit des Codes erheblich verbessern. Durch dieses nicht blockierende, gleichzeitige und schnelle Laden von JavaScript-Code können andere UI-Elemente auf der Webseite, die nicht auf JavaScript-Code angewiesen sind, wie Bilder, CSS und andere DOM-Knoten, zuerst geladen werden bessere Ergebnisse. Gute Erfahrung.

1. RequireJS herunterladen

Vor der modularen Entwicklung mit requireJS müssen wir einige Dinge vorbereiten. Dann müssen Sie die Datei require.js herunterladen, hahaha, weil sie darauf basiert.

2. Erstellen Sie eine HTML-Datei

Nachdem Sie eine HTML-Datei erstellt haben, müssen Sie beim Importieren von requireJS den Tag <script> verwenden. Dann gibt es in diesem Tag ein Datenhauptattribut, das als Ein- und Ausgang fungiert, dh nach dem Laden von requireJS wird über das Datenhauptattribut eingegeben. </script>

Zum Beispiel:

 <!DOCTYPE html>
  <head>
    <title>require</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
    <!--这是requireJS,data-main是作为入口模块,在这里就是js/main-->
    <script data-main="js/main" src="js/require.js"></script>
  </body>
</html>

Wenn ich js/require.js lade, dann führe ich die js-Datei von js/main aus. main ist ebenfalls eine js-Datei. Wir können das Suffix .js weglassen und requireJS wird es hinzufügen.

3. Daten-Hauptdaten

Wenn das Programm ausführt, geben Sie main.js über data-main ein und führen Sie main.js aus. Was ist also in main.js?

Bitte beachten Sie den Code:

/*
  require.config执行baseUrl为'js',
  baseUrl指的模块文件的根目录,可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require,来引入monkey.js,
  然后通过后面的匿名函数给他们分配参数,如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

Aus dem obigen Code können Sie ersehen, dass main.js zwei Module enthält: require.config und require.

Die Funktion von require.config besteht darin, einige Parameter von requireJS zu konfigurieren und sie dann öffentlich zu referenzieren.

Beispielsweise besteht die Funktion der oben genannten baseUrl darin, sie als Basispfad zu verwenden und unter diesem Pfad nach Dateien zu suchen. Ich habe alle .js-Dateien im js-Ordner abgelegt. Daher werden zukünftige Dateien nach der Konfiguration dieses Attributs nach Inhalten unter dem js-Pfad suchen.

Wie folgt:

require(['monkey'], function(monkey){
  monkey.init();
});

Wenn es sich um einen Affen handelt, bezieht es sich auf einen Affen, nicht auf js/monkey.

Welche Rolle spielen Pfade? Ersetzen Sie einfach einige häufig verwendete js-Dateien durch gebräuchliche Namen. Zum Beispiel jquery-1.8.2.min.js, wir können dies nicht jedes Mal schreiben, wenn wir es aufrufen. Der Einfachheit halber werden wir jquery-1.8.2.min.js durch jquery ersetzen. Von nun an können Sie es verwenden jquery direkt, was schnell und bequem ist.

Okay, require.config kommt mir bekannt vor. Kurz gesagt, seine Funktion besteht darin, requireJS zu konfigurieren.

Was ist mit „require“?

Die Funktion von require ist die Ausführung. Hier benötige ich zum Beispiel nur Monkey.js zum Ausführen, also habe ich Monkey importiert und dann den Parameter mk verwendet, um den Rückgabewert nach der Ausführung von Monkey zu erhalten. Wenn es einen Rückgabewert gibt, können wir mk entsprechend behandeln.

Hey, was ist in dem Affen?

Mal sehen:

/*
  define的参数为匿名函数,该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});

definieren! Seine Funktion besteht darin, ein JS-Modul zu definieren, das von anderen Modulen verwendet oder benötigt wird. Die Methode zum Verweisen auf andere js-Module ähnelt der Anforderung. Dabei werden die erforderlichen js-Dateien importiert, und die Parameter entsprechen dann eins zu eins. Was jeder beachten muss, ist, dass andere Module nicht auf die in define definierten Methoden oder Variablen zugreifen können. Wenn Sie möchten, dass andere Module Zugriff haben, werfen Sie einfach das entsprechende Objekt oder die Funktion zurück. Hier gebe ich ein Objekt zurück, das Init für den Aufruf anderer Module bereitstellt.

Stellungnahme
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
Hinter den Kulissen: Welche Sprache macht JavaScript?Hinter den Kulissen: Welche Sprache macht JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript wird in Browsern und Node.js -Umgebungen ausgeführt und stützt sich auf die JavaScript -Engine, um Code zu analysieren und auszuführen. 1) abstrakter Syntaxbaum (AST) in der Parsenstufe erzeugen; 2) AST in die Kompilierungsphase in Bytecode oder Maschinencode umwandeln; 3) Führen Sie den kompilierten Code in der Ausführungsstufe aus.

Die Zukunft von Python und JavaScript: Trends und VorhersagenDie Zukunft von Python und JavaScript: Trends und VorhersagenApr 27, 2025 am 12:21 AM

Zu den zukünftigen Trends von Python und JavaScript gehören: 1. Python wird seine Position in den Bereichen wissenschaftlicher Computer und KI konsolidieren. JavaScript wird die Entwicklung der Web-Technologie fördern. Beide werden die Anwendungsszenarien in ihren jeweiligen Bereichen weiter erweitern und mehr Durchbrüche in der Leistung erzielen.

Python vs. JavaScript: Entwicklungsumgebungen und ToolsPython vs. JavaScript: Entwicklungsumgebungen und ToolsApr 26, 2025 am 12:09 AM

Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.

Ist JavaScript in C geschrieben? Prüfung der BeweiseIst JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenJavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteC und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptVon Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenPython gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor