Share
Front-end ontwikkelaars hebben te maken met verschillende uitdagingen bij het maken van sites met repetitieve oplossingen. Alle sites gebruiken een vergelijkbaar DOM-skelet, evenals veel gemeenschappelijke kenmerken en kenmerken. Volo probeert een deel van de inspanning uit het proces te verwijderen, zodat ontwikkelaars zich kunnen concentreren op de nieuwe aspecten van een project, afhankelijk van dezelfde.
Als u een JavaScript-bestand toevoegt dat niet AMD-compatibel is, probeert Volo het voor u te converteren.
Volo is een applicatie die front-end ontwikkelaars helpt door hun processen te automatiseren. Hiermee kunt u projecten maken op basis van een sjabloon; u kunt deze sjablonen uitbreiden en aangepaste opdrachten instellen voor het automatiseren van repetitieve taken.
Volo is gemaakt met een heel speciale relatie tot GitHub; het begrijpt GIT-repo's, evenals branches en tags. Er is geen speciaal Volo-pakket of repository; als iets op GitHub staat, kun je het in je project gebruiken. Dit is wat Volo onderscheidt van vergelijkbare applicaties.
Volo is gemaakt door James Burke, dezelfde James Burke die de zeer populaire bibliotheek require.js heeft gemaakt.
Het zal je misschien niet verbazen dat Volo een zeer eigenzinnige workflow heeft; het gaat ervan uit dat je de juiste AMD voor bestanden wilt gebruiken, evenals presets over waar bestanden moeten worden geplaatst.
Is dit een slechte zaak? Niet echt - je zou dit toch moeten doen. Bovendien kunt u de opdrachten overschrijven als u dat wilt.
Dus laten we beginnen met een aantal Volo's opdrachten te doorlopen.
Je zult waarschijnlijk de creëren commando eerst. Ik heb gezegd dat Volo diep geworteld is in GitHub, maar interessant genoeg gebruikt Volo GIT niet echt. U wilt meestal alleen een momentopname van een repo, niet de volledige commit-geschiedenis; dus Volo downloadt alleen de repo-bestanden zonder de eigenlijke GIT-gegevens.
De eenvoudigste manier om naar een sjabloon te verwijzen, is door gewoon de naam van de repo op te geven. Als u bijvoorbeeld een repo met de naam 'starterTemplate' wilt kopiëren, typt u eenvoudig de volgende opdracht:
volo create myApp starterTemplate
Ervan uitgaande dat de repo het eerste resultaat is dat geretourneerd wordt door GitHub, zal Volo de sjabloon downloaden en "installeren" naar een nieuwe map genaamd myApp.
Dit is een beetje riskant, vooral als u uw repo's liever een naam geeft met zeer generieke titels. Gelukkig kunt u meer details opgeven om de resultatenset te verkleinen. Het filtersysteem is vrij geavanceerd als het gaat om het ontcijferen van uw invoer. Kortom, u kunt gebruiken:
volo create appName userName / repoName / [branch | tag]
Je kunt ook bepaalde stukjes informatie weglaten. U kunt bijvoorbeeld de GitHub-gebruikersnaam weglaten, waardoor Volo naar het eerste project met de opgegeven naam en vertakking zoekt.
U kunt ook de gebruikersnaam opgeven, maar de versie / tak weglaten en Volo de nieuwste getagde versie downloaden.
Als er geen tags worden gevonden, valt Volo terug naar de hoofdtak.
Bovendien hoeft u geen exacte versie op te geven. Typ een uitdrukking als "> 1.0"vertelt Volo om een versie groter dan 1.0 te downloaden.
Last but not least, je hoeft geen repo van Github te gebruiken; u geeft gewoon de URL door aan het zip-archief dat u als sjabloon wilt gebruiken. Om een lokale map te kopiëren, kunt u de volgende indeling gebruiken:
local: / pad / naar / directory
Er zijn dus verschillende opties die u kunt gebruiken om uw gewenste repo te selecteren, en u kunt zelfs de repo-naam weglaten om Volo's eigen standaardsjabloon te gebruiken.
Weet u niet zeker wie de eigenaar van een populaire repo is? Gebruik de zoeken commando.
volo search repoName
Het gebruikt dezelfde GitHub-zoekopdracht als creëren; dus je kunt er zeker van zijn dat de eerste repo in je zoekresultaten de repo is die Volo zal downloaden.
De zoeken opdracht is alleen voor het vinden van een repo of het ophalen van informatie. Dientengevolge mist het een deel van de functionaliteit in de creëren commando. James heeft bijvoorbeeld een paar officiële sjablonen gemaakt die je kunt gebruiken, maar je kent hun namen misschien niet.
uitvoeren
volo search volojs / templatetoont een paar goede opties om te gebruiken.
U hoeft niet te nauwkeurig te zijn met uw zoekcriteria; Volo kan goed vinden wat je zoekt. Het is verrassend snel.
Als u meer informatie wilt over een repo, zoals versienummers of links, kunt u de toepasselijke naam gebruiken info commando. Een van de resultaten van volo search volojs / template is een repo met de naam 'volojs / create-responsive-template'. U kunt meer informatie over deze repo ophalen door het volgende te typen:
volo info volojs / create-responsive-template
De ... gebruiken creëren, zoeken, en info commando's, kunnen we aannemen dat we onze app hebben gemaakt. Dus wat nu?
Vervolgens moeten we afhankelijkheden toevoegen. Dit is vrij eenvoudig en het gebruikt dezelfde opties als de creëren commando met een paar toevoegingen. Naast het kunnen specificeren van een GitHub-gebruiker, branch / tag of URL naar een zip, de toevoegen commando laat je toevoegen "#"om een specifiek bestand vanuit de repo in te voeren. Veel repos hebben meestal de JaveScript-bibliotheek die u zoekt, maar het is samen met demo's en documentatie verpakt. Vaker wel dan niet, wilt u gewoon de bibliotheek en de toevoegen commando laat je dit doen.
Laten we doen alsof je een bibliotheek met de naam 'foo.js' wilt downloaden. Je kunt gewoon typen:
volo gebruiker toevoegen / fooRepo / v1.5 # foo.js
Dit downloadt het volledige zipbestand van GitHub, extraheert alleen het foo.js bestand en voegt het toe aan uw project. Deze hashtag-functie is niet specifiek voor bestandsnamen; u kunt een mapnaam doorgeven om alleen de opgegeven map aan uw project toe te voegen.
Eerder zei ik al dat Volo verwacht dat je de juiste AMD gaat beoefenen. Dus als u een JavaScript-bestand toevoegt dat niet AMD-compatibel is, zal Volo dit voor u proberen te converteren. Het proces is vrij eenvoudig.
Het begint met te vragen welke afhankelijkheden uw JavaScript-bestand gebruikt.
U kunt de namen van de afhankelijkheden doorgeven in een door komma's gescheiden lijst, of u kunt ze optioneel een variabelenaam geven. Hier is een voorbeeld van wat u kunt typen voor een jQuery-plug-in:
jquery1.9 = jQuery, jQueryUI
Dit vertelt Volo dat de opgegeven bibliotheek het bestand met de naam vereist jquery1.9 en om het onder de variabele naam door te geven jQuery. Vervolgens voegen we een komma toe om de volgende afhankelijkheid aan te geven: jQueryUI.
Nadat u klaar bent met het declareren van uw afhankelijkheden, kunt u aangeven wat u uit uw script wilt exporteren. U exporteert meestal niets in een jQuery-plug-in; dat wordt afgehandeld door jQuery zelf. Maar als u een JavaScript-bibliotheek heeft die iets moet exporteren, typt u gewoon de naam van de gewenste variabele in uw script. U kunt deze conversiefunctie meteen gebruiken met de amdify commando:
volo amdify
Geef gewoon de gewenste bestandsnaam door.
U kunt ook automatisch een gedownload bestand hernoemen. U wilt bijvoorbeeld een bestand met de naam toevoegen jquery.pluginName.1.3.min.js, maar het is geen handig bestand om naar te verwijzen in je scripts. U kunt een nieuwe naam doorgeven als de laatste parameter voor de toevoegen commando, en Volo zal het bestand hernoemen.
Samenvattend kunnen we deze pseudo jQuery-plug-in installeren vanuit een repo door het volgende te typen:
volo add userName / RepoName / v1.3 # jquery.pluginName.1.3.min.js newName.js
Volo zal de gespecificeerde repo downloaden, alleen het gegeven bestand voor de plug-in extraheren, je vragen hoe je het converteert om AMD-compliant te zijn en plaats het in je project onder de nieuwe naam. Het is veel controle en automatisering in een zeer eenvoudig te gebruiken commando.
Laten we nu naar Volofiles gaan.
Met Volofiles kunt u taken automatiseren door macro-achtige opdrachten te maken. Gebruikers van bijvoorbeeld CoffeeScript en SCSS kunnen handmatig de volgende opdrachten geven om hun bestanden te compileren:
koffie -c koffie-lib / -o lib / koffie -c app.coffee sass css / main.scss css / main.css
Dit zijn veel commando's om herhaaldelijk uit te voeren. Natuurlijk kan men deze commando's toevoegen aan een bash-bestand, maar het automatiseren van meerdere bewerkingen heeft meer dan waarschijnlijk betrekking op een semi-gecompliceerd bash-bestand of meerdere bash-bestanden. Met Volo maakt u een bestand met de naam volofile. In dit bestand maakt u een JavaScript-object dat de opdrachten bevat die u wilt uitvoeren. Dan kun je ze gewoon bellen alsof het native commando's zijn.
Hier is een voorbeeld volofile gemeenschappelijke parameters gebruiken:
Accentsconagua
module.exports = 'hi': 'samenvatting': 'Een commando om Hallo te zeggen', 'doc': 'Voer Doc Text Here or Load a file', 'validate': function (namedArgs, arg1) if ( namedArgs.cancel == "true") return new Error ('De parameter' cancel 'is ingesteld'); , 'uitvoeren': ['echo' Hallo wereld '', 'echo' Hoe gaat het vandaag? "'],' nextCommand ': ... Je zou dan kunnen typen volo -h om deze opdrachten en hun samenvatting te bekijken. invoeren volo hi-h laat zien wat er in de dokter veld. De bevestigen sleutel is optioneel en u kunt het voor testdoeleinden gebruiken om optioneel af te sluiten als er een probleem is. Last but not least, we hebben de rennen eigenschap, die de lijst met opdrachten bevat die moet worden uitgevoerd. U kunt een eenvoudige tekenreeks of een reeks tekenreeksen invoeren en Volo zal elke reeks dienovereenkomstig verwerken en uitvoeren.
Met het bovenstaande commando zou ik kunnen typen:
volo hi
Om de uitvoer te krijgen, of:
volo hi cancel = true
De trigger activeren als verklaring en verlaat met de verstrekte foutenmelding. Dit is waarschijnlijk de meest eenvoudige voorbeelden en je hebt veel meer opties beschikbaar bij het maken van je eigen opdrachten.
Ik noemde Volo processen elke tekenreeks in de rennen eigendom. In het bovenstaande voorbeeld wordt de instelling 'laatste redmiddel' gebruikt. Volo kijkt eerst naar bepaalde kenmerken in uw opdrachten en voert alleen de tekenreeks in de standaardterminal uit als deze niet kan bepalen wat u wilt. Je hebt daarvoor echter nog twee opties en ze heten 'v'en'n'.
v'en'n'TrefwoordenMet deze twee trefwoorden kunt u aangepaste functionaliteit in uw run strings injecteren. Als u bestanden wilt lezen, processen wilt uitvoeren of andere OS-specifieke taken wilt uitvoeren, gebruikt u de 'v'sleutelwoord. Gewoon het schrijven van de opdracht (bijv. rm file.js) werkt alleen op besturingssystemen die de gegeven opdracht ondersteunen. Door het gebruiken van v's opdrachten, je verzekert platformonafhankelijke ondersteuning van je volofile. U kunt bijvoorbeeld de volgende uitvoeringsreeks toevoegen als u een bestand van de ene naar de andere locatie wilt kopiëren:
uitvoeren: 'v.copyFile file_one file_two'
Deze opdracht is platformonafhankelijk. Om de volledige lijst met 'v'opties, bekijk het bronbestand. U kunt parameters met een spatie toevoegen (zoals in de terminal) in plaats van haakjes te gebruiken.
Vervolgens hebben we de n zoekwoord, dat verwijst naar uitvoerbare node.js-modules. Als u een opdracht opgeeft onder de n trefwoord, Volo controleert of het het uitvoerbare node.js-bestand in het privé-project van het huidige project kan vinden node_modules map, en deze valt terug naar de map global node.js modules als die niet wordt gevonden.
Node.js, of meer specifiek NPM, heeft een zeer grote verzameling kwaliteitsontwikkelingstools die door veel slimme en creatieve mensen zijn gemaakt.
Volo maakt gebruik van die enorme bron doordat je hun uitvoerbare bestanden direct in je Volofiles kunt pluggen. James Burke heeft zelfs een sjabloon gemaakt voor het maken van je eigen node.js-modules specifiek voor Volo, maar we komen daar zo aan.
Een voorbeeld van het gebruik van de n trefwoord is de CoffeeScript-module. Als u een map met de bestanden van CoffeeScript wilt compileren, kunnen we de volgende opdracht schrijven:
'run': 'n.coffee -c coffee-lib / -o lib /'
Zelfs als CoffeeScript niet wereldwijd is geïnstalleerd, kunt u ervoor zorgen dat het vanaf alle lokale besturingssystemen op alle besturingssystemen wordt uitgevoerd node_modules map.
Nu kunt u de opdrachtsjabloon gebruiken die ik heb genoemd (download hier trouwens) om een herbruikbare Volo-opdracht te maken voor al uw projecten. Als u bijvoorbeeld een module heeft die een back-up van uw app maakt, wilt u deze mogelijk opnemen in al uw projecten.
Maak een standaard NPM-module die de bovengenoemde eigenschappen exporteert (
samenvatting,rennenenz.) en vereist de module in uw Volofile.
Dus, met uw pakket toegevoegd aan NPM, kunt u gewoon typen:
npm install commandName
En typ in je volofile:
module.exports = 'commandName': require ('node_modules / commandName / index'); Waar index.js is de naam van uw extensie. Omdat uw bestand de benodigde eigenschappen exporteert, worden de opties rechtstreeks in uw volofile onder de opgegeven opdrachtnaam geïnjecteerd. Ik zou het niet echt een aangepaste functie noemen (het is standaard JavaScript), maar het is toch leuk om te weten dat je deze optie hebt.
Laten we nu, met de theorie uit de weg, een echt voorbeeld bekijken. We zullen een app bouwen met Volo.
Volo is een NPM-pakket, dus het installeren ervan is zo simpel als:
(sudo) npm install -g volo
Voor dit artikel dacht ik dat ik een kleine webpagina zou maken voor het genereren van een kaart van uw gebied, om te laten zien wie de FourSquare-burgemeesters van uw favoriete sites zijn. Het is geen ongelooflijk diep idee, maar het zal Volo aan de gang helpen.
Dus om te beginnen hebben we een repo nodig. Je kunt een aantal startersjablonen vinden die specifiek voor Volo zijn gemaakt door simpelweg op GitHub te zoeken. De standaardsjabloon wordt geleverd met de eerste levensbehoeften: een eenvoudig HTML-skelet en een JavaScript-map met een AMD barebones-configuratie.
Je krijgt ook een volofile met een build-opdracht voor het compileren van de JavaScript- en CSS-bestanden van het project.
Ik ga de standaardsjabloon niet gebruiken, omdat ik graag wat meer bronnen zou willen hebben. Na een snelle GitHub-zoekopdracht, vond ik een officiële sjabloon die de standaardinstellingen, het bootstrap-framework en andere bronnen bevatte.
Dus om ons nieuwe project te maken (dat ik 'turf' noemde), kun je eenvoudig het volgende in een terminalvenster typen:
volo creëren grasmat volojs / create-responsive-template cd turf
Hiermee wordt de projectmap gemaakt en wordt een momentopname van de opgegeven repository gedownload. Vervolgens om andere bronnen te downloaden. We zullen uiteraard jQuery gebruiken, dus laten we het toevoegen:
volo jQuery toevoegen
We hebben ook een manier nodig om een kaart op de pagina weer te geven. Google Maps komt voor de geest, dus we gebruiken een bibliotheek met de naam gmaps. Het JavaScript-bestand bevat de volledige bibliotheek; daarom hebben we de rest van de repo niet echt nodig. Bovendien kunt u zien dat de bibliotheek is opgeslagen in een variabele met de naam GMaps, en het vereist de Google maps API als een afhankelijkheid.
Er is één klein probleem hiermee: de Google Maps API is niet AMD-compatibel en is een asynchrone bibliotheek.
Wanneer u de enkele URL laadt, blijft deze andere bronnen afzonderlijk laden. Dit maakt het gebruik van standaard require.js een probleem, maar er is een plug-in die deze exacte situatie afhandelt. Het maakt deel uit van een repo genaamd "requirejs-plugins", maar wederom hebben we niet de volledige repo nodig. Typ daarom het volgende in het terminalvenster:
volo voeg requirejs-plugins # src / async.js toe
Met de asynchrone plug-in kunnen we onze speciale asynchrone afhankelijkheden laden.
We hebben twee opties om de huidige plug-in te installeren:
Ik zal je laten zien hoe je beide opties kunt gebruiken. Als u het bestand wilt converteren, voegt u het toe. Volo detecteert automatisch dat het bestand moet worden geconverteerd:
volo voeg HPNeo / gmaps # gmaps.js toe
Volo is gemaakt met een heel speciale relatie tot GitHub; het begrijpt GIT-repo's, evenals branches en tags.
Volgens de Github-pagina van het project vertrouwt het op de google maps API. Er is een klein probleem met het invoeren van de URL, omdat deze niet-ondersteunde tekens bevat (het gelijkteken). Dus laten we een tijdelijke aanduiding gebruiken; typ gewoon googlemaps en druk op enter. Vervolgens moeten we specificeren wat we willen exporteren. Type GMaps (met de twee hoofdletters, dat is de naam van de variabele) en druk op Enter. Volo zal het converteren en toevoegen aan de js / lib map.
Waarom het js / lib map? Als je de package.json bestand in de hoofdmap van uw project, ziet u een vermelding genaamd baseurl onder de amd eigendom. Dit vertelt Volo waar alle gedownloade JavaScript-bestanden moeten worden geplaatst. Er zijn eigenlijk een aantal locaties waar Volo naar kijkt om te beslissen waar dingen moeten worden gedaan:
basedir eigenschap onder een naam met de naam volo baseurl eigendom weer onder volo baseurl onder amd zoals we hier hebbenjs map in uw huidige mapscripts map in uw huidige mapAls geen van deze locaties bestaat, plaatst Volo het bestand in de huidige map.
Als de module is geïnstalleerd, moeten we de tijdelijke aanduiding die we hebben gemaakt voor de Google Maps API vervangen. Open de www / js / lib / gmaps.js bestand en vervang de placeholder in de eerste (of tweede) regel door het volgende:
async http:? //maps.google.com/maps/api/js sensor = false & bibliotheken = plaatsen
Dit vertelt Volo om de asynchrone plug-in op te nemen en deze de URL voor de Google Maps API door te geven.
De GMaps-module is nu volledig geïnstalleerd, maar vereist dat u specifieke lengtegraad- en breedtegraadcoördinaten invoert - iets wat de meeste gebruikers niet zullen weten. Dus we zouden een soort autocomplete plug-in moeten hebben die locatienamen converteert naar coördinaten.
Na weer een snelle Github-zoekopdracht vond ik een jQuery-plug-in genaamd geocomplete van ubilabs. Het is ook niet AMD-compatibel, maar we zullen de shim-functie van require.js gebruiken. Typ in de terminal de volgende opdracht:
volo add -amdoff ubilabs / geocomplete # jquery.geocomplete.js geocomplete
De amdoff optie voorkomt dat Volo het bestand converteert en de parameter ending geeft het bestand een nieuwe naam jquery.geocomplete.js naar geocomplete.js. Dit is niet verplicht, maar het maakt het gemakkelijker om ernaar te verwijzen.
Open nu de www / js / app.js bestand, en vervang de require.js config-declaratie bovenaan:
requirejs.config (baseUrl: 'js / lib', paths: app: '... / app', shim: 'geocomplete': deps: ['jquery', 'async! http: //maps.google .com / maps / api / js? sensor = false & libraries = places ']);
Gewoon om de instellingen te doorlopen die er al waren, baseurl vertelt require.js waar te zoeken naar relatieve bestanden, en de paths.app optie vertelt require.js dat als een modulenaam een verwijzing naar een locatie met de naam "app" heeft, dan wordt vervangen door wat is opgegeven ('... / app').
De shim sectie is wat ik aan het bestand heb toegevoegd. Het vertelt require.js om eerst jQuery en de Google Maps API te laden wanneer iemand een genoemd bestand laadt geocomplete. U kunt optioneel een andere eigenschap instellen met de naam export, de naam van de variabele om te exporteren. We hoeven niets te exporteren omdat dit een plug-in is en deze aan het jQuery-object hecht.
Op dit punt hebben we de bestanden die nodig zijn om de kaart weer te geven en de nodige coördinaten op te halen. We hebben geen code geschreven, maar we hebben wel alle afhankelijkheden.
Om te beginnen met het prototypen van onze app, moeten we wat HTML schrijven. Open de index.html bestand en verwijder alles binnen de body tags, behalve de element at the bottom. You should be left with a file like the following:
Voeg vervolgens een tekstinvoerveld voor het zoekvak en een tijdelijke aanduiding voor de daadwerkelijke kaart toe. Je nieuwe lichaamsdeel zou er ongeveer zo uit moeten zien:
Het is iets meer dan de basis zodat het voldoet aan de CSS-regels van bootstrap. Ik gaf de tekstinvoer een ID van zoeken en de kaart een ID van kaart. Laten we nu het JavaScript-bestand openen.
Volo is een applicatie die front-end ontwikkelaars helpt door hun processen te automatiseren.
Ik zal het opsplitsen voor degenen onder u die nieuw zijn voor require.js. De primaire reden om iets als require.js te gebruiken, is ervoor te zorgen dat de afhankelijkheden van uw scripts worden geladen wanneer, en alleen wanneer, uw script deze daadwerkelijk nodig heeft. Dit verhoogt de algehele snelheid van uw site en vereenvoudigt uw HTML-bestanden (u hoeft niet naar vele scripts te verwijzen).
U kunt zien dat het script onderaan het HTML-bestand wijst naar de bibliotheek require.js en dat het ook een data-main kenmerk dat automatisch wordt uitgevoerd als require.js gereed is.
Als je opent js / app.js, onze gewijzigde configuratie sectie en een vereiste verklaring onderaan. Merk op dat u de bestandsextensie niet nodig heeft. In het indexbestand hebben we naar verwezen js / app (zonder de .js), en hier laden app / main.
Normaal gesproken een verwijzing naar app / main zou toewijzen aan een bestand met de naam main.js in een map genaamd app (alles met betrekking tot de js / lib map). Maar onthoud in de configuratie dat we elke verwijzing naar een opgeroepen locatie noemden app, moet worden vervangen door ... / app. In plaats van zoeken naar js / lib / app / main.js, require.js zal ophalen js / app / main.js.
Open vervolgens js / app / main.js, verwijder alles en typ het volgende:
define (['jquery', 'gmaps', 'geocomplete'], function ($, gmaps) $ (document) .ready (function () $ ("# search"). geocomplete ();); ); De eerste parameter is een array van onze afhankelijkheden. De tweede is een functie met parameternamen voor jQuery ($) en GMaps (gmaps). Onthoud dat geocomplete een jQuery-plug-in is, dus er is geen reden om het een overeenkomstige parameter te geven ...
De functie is geslaagd toen de tweede parameter wordt uitgevoerd nadat de afhankelijkheden zijn voltooid.
Binnen deze functie voeren we de geocomplete () methode wanneer het document klaar is.
U kunt nu de pagina in uw browser openen en als alles goed is gegaan, moet het tekstvak "Een locatie invoeren" zeggen. Begin met typen en je ziet enkele resultaten.
Vervolgens moeten we de gebeurtenis afhandelen wanneer een overeenkomst wordt gevonden, d.w.z. wanneer de gebruiker op de toets Enter op de naam van een plaats drukt. Deze evenementen zijn: geocode: resultaat en de geocode: error. Voeg de code toe om deze gebeurtenissen af te handelen:
$ (document) .ready (function () $ ("# search"). geocomplete (). bind ("geocode: result", functie (event, result) // On Result). bind ("geocode: error ", function (event, result) alert (" Location not Found "););); De volgende stap is om de lengte- en breedtegraad op te halen en een nieuwe kaart te genereren. De lat / long worden opgeslagen in eigenschappen met de naam geometry.location.hb en geometry.location.ib, respectievelijk. Voeg de volgende code toe binnen de geocode: resultaat handler:
var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; var map = new gmaps (div: "#map", lat: lat, lng: lng, height: '380px');
We slaan de coördinaten op en laden een nieuwe kaart. Een kaart creaing is eenvoudig: we geven de ID van de container door, samen met de coördinaten en hoogte.
U zou nu een kaart moeten kunnen zoeken en weergeven. Vervolgens moeten we communiceren met Foursquare en de "burgemeesters" van je stad weergeven.
We hebben eerst een interface nodig voor de foursquare-API. Om tijd te besparen en om op het onderwerp te blijven, heb ik een repo gemaakt die we kunnen klonen. Dus typ in het terminalvenster:
git clone https://github.com/gmanricks/MayorAPI www / foursquare
Dit download de repo en plaatst deze in een map met de naam vierkant onder de www directory.
Open vervolgens foursquare.php en voeg je client-id en client-geheim in de constanten van de klasse in. Als je deze informatie nog niet hebt, kun je deze van Foursquare krijgen door een app te registreren.
Het andere bestand in de repo (data.php) haalt de kaartcoördinaten op via GET-parameters en retourneert een JSON-object. Dus om de burgemeesters aan de kaart toe te voegen, moeten we het geocomplete: resultaat event handler:
.bind ("geocode: result", function (event, result) var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; $ .get ("foursquare / data.php? lat = "+ lat +" & lng = "+ lng, functie (d) var map = nieuwe gmaps (div:" #map ", lat: lat, lng: lng, height: '380px'); var places = JSON .parse (d); if (places.error) alert ("De rate limit is hit"); else for (var index in places) var place = places [index]; if (place.mayor. foto) var html = ''+''+'
'+''+''+ place.mayor.name +''+''; map.drawOverlay (lat: place.lat, lng: place.lng, content: html); ); ) We definiëren eerst de LAT en lng variabelen, maar in plaats van meteen de kaart te maken, wachten we tot ons Ajax-verzoek is voltooid. We doen ongeveer elf API-aanroepen achter de schermen, dus het kan tien of vijftien seconden duren.
Vervolgens zorgen we ervoor dat de snelheidslimiet niet is getroffen en waarschuwen de gebruiker op de juiste manier. Ten slotte doorlopen we de resultaten en voegen we elke kaart toe aan de kaart met behulp van een opdracht uit de GMaps-bibliotheek.
U kunt nu de pagina openen en testen; alles zou moeten werken! Met een beetje styling en wat ontwerp, zou het er ongeveer zo uit kunnen zien:
Onze app is voltooid en de laatste stap is om deze te optimaliseren. Laten we eerst de bestanden verwijderen die we niet gebruiken. In de js / app / map, kunt u alles behalve de main.js het dossier. In de js / lib / map, verwijder de genoemde bestanden appCache.js en network.js. Je hebt ook de manifest.webapp bestand, maar je zou kunnen houden als je dat zou willen.
Open nu de volofile, en je kunt zien dat de sjabloon kwam met een behoorlijk ingewikkelde build-opdracht voor het optimaliseren en instellen van de JavaScript- en CSS-bestanden van het project. We hebben zo'n uitgebreid script niet nodig, dus verwijder alles uit het bestand en vervang het door het volgende:
module.exports = 'build': 'summary': 'Commando voor het compileren van de bronbestanden', '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 = require name = app include = requireLib out = www-built / js / lib / require.js ',' v.rm www-built / css ',' knooppunttools / r.js -o cssIn = www / css / app.css out = www-built / css / app.css '] ;
Volo is een omni-tool: je krijgt wat je erin stopt.
Dit is veel eenvoudiger. Hier maken we een opdracht met de naam bouwen dat verwijdert de vorige ingebouwde map als deze bestaat. Vervolgens wordt het hele bestand gekopieerd www map als basis voor onze gecompileerde versie. Vervolgens verwijderen we de js directory (we zullen deze vervangen door de geoptimaliseerde versie).
Vervolgens voeren we de optimalizer van require.js uit om de JavaScript-bestanden in een enkel bestand te compileren. U zult merken dat het het eindproduct hernoemt naar require.js; dit is een beetje een "hack" omdat het niet echt de bibliotheek require.js is. Maar aangezien ons HTML-bestand een verwijzing heeft naar require.js Het is nu al gemakkelijker om het Javascript-bestand te hernoemen dan om alle HTML-bestanden te parseren en de scriptreferenties te wijzigen.
Zodra deze opdracht is voltooid, verwijderen we de CSS-map (opnieuw om deze te vervangen door de geoptimaliseerde versie). En last but not least wordt de require.js-optimizer opnieuw uitgevoerd, dit keer voor de CSS.
Je kunt nu uitvoeren volo bouwen vanuit uw terminalvenster en Volo voert deze reeks opdrachten uit.
In uw browser kunt u navigeren naar de -Www gebouwd map in plaats van de www map om te controleren of het nog steeds werkt. Op mijn computer halveerde het bouwen van het project de bestandsgrootte in twee, van iets minder dan een megabyte tot ~ 400kb. Je kunt het waarschijnlijk nog kleiner krijgen als je de CSS verkleint.
In dit artikel heb ik je de syntaxis van Volo geleerd en we hebben een voorbeel
'+'