Share
Ich mag die asynchrone Moduldefinition (AMD) sehr. Es ist eine großartige Lösung für die Verwaltung der vielen JavaScript-Dateien in einer Webanwendung. Ich finde es jedoch etwas umständlich; Einige der beliebtesten Bibliotheken sind standardmäßig nicht für AMD-fähig, daher müssen Sie eine angepasste Version finden. Dann benötigen Sie eine zusätzliche Bibliothek für die tatsächliche AMD-Funktionalität!
Jam löst all diese Probleme; Wie Sie sehen werden, macht es die Verwendung von AMD tatsächlich einfacher als die Verwendung von AMD!
Einer der Gründe, warum ich Jam so sehr liebe, ist das Kommandozeilenprogramm. Sie müssen nie wieder eine Bibliothek manuell herunterladen! Das bedeutet natürlich, dass Sie sich in der Befehlszeile wohl fühlen müssen, damit dieses Tutorial nützlich ist.
Noch etwas, bevor wir anfangen: Während ich in diesem Tutorial ein wenig über AMD erkläre, gehe ich davon aus, dass Sie verstehen, was es ist und warum Sie es verwenden möchten. Wenn Sie ein Tuts + Premium-Mitglied sind, können Sie die folgenden Tutorials lesen, um Sie auf den neuesten Stand zu bringen:
Jam ist ein Node-Modul. Wenn Sie also Node und npm installiert haben, führen Sie dies einfach in der Befehlszeile aus:
npm install -g jamjs
Beachten Sie, dass wir die verwenden -G flag, so dass Jam global installiert ist. Dies liegt daran, dass wir eine Binärdatei installieren, die wir für mehrere Projekte verwenden können.
Sobald das gelaufen ist, sollten Sie eine haben Marmelade binär in Ihrem PFAD (es wird auf installiert / usr / local / bin). Sie können eine Liste der verfügbaren Jam-Befehle anzeigen, indem Sie sie ausführen Marmelade:
Schauen wir uns einige dieser Befehle an!
Ich habe ein Beispielprojektverzeichnis erstellt und CD-aus dem Terminal hinein. Nehmen wir an, wir möchten jQuery in diesem Projekt verwenden. Es ist nicht erforderlich, die neueste Version herunterzuladen oder einen Link zu einem CDN einzufügen. Führen Sie dies einfach in der Befehlszeile aus:
Jam installieren Sie Jquery
Sie sollten einige Zeilen der Ausgabe sehen, was bedeutet, dass jQuery heruntergeladen wurde. Wenn Sie Ihr Projektverzeichnis auschecken, sollten Sie sehen, dass mehrere Dateien erstellt wurden:
Jam schafft eine Marmelade Ordner für uns; Hier werden alle Bibliotheken aufbewahrt, die wir mit Jam installieren. Beachten Sie, dass dort auch die required.js Datei wird gehalten. Ja, es ist die RequireJS-Bibliothek, die Jam verwendet.
So einfach ist das Installieren einer Bibliothek. Wie wär's damit??
In Ihrem Projektverzeichnis (aber außerhalb Marmelade Ordner) erstellen Sie eine Datei mit dem Namen app.js. Dies wird ein eigenes Modul sein, also müssen wir das verwenden definieren Funktion (uns von RequireJS gegeben). Wenn Sie AMD bereits verwendet haben, wissen Sie, dass die definieren Die Funktion nimmt zwei Parameter an: das Array der Abhängigkeiten und die Modulfunktion, die das Modulobjekt zurückgibt. Der Modulname wird aus dem Dateipfad und -namen übernommen.
Also hier ist ein wirklich grundlegendes Modul:
Accentsconagua
define (['jquery'], function ($) return init: function () $ ("# main"). text ("Using Jam");;); Im Abhängigkeits-Array benötigen wir jQuery; Wir müssen keine ganze Pfadkette verwenden, weil required.js ist so konfiguriert, dass nur “drin Methode, die ein bisschen jQuery-Magie macht.
Nun erstellen wir eine index.html Datei. Wirklich nackte Knochen:
Diesmal benutzen wir nicht die definieren Funktion, weil wir kein Modul definieren. Wir benötigen nur andere Module für unsere Verwendung, also verwenden wir die benötigen Funktion. Wenn Sie dies im Browser laden, sollten Sie feststellen, dass der jQuery-Code in unserem Modul ausgeführt wird.
Bevor wir uns mit der fortgeschritteneren Verwendung von Jam beschäftigen, wollen wir ein paar weitere grundlegende Befehle behandeln.
Wir haben gerade jQuery 1.8.0 installiert. Aber sagen wir mal, dass jQuery 1.8.1 herauskommt. Wie gehen Sie vor, um Ihr Projekt zu aktualisieren? Einfacher geht es nicht:
Jam Upgrade # oder Jam Upgrade Jquery
Wenn Sie ein Paket installiert haben und dann feststellen, dass Sie es nicht benötigen, können Sie es leicht mit entfernen Marmelade entfernen :
Marmelade entfernen Sie Jquery
Sie können eine Liste aller derzeit installierten Pakete anzeigen, indem Sie ausführen Marmelade ls.
Das sind die Grundlagen der Verwendung von Jam. Schauen wir uns einige fortgeschrittenere Anwendungen an.
Package.json DateiDie Verwendung von Jam an sich ist großartig, aber es kann wirklich mehr leisten, wenn Sie eine package.json Datei. Wenn Sie viel mit Node gearbeitet haben, sind Sie wahrscheinlich damit vertraut package.json Dateien: Sie werden zum Aufzeichnen von Informationen zu Modulen und zum Katalogisieren von Abhängigkeiten für Apps verwendet.
Nehmen wir an, wir haben eine Express-App. Um dies zu erhalten, installieren Sie Express mit npm install -g express und dann rennen myapp ausdrücken. In der meine App Ordner, der Standard package.json Datei für eine Express-App sieht ungefähr so aus:
"name": "anwendungsname", "version": "0.0.1", "private": "true", "scripts": "start": "node app", "abhängigkeiten": "express" : "3.0.0beta7", "Jade": "*"
Jam hat tatsächlich einige Eigenschaften, die wir zu dieser Datei hinzufügen können. Dies vereinfacht nicht nur die Arbeit mit Jam, sondern erleichtert auch anderen, sich schnell mit dem Projekt vertraut zu machen (vielleicht nachdem es von Github geklont wurde). Wir fangen mit dem Hinzufügen eines Marmelade Objektliteral als Stammeigenschaft:
//… "Marmelade" :
Die erste nützliche Eigenschaft ist "packageDir". Wie Sie wissen, ist dies ein Ordner mit dem Namen Marmelade standardmäßig. In einer Express-App sollten sich die clientseitigen JS-Dateien jedoch in einem statischen Verzeichnis befinden, das normalerweise aufgerufen wird Öffentlichkeit. Also, lass uns das tun:
"jam": "packageDir": "public / lib"
Nun, alle Bibliotheken (und required.js) wird in der sein lib Ordner, in Öffentlichkeit. Beim Anfordern der Dateien möchten wir jedoch keine Anfragen stellen /public/lib/file.js: wir wollen bekommen /lib/file.js. Also müssen wir das einstellen baseUrl:
"jam": "packageDir": "public / lib", "baseUrl": "public"
Jetzt können wir Abhängigkeiten in ihrem eigenen Hash setzen:
"jam": "packageDir": "public / lib", "baseUrl": "public", "abhängigkeiten": "jquery": "1.8.0", "backbone": null
Dies bedeutet, dass wir jQuery 1.8.0 und die neueste Version von Backbone herunterladen möchten. Jetzt speichern und schließen package.json Datei und lassen Sie uns diese Bibliotheken installieren.
Dazu führen Sie einfach Folgendes aus:
Jam installieren
Wie Sie sehen können, sind sowohl jQuery als auch Backbone installiert. Beachten Sie auch, dass Underscore.js installiert wurde. Das liegt daran, dass es eine Abhängigkeit von Backbone ist.
Damit dies alles funktioniert, erstellen wir eine sehr kleine Express-App. Wenn Sie noch nie mit Express gearbeitet haben, machen Sie sich keine Sorgen. Wir passen nur eine Ansicht an.
In dem meine App Ordner, den Express generiert hat, öffnen Ansichten / Index.jade in Ihrem bevorzugten Texteditor. Entfernen Sie den gesamten Inhalt und ersetzen Sie ihn damit:
#main script (src = "lib / requir.js") Script erfordert (['app'], function (App) // kommen wir darauf zurück.);
Dies ist Jade-Code und ähnelt HAML. Es sollte ziemlich selbsterklärend sein: Die erste Zeile erzeugt ein Wir werden in Kürze JavaScript einfügen. Zuerst in der "><%= name %> | "+" "> @<%= twitter %> Dies setzt zwar ein wenig Vertrautheit mit Backbone voraus, ist aber nicht zu schwer: Wir erstellen nur ein einfaches Modell und eine neue View-Klasse, um dieses Modell zu rendern (die View wird im Nun zurück in unsere Lassen Sie uns nun wieder in der Befehlszeile die Express-Abhängigkeiten installieren und den Server starten: Sobald der Server gestartet ist, gehen Sie zu localhost: 3000. Sie sollten die gerenderte Ansicht sehen: nur zwei Links. Super einfach, aber wir wissen, dass alle Teile funktionieren. Der nächste Schritt bei der Verwendung von AMD ist das Kompilieren der vielen Skriptdateien, die Sie in einer einzigen Datei haben, die in der Produktion verwendet werden sollen. Wieder macht Jam dies unglaublich einfach. Führen Sie einfach das aus: Diese Wenn Sie nun die Seite aktualisieren, werden Sie feststellen, dass wir unsere Single laden Hier sagen wir es, dass die Eingabe ( Ich sollte beachten, dass, wenn Sie ein anderes Paket über Jam installieren, dieses kompiliert wird Nun, bis zu diesem Punkt ist Jam ziemlich glatt. Aber es gibt natürlich einen Haken: Die ganze Idee von Jam hängt von den Paketen ab, die verfügbar sein sollen, richtig? Wie finden Sie diese Pakete?? Zwei Wege. Erstens gibt es das Befehlszeilentool Wenn Sie eine GUI bevorzugen, können Sie zu http://jamjs.org/packages wechseln, um die verfügbaren zu durchsuchen. Wenn Sie daran interessiert sind, Pakete zu entwickeln, die über Jam freigegeben werden sollen, sollten Sie es nicht zu schwierig finden. In der Paketentwicklungsdokumentation finden Sie Einzelheiten dazu. Es macht eine "ziemlich schwierige" Best Practice so reibungslos wie möglich! AMD ist eine großartige Möglichkeit, um eine große JavaScript-Anwendung zu organisieren, es kann jedoch ein wenig umständlich sein. Wie gesagt, deshalb liebe ich Jam: Dies macht eine "ziemlich harte" Best Practice so reibungslos wie möglich! Früher würde ich AMD wegen der zusätzlichen Arbeit nicht verwenden; Jetzt ist es mit Jam einfacher zu benutzen als nicht. Also, was denkst du über Jam? Wird es AMD für Sie einfacher machen? Oder haben Sie bereits einen AMD-Workflow, den Sie bevorzugen? Lass es uns in den Kommentaren hören!Main. Dann haben wir zwei Skript-Tags. Öffentlichkeit Ordner erstellen, ein app.js Datei und füge das hier ein:define (['jquery', 'backbone', 'undererscore'], Funktion ($, BB, _) var site = new BB.Model (name: "Nettuts +"), url: "http: //net.tutsplus .com ", twitter:" envatowebdev "), SiteView = BB.View.extend (el:" #main ", Vorlage: _.template (" div # main Element). Das Wichtigste dabei ist, wie wir alle drei Abhängigkeiten in der ersten verwenden definieren Parameter. Dann werden sie zu den Parametern unserer Modulfunktion. Am Ende geben wir ein Objekt mit unserem Modell und der View-Klasse zurück.Ansichten / Index.jade Datei, wir können den Inhalt davon ausfüllen benötigen Anruf.required (['app'], function (App) neue App.SiteView (model: App.site). render (););
npm install && npm start
Ihre Skripte zusammenstellen
jam compile output.js
output.js Datei hat den Inhalt von required.js sowie alle unsere Bibliotheken, so kann es das ersetzen required.js Datei, die wir gerade in unsere ziehen index.jade. Die Jam-Dokumente schlagen jedoch etwas vor, das es noch einfacher macht: das überschreiben required.js. Auf diese Weise müssen Sie nichts an Ihren HTML-Dateien oder Vorlagen ändern. Also werde ich das ausführen:jam kompilieren Sie public / lib / requir.js
required.js Datei, und dann verwenden, um unsere app.js Datei. Aber gehen wir noch einen Schritt weiter: runjam kompilieren -i app public / lib / requir.js
-ich) für die Zusammenstellung sollte das sein App Modul. Jam kann aufgrund unseres Ordners in den öffentlichen Ordner schauen package.json Einstellungen, und natürlich wird die Datei sein required.js Die Datei wird überschrieben. Alles wird wie bisher funktionieren. Sie müssen nur neu kompilieren, bevor Sie wieder mit der Produktion beginnen. Sie können die Datei durch Ausführen zurücksetzen Marmelade wieder aufbauen (Sie können diesen Befehl auch verwenden, um das neu zu erstellen required.js Datei nach dem Ändern der Konfigurationsoptionen im package.json).
Pakete finden
Jam-Suche. Fügen Sie einfach einen Suchbegriff hinzu und Sie erhalten eine Liste der verfügbaren Pakete, die Ihrer Suchanfrage entsprechen. Zum Beispiel bekomme ich, wenn ich renne Jam-Suchereignisse:
Fazit
