Share
Front-End-Entwickler stehen beim Erstellen von Websites mit sich wiederholenden Lösungen vor einer Vielzahl von Herausforderungen. Alle Websites verwenden ein ähnliches DOM-Skelett sowie viele gemeinsame Funktionen und Attribute. Volo zielt darauf ab, einen Teil des Aufwandes aus dem Prozess herauszunehmen, damit sich die Entwickler auf die neuen Aspekte eines Projekts konzentrieren können, die sich auf dieselben beziehen.
Wenn Sie eine JavaScript-Datei hinzufügen, die nicht mit AMD kompatibel ist, wird Volo diese Datei für Sie konvertieren.
Volo ist eine Anwendung, die Frontend-Entwickler durch die Automatisierung ihrer Prozesse unterstützt. Sie können Projekte basierend auf einer Vorlage erstellen. Sie können diese Vorlagen erweitern und benutzerdefinierte Befehle für die Automatisierung sich wiederholender Aufgaben einrichten.
Volo wurde mit einer ganz besonderen Beziehung zu GitHub erstellt. Es versteht GIT-Repos sowie Verzweigungen und Tags. Es gibt kein spezielles Volo-Paket oder Repository. Wenn sich etwas auf GitHub befindet, können Sie es in Ihrem Projekt verwenden. Dies unterscheidet Volo von ähnlichen Anwendungen.
Volo wurde von James Burke erstellt, dem gleichen James Burke, der die sehr beliebte Required.js-Bibliothek erstellt hat.
Es kann Sie nicht überraschen, dass Volo einen sehr meinungsorientierten Workflow hat. Es wird davon ausgegangen, dass Sie die richtige AMD-Datei für Dateien verwenden möchten und Voreinstellungen für die Ablage von Dateien bereitstellen.
Ist das eine schlechte Sache? Nicht wirklich - du solltest das sowieso tun. Außerdem können Sie die Befehle bei Bedarf überschreiben.
Beginnen wir damit, einige Befehle von Volo durchzulesen.
Sie werden wahrscheinlich das verwenden erstellen Befehl zuerst. Ich habe erwähnt, dass Volo tief in GitHub verwurzelt ist, aber interessanterweise verwendet Volo GIT nicht wirklich. Normalerweise möchten Sie nur eine Momentaufnahme eines Repos, nicht den gesamten Commit-Verlauf. Volo lädt also nur die Dateien des Repos ohne die tatsächlichen GIT-Daten herunter.
Die einfachste Methode zum Verweisen auf eine Vorlage besteht darin, nur den Namen des Repos anzugeben. Wenn Sie beispielsweise ein Repo mit dem Namen 'starterTemplate' kopieren möchten, geben Sie einfach den folgenden Befehl ein:
volo create myApp starterTemplate
Unter der Annahme, dass das Repo das erste von GitHub zurückgegebene Ergebnis ist, lädt Volo die Vorlage herunter und "installiert" sie in ein neues Verzeichnis mit dem Namen meine App.
Dies ist ein wenig riskant, vor allem, wenn Sie Repos lieber mit sehr generischen Titeln benennen möchten. Glücklicherweise können Sie weitere Details angeben, um die Ergebnismenge einzuschränken. Das Filtersystem ist ziemlich fortgeschritten, wenn es darum geht, Ihre Eingabe zu entschlüsseln. Grundsätzlich können Sie verwenden:
volo create appName benutzername / repoName / [branch | tag]
Sie können auch bestimmte Informationen weglassen. Sie können beispielsweise den GitHub-Benutzernamen weglassen, sodass Volo nach dem ersten Projekt mit dem angegebenen Namen und Zweig sucht.
Alternativ können Sie den Benutzernamen angeben, die Version / den Zweig jedoch weglassen, und Volo lädt die neueste getaggte Version herunter.
Wenn keine Tags gefunden werden, greift Volo zum Hauptzweig zurück.
Außerdem müssen Sie keine genaue Version angeben. Einen Ausdruck eingeben wie "> 1,0"weist Volo an, eine Version größer als 1.0 herunterzuladen.
Zu guter Letzt müssen Sie kein Repo von Github verwenden. Sie übergeben die URL einfach an das ZIP-Archiv, das Sie als Vorlage verwenden möchten. Um einen lokalen Ordner zu kopieren, können Sie das folgende Format verwenden:
local: / pfad / zum / verzeichnis
Es gibt also verschiedene Optionen, mit denen Sie das gewünschte Repo auswählen können, und Sie können sogar den Repo-Namen auslassen, um die eigene Standardvorlage von Volo zu verwenden.
Unsicher, wer der Besitzer eines beliebten Repos ist? Verwenden Sie die Suche Befehl.
volo search repoName
Es verwendet die gleiche GitHub-Suche wie erstellen; So können Sie sicher sein, dass das erste Repo in Ihren Suchergebnissen das Repo ist, das Volo herunterladen wird.
Das Suche Der Befehl dient nur zum Suchen eines Repos oder zum Abrufen seiner Informationen. Demzufolge fehlt ein Teil der Funktionalität, die in der gefunden wird erstellen Befehl. James hat beispielsweise einige offizielle Vorlagen erstellt, die Sie verwenden können, deren Namen Sie jedoch möglicherweise nicht kennen.
Ausführen
volo search volojs / templatezeigt einige gute Optionen an.
Sie müssen mit Ihren Suchkriterien nicht zu genau sein; Volo macht einen anständigen Job und findet, was Sie wollen. Es ist überraschend schnell.
Wenn Sie weitere Informationen zu einem Repo wünschen, z. B. Versionsnummern oder Links, können Sie die entsprechend benannten verwenden Info Befehl. Eines der Ergebnisse von volo search volojs / template ist ein Repo mit dem Namen 'volojs / create-responsive-template'. Sie können weitere Informationen zu diesem Repo abrufen, indem Sie Folgendes eingeben:
volo info volojs / create-responsive-template
Verwendung der erstellen, Suche, und Info Kommandos können wir davon ausgehen, dass wir unsere App erstellt haben. Was kommt als nächstes?
Als Nächstes müssen wir Abhängigkeiten hinzufügen. Dies ist ziemlich einfach und verwendet die gleichen Optionen wie das erstellen Befehl mit ein paar Ergänzungen. Neben der Möglichkeit, einen GitHub-Benutzer, eine Verzweigung / ein Tag oder eine URL für eine ZIP-Adresse anzugeben, kann die hinzufügen Befehl lässt Sie anhängen "#msgstr "" ", um eine bestimmte Datei aus dem Repo zu installieren. Viele Repos verfügen normalerweise über die gewünschte JaveScript - Bibliothek, die jedoch zusammen mit Demos und Dokumentation verpackt ist. Meistens möchten Sie nur die Bibliothek und die hinzufügen Befehl lässt Sie dies tun.
Nehmen wir an, Sie möchten eine Bibliothek mit dem Namen 'foo.js' herunterladen. Sie können einfach Folgendes eingeben:
volo add user / fooRepo / v1.5 # foo.js
Dies lädt die gesamte ZIP-Datei von GitHub herunter, extrahiert nur die foo.js Datei und fügt sie Ihrem Projekt hinzu. Diese Hashtag-Funktion ist nicht spezifisch für Dateinamen. Sie können einen Ordnernamen übergeben, um nur den angegebenen Ordner zu Ihrem Projekt hinzuzufügen.
Ich habe bereits erwähnt, dass Volo erwartet, dass Sie ordentliche AMD üben. Wenn Sie also eine JavaScript-Datei hinzufügen, die nicht mit AMD kompatibel ist, wird Volo es für Sie versuchen und konvertieren. Der Prozess ist ziemlich einfach.
Zunächst werden Sie gefragt, welche Abhängigkeiten Ihre JavaScript-Datei verwendet.
Sie können entweder die Namen der Abhängigkeiten in einer durch Kommas getrennten Liste übergeben, oder Sie können ihnen optional einen Variablennamen geben. Hier ein Beispiel, was Sie für ein jQuery-Plugin eingeben können:
jquery1.9 = jQuery, jqueryui
Dies teilt Volo mit, dass für die angegebene Bibliothek die genannte Datei erforderlich ist jquery1.9 und unter dem Variablennamen übergeben jQuery. Dann fügen wir ein Komma hinzu, um die nächste Abhängigkeit zu erklären: Jqueryui.
Nachdem Sie Ihre Abhängigkeiten deklariert haben, können Sie deklarieren, was Sie aus Ihrem Skript exportieren möchten. Normalerweise exportieren Sie nichts in ein jQuery-Plugin. das wird von jQuery selbst gehandhabt. Wenn Sie jedoch eine JavaScript-Bibliothek haben, die etwas exportieren muss, geben Sie einfach den Namen der gewünschten Variablen in Ihr Skript ein. Sie können diese Konvertierungsfunktion im Handumdrehen mit verwenden ändern Befehl:
volo amdify
Geben Sie einfach den gewünschten Dateinamen ein.
Sie können eine heruntergeladene Datei auch automatisch umbenennen. Sie möchten beispielsweise eine Datei mit dem Namen hinzufügen jquery.pluginName.1.3.min.js, Es ist jedoch keine bequeme Datei, die in Ihren Skripten referenziert werden kann. Sie können einen neuen Namen als letzten Parameter an den übergeben hinzufügen Befehl und Volo benennt die Datei um.
Zusammenfassend können wir dieses Pseudo-jQuery-Plugin aus einem Repo heraus installieren, indem Sie Folgendes eingeben:
volo add username / RepoName / v1.3 # jquery.pluginName.1.3.min.js neuerName.js
Volo lädt das angegebene Repo herunter, extrahiert nur die angegebene Datei für das Plugin, fragt Sie, wie Sie es in AMD-kompatibel umwandeln können, und platziert es in Ihrem Projekt unter dem neuen Namen. Es ist viel Kontrolle und Automatisierung in einem sehr einfach zu verwendenden Befehl.
Nun zu den Volofiles.
Mit Hilfe von Dateien können Sie Aufgaben automatisieren, indem Sie makroähnliche Befehle erstellen. Beispielsweise können CoffeeScript- und SCSS-Benutzer die folgenden Befehle zum Kompilieren ihrer Dateien manuell ausgeben:
coffee -c coffee-lib / -o lib / coffee -c app.coffee sass css / main.scss css / main.css
Dies sind viele Befehle, die wiederholt ausgeführt werden müssen. Natürlich kann man diese Befehle zu einer Bash-Datei hinzufügen, aber die Automatisierung mehrerer Vorgänge erfordert höchstwahrscheinlich eine semi-komplizierte Bash-Datei oder mehrere Bash-Dateien. Mit Volo erstellen Sie eine Datei mit dem Namen volofile. In dieser Datei erstellen Sie ein JavaScript-Objekt, das die Befehle enthält, die Sie ausführen möchten. Dann können Sie sie einfach so aufrufen, als wären sie native Befehle.
Hier ist ein Beispiel volofile gemeinsame Parameter verwenden:
Accentsconagua
module.exports = 'hi': 'summary': 'Ein Befehl, Hallo zu sagen', 'doc': 'Doc-Text hier eingeben oder eine Datei laden', 'validate': Funktion (namedArgs, arg1) if ( namedArgs.cancel == "true") return new Error ('Der Parameter' cancel 'wurde gesetzt'); 'run': ['echo "Hello World"', 'echo' Wie geht es dir heute? ''], 'nextCommand': … Sie könnten dann eingeben volo -h um diese Befehle und ihre Zusammenfassung anzuzeigen. Eingabe volo hi -h zeigt, was in der ist doc Feld. Das bestätigen key ist optional, und Sie können es zu Testzwecken verwenden, um bei Problemen optional zu beenden. Zu guter Letzt haben wir die Lauf Eigenschaft, die die Liste der auszuführenden Befehle enthält. Sie können eine einfache Zeichenfolge oder ein Array von Zeichenfolgen eingeben. Volo verarbeitet und führt sie entsprechend aus.
Mit dem obigen Befehl könnte ich Folgendes eingeben:
volo hi
Um die Ausgabe zu erhalten, oder:
volo hi cancel = wahr
Auslösen ob Anweisung und beenden Sie mit der angegebenen Fehlermeldung. Dies ist wahrscheinlich das grundlegendste Beispiel, und Sie haben viel mehr Optionen, wenn Sie eigene Befehle erstellen.
Ich erwähnte, dass Volo jeden String in der Lauf Eigentum. Das obige Beispiel verwendet die Einstellung "Last Resort". Volo sucht zunächst nach bestimmten Merkmalen in Ihren Befehlen und führt den String im Standard-Terminal nur dann aus, wenn er nicht bestimmen kann, was Sie möchten. Sie haben jedoch zwei Optionen davor und sie heißen 'v' und 'n'.
v' und 'n' SchlüsselwörterMit diesen beiden Schlüsselwörtern können Sie benutzerdefinierte Funktionen in Ihre Laufzeichenfolgen einfügen. Wenn Sie Dateien lesen, Prozesse oder andere betriebssystemspezifische Aufgaben ausführen müssen, verwenden Sie die 'v' Stichwort. Einfach den Befehl schreiben (z. rm file.js) funktioniert nur auf Betriebssystemen, die den angegebenen Befehl unterstützen. Durch die Nutzung vMit den Befehlen stellen Sie die plattformübergreifende Unterstützung Ihres Systems sicher volofile. Sie können beispielsweise die folgende Ausführungszeichenfolge hinzufügen, wenn Sie eine Datei von einem Speicherort an einen anderen kopieren möchten:
run: 'v.copyFile file_one file_two'
Dieser Befehl ist plattformübergreifend. Um die vollständige Liste von 'zu sehenv'Optionen, werfen Sie einen Blick auf die Quelldatei. Sie können Parameter mit Leerzeichen (wie im Terminal) anstelle von Klammern hinzufügen.
Als nächstes haben wir die n Schlüsselwort, das den ausführbaren node.js-Modulen zugeordnet wird. Wenn Sie einen Befehl unter angeben n Mit diesem Schlüsselwort prüft Volo, ob es die ausführbare Datei node.js im privaten Projekt des aktuellen Projekts finden kann Knotenmodule Ordner, und es wird auf den globalen Ordner "node.js modules" zurückgesetzt, wenn einer nicht gefunden wird.
Node.js, oder genauer gesagt NPM, verfügt über eine sehr große Sammlung von Qualitätsentwicklungstools, die von vielen intelligenten und kreativen Mitarbeitern erstellt wurden.
Volo nutzt diese enorme Ressource, indem Sie die ausführbaren Dateien direkt in Ihre Volofiles einfügen können. James Burke hat sogar eine Vorlage zum Erstellen eigener node.js-Module speziell für Volo erstellt, aber wir werden in einer Minute darauf zurückkommen.
Ein Beispiel für die Verwendung der n Schlüsselwort ist das CoffeeScript-Modul. Wenn Sie ein Verzeichnis mit CoffeeScript-Dateien kompilieren möchten, können Sie den folgenden Befehl schreiben:
'run': 'n.coffee -c coffee-lib / -o lib /'
Auch wenn CoffeeScript nicht global installiert ist, können Sie sicherstellen, dass es auf allen lokalen Betriebssystemen ausgeführt wird Knotenmodule Mappe.
Jetzt können Sie die von mir erwähnte Befehlsvorlage (übrigens hier herunterladen) verwenden, um einen wiederverwendbaren Volo-Befehl zu erstellen, der in allen Ihren Projekten verwendet werden kann. Wenn Sie beispielsweise über ein Modul verfügen, das Ihre App sichert, möchten Sie es möglicherweise in alle Ihre Projekte aufnehmen.
Erstellen Sie ein Standard-NPM-Modul, das die zuvor genannten Eigenschaften exportiert (
Zusammenfassung,Laufetc) und fordern Sie das Modul in Ihrem Volofile an.
Wenn Ihr Paket zu NPM hinzugefügt wurde, können Sie einfach Folgendes eingeben:
npm install commandName
Und tippen Sie einfach in Ihr Dokument ein:
module.exports = 'befehlsname': requir ('knotenmodule / befehlsname / index'); Woher index.js ist der Name Ihrer Erweiterung. Da Ihre Datei die erforderlichen Eigenschaften exportiert, werden die Optionen direkt unter dem angegebenen Befehlsnamen in Ihre Volofile eingefügt. Ich würde es nicht wirklich als benutzerdefinierte Funktion bezeichnen (es ist Standard-JavaScript), aber es ist trotzdem schön zu wissen, dass Sie diese Option haben.
Nun mit der Theorie aus dem Weg, schauen wir uns ein Beispiel aus der Praxis an. Wir werden eine App mit Volo erstellen.
Volo ist ein NPM-Paket. Die Installation ist so einfach wie folgt:
(sudo) npm install -g volo
Für diesen Artikel dachte ich, ich würde eine kleine Webseite erstellen, um eine Karte Ihres Gebiets zu erstellen, die zeigt, wer die FourSquare-Bürgermeister Ihrer bevorzugten Websites sind. Es ist keine unglaubliche tiefe Idee, aber es wird Volo auf die Probe stellen.
Zu Beginn brauchen wir ein Repo. Sie finden eine Reihe von Starter-Vorlagen, die speziell für Volo erstellt wurden, indem Sie einfach GitHub durchsuchen. Die Standardvorlage enthält das Nötigste: ein einfaches HTML-Gerüst und einen JavaScript-Ordner mit AMD-Barebones.
Sie erhalten auch einen Volofile mit einem Build-Befehl zum Kompilieren der JavaScript- und CSS-Dateien des Projekts.
Ich werde die Standardvorlage nicht verwenden, da ich gerne mehr Ressourcen hätte. Nach einer schnellen GitHub-Suche fand ich eine offizielle Vorlage, die die Standardeinstellungen, das Bootstrap-Framework und andere Ressourcen enthält.
Um unser neues Projekt (das ich "Rasen" nannte) zu erstellen, können Sie einfach Folgendes in ein Terminalfenster eingeben:
volo create rasen volojs / create-responsive-template cd rasen
Dadurch wird der Projektordner erstellt und ein Snapshot des angegebenen Repos heruntergeladen. Als Nächstes können Sie weitere Ressourcen herunterladen. Wir werden natürlich jQuery verwenden, also fügen wir es hinzu:
volo addiere jquery
Wir brauchen auch eine Möglichkeit, eine Karte auf der Seite anzuzeigen. Google Maps kommt mir in den Sinn, also verwenden wir eine Bibliothek mit dem Namen gmaps. Die JavaScript-Datei enthält die gesamte Bibliothek. Daher brauchen wir den Rest des Repos nicht wirklich. Darüber hinaus können Sie sehen, dass die Bibliothek in einer Variablen namens gespeichert ist GMaps, und es erfordert die Google maps API als Abhängigkeit.
Hier gibt es ein kleines Problem: Die Google Maps API ist nicht AMD-kompatibel und ist eine asynchrone Bibliothek.
Wenn Sie die einzelne URL laden, werden andere Ressourcen weiterhin eigenständig geladen. Dies macht die Verwendung von Standard Requires zu einem Problem, aber es gibt ein Plugin, das genau diese Situation behandelt. Es ist Teil eines Repos mit dem Namen "requirjs-plugins", aber auch hier brauchen wir nicht das gesamte Repo. Geben Sie also im Terminalfenster Folgendes ein:
volo add requirjs-plugins # src / async.js
Mit dem async-Plugin können wir unsere speziellen asynchronen Abhängigkeiten laden.
Wir haben zwei Möglichkeiten, das eigentliche Plugin zu installieren:
Ich zeige Ihnen, wie Sie beide Optionen nutzen können. Um die Datei zu konvertieren, fügen Sie sie einfach hinzu. Volo erkennt automatisch, dass die Datei konvertiert werden muss:
fügen Sie HPNeo / gmaps # gmaps.js hinzu
Volo wurde mit einer ganz besonderen Beziehung zu GitHub erstellt. Es versteht GIT-Repos sowie Verzweigungen und Tags.
Laut der Github-Seite des Projekts stützt es sich auf die Google Maps-API. Bei der Eingabe der URL gibt es ein kleines Problem, da sie nicht unterstützte Zeichen enthält (Gleichheitszeichen). Verwenden wir also einen Platzhalter. Schreib einfach Google Maps und drücken Sie die Eingabetaste. Als Nächstes müssen wir angeben, was wir exportieren möchten. Art GMaps (mit den beiden Großbuchstaben; so heißt die Variable) und drücken Sie die Eingabetaste. Volo beendet die Konvertierung und fügt sie dem hinzu js / lib Mappe.
Warum zum js / lib Mappe? Wenn Sie einen Blick auf die package.json Datei im Stammverzeichnis Ihres Projekts, wird ein Eintrag mit dem Namen angezeigt baseUrl unter dem amd Eigentum. Dies sagt Volo, wo alle heruntergeladenen JavaScript-Dateien abgelegt werden sollen. Es gibt tatsächlich eine Reihe von Orten, an denen Volo entscheidet, wo er Sachen ablegen soll:
baseDir Eigenschaft unter einem Eintrag namens volo baseUrl Eigentum wieder unter volo baseUrl unter amd wie wir hier habenjs Ordner in Ihrem aktuellen VerzeichnisSkripte Ordner in Ihrem aktuellen VerzeichnisWenn keiner dieser Speicherorte vorhanden ist, speichert Volo die Datei im aktuellen Verzeichnis.
Wenn das Modul installiert ist, müssen wir den von uns erstellten Platzhalter für das Google Maps-API immer noch ersetzen. Öffne das www / js / lib / gmaps.js Datei und ersetzen Sie den Platzhalter in der ersten (oder zweiten) Zeile durch Folgendes:
async! http: //maps.google.com/maps/api/js? sensor = false & libraries = places
Dadurch wird Volo angewiesen, das async-Plugin einzubinden und ihm die URL für das Google Maps-API zu übergeben.
Das GMaps-Modul ist jetzt vollständig installiert, es müssen jedoch bestimmte Längen- und Breitengradkoordinaten eingegeben werden - etwas, das die meisten Benutzer nicht kennen. Wir sollten also eine Art Autocomplete-Plugin haben, das Ortsnamen in Koordinaten konvertiert.
Nach einer weiteren schnellen Github-Suche fand ich ein jQuery-Plugin namens geocomplete von ubilabs. Es ist auch nicht AMD-kompatibel, aber wir werden die Shim-Funktion von Requirement.js verwenden. Geben Sie im Terminal den folgenden Befehl ein:
volo add -amdoff ubilabs / geocomplete # jquery.geocomplete.js geocomplete
Das amdoff Diese Option verhindert, dass Volo die Datei konvertiert, und der Endparameter benennt die Datei um jquery.geocomplete.js zu geocomplete.js. Dies ist nicht obligatorisch, erleichtert jedoch das Referenzieren.
Jetzt öffnen Sie die www / js / app.js Datei, und ersetzen Sie die config-Deklaration "required.js" oben:
requiredjs.config (baseUrl: 'js / lib', Pfade: app: '... / app'), shim: 'geocomplete': deps: ['jquery', 'async! http: //maps.google .com / maps / api / js? sensor = false & libraries = places ']);
Nur durch die Einstellungen laufen, die bereits vorhanden waren, baseUrl teilt mit, dass .js wissen muss, wo nach relativen Dateien gesucht werden soll paths.app Option sagt an requir.js, dass, wenn ein Modulname einen Verweis auf einen Speicherort mit dem Namen "app" hat, diese durch das, was angegeben ist, ersetzt wird ('… / app')..
Das Shim Abschnitt ist, was ich der Datei hinzugefügt habe. Wenn es jemand lädt, der eine Datei namens jQuery und die Google Maps-API lädt, wird es aufgefordert, jQuery und die Google Maps-API zu laden Geokomplette. Sie können optional eine andere Eigenschaft festlegen Exporte, Der Name der zu exportierenden Variablen. Wir müssen nichts exportieren, da dies ein Plugin ist, das an das jQuery-Objekt angehängt wird.
An diesem Punkt haben wir die Dateien, die zum Anzeigen der Karte und zum Abrufen der erforderlichen Koordinaten erforderlich sind. Wir haben noch keinen Code geschrieben, aber wir haben alle Abhängigkeiten.
Um mit dem Prototyping unserer App zu beginnen, müssen wir etwas HTML schreiben. Öffne die index.html Datei und entfernen Sie alles in den Body-Tags außer der element at the bottom. You should be left with a file like the following:
Fügen Sie anschließend ein Texteingabefeld für das Suchfeld und einen Platzhalter für die tatsächliche Karte hinzu. Ihr neuer Körperbereich sollte ungefähr so aussehen:
Es ist etwas mehr als die Grundlagen, so dass es den CSS-Regeln von bootstrap entspricht. Ich habe der Texteingabe eine ID von gegeben Suche und die Karte eine ID von Karte. Nun öffnen wir die JavaScript-Datei.
Volo ist eine Anwendung, die Frontend-Entwickler durch die Automatisierung ihrer Prozesse unterstützt.
Ich werde es für diejenigen unter Ihnen, die neu sind, um zu fordern. Der Hauptgrund für die Verwendung von "special.js" besteht darin, sicherzustellen, dass die Abhängigkeiten Ihrer Skripts geladen werden, und zwar nur dann, wenn Ihr Skript sie tatsächlich benötigt. Dies erhöht die Gesamtgeschwindigkeit Ihrer Website und vereinfacht Ihre HTML-Dateien (Sie benötigen nicht viele Skripts)..
Das Skript am unteren Rand der HTML-Datei zeigt auf die Bibliothek "required.js" und hat auch eine Daten-Main Attribut, das automatisch ausgeführt wird, sobald die Anforderung von requir.js abgeschlossen ist.
Wenn du öffnest js / app.js, unser modifizierter config-Bereich und eine request-Anweisung unten. Beachten Sie, dass Sie die Dateierweiterung nicht benötigen. In der Indexdatei wurde darauf verwiesen js / app (ohne das .js) und hier laden app / main.
Normalerweise ein Hinweis auf app / main würde auf eine Datei namens main.js in einem Ordner namens App (alles relativ zum js / lib Mappe). Denken Sie aber daran, dass in der Konfig alle Verweise auf einen genannten Ort erwähnt wurden App, sollte durch ersetzt werden … / App. Anstatt zu suchen js / lib / app / main.js, requir.js wird abgerufen js / app / main.js.
Als nächstes öffnen js / app / main.js, entfernen Sie alles und geben Sie Folgendes ein:
define (['jquery', 'gmaps', 'geocomplete'], Funktion ($, gmaps) $ (document) .ready (function () $ ("# search"). geocomplete ();); ); Der erste Parameter ist ein Array unserer Abhängigkeiten. Die zweite ist eine Funktion mit Parameternamen für jQuery ($) und GMaps (gmaps). Denken Sie daran, dass Geocomplete ein jQuery-Plugin ist. Es gibt also keinen Grund, einen entsprechenden Parameter anzugeben.
Die als zweiter Parameter übergebene Funktion wird ausgeführt, nachdem die Abhängigkeiten vollständig geladen wurden.
Innerhalb dieser Funktion führen wir das aus Geokomplette () Methode, wenn das Dokument fertig ist.
Sie können die Seite jetzt in Ihrem Browser öffnen. Wenn alles gut lief, sollte im Textfeld "Standort eingeben" angezeigt werden. Beginnen Sie mit der Eingabe, und Sie sehen einige Ergebnisse.
Als Nächstes müssen wir das Ereignis behandeln, wenn eine Übereinstimmung gefunden wird, d. H. Wenn der Benutzer die Eingabetaste des Ortsnamens drückt. Diese Ereignisse sind: Geocode: Ergebnis und das Geocode: Fehler. Fügen Sie den Code hinzu, um diese Ereignisse zu behandeln:
$ (document) .ready (function () $ ("# search"). geocomplete () .bind ("Geocode: Ergebnis", Funktion (Ereignis, Ergebnis) // On Result) .bind ("Geocode: Fehler ", Funktion (Ereignis, Ergebnis) Warnung (" Standort nicht gefunden "););); Der nächste Schritt besteht darin, den Breiten- und Längengrad abzurufen und eine neue Karte zu erstellen. Die Lat / Long-Werte werden in den genannten Eigenschaften gespeichert geometrie.standort.hb und geometrie.standort.ib, beziehungsweise. Fügen Sie den folgenden Code in das Geocode: Ergebnis Handler:
var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; var map = neue gmaps (div: "#map", lat: lat, lng: lng, height: '380px');
Wir speichern die Koordinaten und laden eine neue Karte. Das Erstellen einer Karte ist einfach: Wir übergeben die ID des Containers zusammen mit den Koordinaten und der Höhe.
Sie sollten jetzt in der Lage sein, eine Karte zu suchen und anzuzeigen. Als Nächstes müssen wir uns mit Foursquare verbinden und die "Bürgermeister" Ihrer Stadt anzeigen.
Wir benötigen zunächst eine Schnittstelle zur foursquare-API. Um Zeit zu sparen und beim Thema zu bleiben, habe ich ein Repo erstellt, das wir klonen können. Geben Sie im Terminalfenster Folgendes ein:
git clone https://github.com/gmanricks/MayorAPI www / foursquare
Dadurch wird das Repo heruntergeladen und in einem Ordner mit dem Namen gespeichert viereckig unter dem www Verzeichnis.
Als nächstes öffnen foursquare.php und fügen Sie Ihre Client-ID und das Client-Secret in die Konstanten der Klasse ein. Wenn Sie diese Informationen noch nicht haben, können Sie sie von Foursquare erhalten, indem Sie eine App registrieren.
Die andere Datei im Repo (data.php) ruft die Kartenkoordinaten über GET-Parameter ab und gibt ein JSON-Objekt zurück. Um die Bürgermeister der Karte hinzuzufügen, müssen wir das neu schreiben Geokomplette: Ergebnis Eventhandler:
.bind ("Geocode: Ergebnis", Funktion (Ereignis, Ergebnis) var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; $ .get ("foursquare / data.php? lat = "+ lat +" & lng = "+ lng, Funktion (d) var map = neue gmaps (div:" #map ", lat: lat, lng: lng, height: '380px'); var places = JSON .parse (d); if (places.error) alert ("Die Ratenbegrenzung wurde getroffen"); else for (var index in Orten) var place = places [index]; if (place.mayor. Foto) var html = ''+''+'
'+''+''+ place.mayor.name +''+''; map.drawOverlay (lat: place.lat, lng: place.lng, Inhalt: html); ); ) Wir definieren zuerst das lat und lng Variablen, aber anstatt sofort die Karte zu erstellen, warten wir, bis unsere Ajax-Anfrage abgeschlossen ist. Wir machen ungefähr elf API-Aufrufe hinter den Kulissen. Es kann also zehn oder fünfzehn Sekunden dauern.
Als Nächstes stellen wir sicher, dass das Ratenlimit nicht erreicht wurde, und informieren den Benutzer entsprechend. Zum Abschluss durchlaufen wir die Ergebnisse und fügen jedes mit einem Befehl aus der GMaps-Bibliothek zur Karte hinzu.
Sie können die Seite jetzt öffnen und testen. alles sollte funktionieren Mit etwas Styling und etwas Design könnte es ungefähr so aussehen:
Unsere App ist vollständig und der letzte Schritt ist die Optimierung. Löschen wir zuerst die Dateien, die wir nicht verwenden. In dem js / app / Ordner können Sie alles außer dem entfernen main.js Datei. In dem js / lib / Entfernen Sie die Dateien mit dem Namen appCache.js und network.js. Sie brauchen das auch nicht manifest.webapp Datei, aber Sie könnten behalten, wenn Sie dies wünschen.
Jetzt öffnen Sie die volofile, und Sie können sehen, dass die Vorlage einen ziemlich komplizierten Build-Befehl zur Optimierung und Einrichtung der JavaScript- und CSS-Dateien des Projekts enthielt. Wir benötigen kein so aufwändiges Skript. Löschen Sie also alles aus der Datei und ersetzen Sie es durch Folgendes:
module.exports = 'build': 'summary': 'Befehl zum Kompilieren der Quelldateien', 'run': ['v.rm www-built' ',' v.copyDir www www-built ',' v. rm www-built / js ',' node tools / r.js -o baseUrl = www / js / lib paths.app =… / app paths.requireLib = erfordern name = app include = requiredLib out = www-built / js / lib / requir.js ',' v.rm www-built / css ',' Knotenwerkzeuge / r.js -o cssIn = www / css / app.css out = www-built / css / app.css '] ;
Volo ist ein Omni-Tool: Sie bekommen, was Sie hineinlegen.
Das ist viel einfacher. Hier erstellen wir einen Befehl mit dem Namen bauen Dadurch wird das zuvor erstellte Folde entfernt, falls vorhanden. Es kopiert dann das Ganze www Ordner als Basis für unsere kompilierte V
'+'