ErfordernJS ist ein effektiver Weg, um die Geschwindigkeit und Qualität Ihres JavaScript-Codes zu verbessern, wodurch es viel lesbarer und einfacher zu pflegen ist.
In diesem Artikel stelle ich Ihnen RequireJS vor und wie Sie damit beginnen können. Wir gehen durch die Anforderung von Dateien und die Definition eines Moduls und berühren sogar die Optimierung.
In einfachen Worten ist require.js ein Skript-Loader, mit dem Sie Ihren JavaScript-Code in Dateien und Module einfügen können, um so die Abhängigkeiten jedes Modells zu verwalten.
Um mit RequireJS und seiner Asynchronous Module Definition (AMD) zu arbeiten, müssen wir zuerst beginnen herunterladen es, dann Link zu der require.js-Datei im Kopf unseres Dokuments wie folgt:
Sie wundern sich vielleicht, was dieses Daten- Hauptattribut ist, bedeutet die Verwendung von RequireJS, dass, wenn Sie im Kopf des Dokuments fordern, dass Sie auch mit der Hauptdatei Ihrer JavaScript-Anwendung verknüpfen, das Daten- Hauptattribut ein Link zu dem ist Haupt-JavaScript-Datei für Ihre Anwendung, in diesem Fall main.js. (Beachten Sie, dass RequireJS automatisch die .js am Ende des Dateinamens hinzufügt.)
In dieser Datei main.js legen Sie die Konfiguration für RequireJS ab, laden Ihre Module und definieren einen Basispfad für die Verwendung von Dateien.
RequireJS verwendet eine einfache require Funktion um Skripte zu laden, in diesem Beispiel lädt RequireJS jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Eines der besten Dinge an RequireJS ist, dass es extrem lesbar ist. Wenn Sie sich diesen Code ansehen, müssen Sie zunächst die Datei mit dem Namen jquery.js abrufen und eine anonyme Funktion mit jQuerys $ als Parameter übergeben Wenn Sie damit fertig sind, können Sie den gesamten JQuery-Code verwenden.
Normalerweise haben Sie die jQuery-Bibliothek in einer Datei namens jquery.js nicht. Wie bei den meisten Plug-ins und Frameworks wählen wir normalerweise dann aus ihrem GitHub oder dem Google CDN, und dazu müssen wir die Pfade so konfigurieren dass sie auf den richtigen Ort zeigen:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Dies bedeutet, dass Sie jQuery über Google anfordern können und es problemlos verwenden können. (Beachten Sie, dass ich in diesem Beispiel den Namen "jquery" verwendet habe, aber Sie könnten es so nennen, wie Sie möchten.)
Die Verwendung des AMD-Musters bedeutet, dass unser Code in Modulen strukturiert werden kann; Diese Modelle sind nur Code-Bits, die in unserer Anwendung etwas bewirken. Sie können zwei Zeilen Code in einem Modul oder 100 platzieren, es hängt nur davon ab, was dieses Modul tun soll.
Um ein Modul zu definieren, verwenden wir folgenden Code:
define(function () {function add (x,y) {return x + y;}});In diesem Beispiel habe ich eine einfache Add- Funktion ohne Abhängigkeiten erstellt, aber wenn diese Funktion jQuery benötigt, um richtig zu funktionieren, würde die Define-Funktion folgendermaßen aussehen:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});Mit dieser Syntax teilen wir JavaScript mit, dass zuerst jQuery aufgerufen wird, und führen Sie dann den Code so aus, dass jQuery bei Bedarf verfügbar ist. Wir können dies auch in Modulen verwenden, die wir in JavaScript-Dateien geschrieben haben, es ist nicht auf Frameworks oder Plugins beschränkt.
Wie Sie sehen können, ist RequireJS ein großartiges Werkzeug, um Ihre Dateien in Module zu organisieren und nur das zu laden, was Sie brauchen. Der Nachteil ist, dass zu viele JavaScript-Dateien zu schlechten Ladezeiten führen, weshalb RequireJS ein Optimierer um die Daten von allen Dateien zu sammeln und sie in einer einzigen minimierten Datei zu speichern.
Alles in allem ist RequireJS eine der besten Möglichkeiten, JavaScript für das moderne Web zu organisieren und zu optimieren.
Haben Sie RequireJS in einem Projekt verwendet? Hat es Ihren Workflow verbessert? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Boxen Bild über Shutterstock.