Share
Dezvoltatorii din Front-end se confruntă cu o varietate de provocări atunci când creează site-uri care au soluții repetitive. Toate site-urile utilizează un schelet DOM similar, precum și multe caracteristici și atribute comune. Volo intenționează să elimine o parte din efortul din proces, permițând dezvoltatorilor să se concentreze asupra noilor aspecte ale unui proiect, așa cum se aplică aceluiași.
Dacă adăugați un fișier JavaScript care nu este compatibil AMD, Volo va încerca să o convertească pentru dvs..
Volo este o aplicație care ajută dezvoltatorii de la front-end prin automatizarea proceselor lor. Vă permite să creați proiecte bazate pe un șablon; puteți extinde aceste șabloane și puteți configura comenzi personalizate pentru automatizarea sarcinilor repetate.
Volo a fost creat cu o relație foarte specială cu GitHub; înțelege replicile GIT, precum și sucursalele și etichetele. Nu există nici un pachet Volo special sau depozit; dacă ceva este pe GitHub, îl puteți folosi în proiectul dvs. Acest lucru îl determină pe Volo în afară de aplicații similare.
Volo a fost creat de James Burke, același James Burke care a creat biblioteca requ.js foarte populară.
Este posibil să nu vă surprindeți că Volo are un flux de lucru foarte avizat; presupune că doriți să utilizați AMD adecvat pentru fișiere, precum și să furnizați presetări în locul unde să plasați fișiere.
Este un lucru rău? Nu chiar - ar trebui să faci asta oricum. În plus, aveți posibilitatea să înlocuiți comenzile dacă aveți nevoie să faceți acest lucru.
Deci, haideți să începem trecând prin niște comenzi ale lui Volo.
Probabil veți folosi crea mai întâi. Am menționat că Volo este adânc înrădăcinată în GitHub, dar destul de interesant, Volo nu utilizează de fapt GIT. De obicei, vrei doar un instantaneu al unui repo, nu întregul istoric al comiterii; astfel încât Volo descarcă doar fișierele repo fără datele GIT actuale.
Cea mai simplă metodă de a face referire la un șablon este de a furniza numele repo. De exemplu, dacă doriți să copiați un repo numit 'starterTemplate', puteți să tastați următoarea comandă:
volo crea myApp starterTemplate
Presupunând că repo este primul rezultat întors de GitHub, Volo va descărca și "instala" șablonul într-un director nou numit AplicațiaMea.
Acest lucru este puțin riscant, mai ales dacă preferați să vă numiți repo-urile cu titluri foarte generice. Din fericire, puteți specifica mai multe detalii pentru a restrânge setul de rezultate. Sistemul de filtrare este destul de avansat când vine vorba de descifrarea contribuției. Practic, puteți utiliza:
volo creare appName userName / repoName / [branch | tag]
De asemenea, puteți omite anumite informații. De exemplu, puteți omite numele de utilizator GitHub, cauzând Volo să caute primul proiect cu numele și sucursala date.
Alternativ, puteți specifica numele de utilizator, dar omiteți versiunea / sucursala și Volo va descărca ultima versiune cu tag-ul.
Dacă nu se găsesc etichete, Volo revine la ramura principală.
În plus, nu este necesar să specificați o versiune exactă. Introducerea unei expresii ca "> 1.0"îi spune lui Volo să descarce o versiune mai mare de 1.0.
Nu în ultimul rând, nu trebuie să utilizați un repo de la Github; pur și simplu treceți URL-ul în arhiva zip pe care doriți să o utilizați ca șablon. Pentru a copia un dosar local, puteți utiliza următorul format:
locale: / calea / catre / director
Deci, există o varietate de opțiuni pe care le puteți utiliza pentru a selecta repo-ul dorit și puteți chiar să omiteți numele repo pentru a utiliza șablonul implicit al lui Volo.
Nu știți cine este proprietarul unui repo popular? Folosește căutare comanda.
volo căutare repoName
Utilizează aceeași căutare GitHub ca și crea; astfel încât să puteți fi sigur că primul repo în rezultatele dvs. de căutare este repo Volo va descărca.
căutare comanda este doar pentru găsirea unui repo sau pentru recuperarea informațiilor sale. Ca urmare, îi lipsește o parte din funcționalitatea găsită în crea comanda. De exemplu, James a creat câteva șabloane oficiale pe care le puteți utiliza, dar este posibil să nu știți numele acestora.
executare
volo căutare / șablon de căutareafișează câteva opțiuni bune de utilizat.
Nu trebuie să fii prea exact cu criteriile de căutare; Volo face o slujbă decentă găsind ceea ce vrei. Este surprinzător de rapid.
Dacă doriți mai multe informații despre un repo, cum ar fi numerele de versiune sau link-uri, puteți utiliza denumirea corespunzătoare info comanda. Unul dintre rezultatele de la volo căutare / șablon de căutare este un repo numit "volojs / create-responsive-template". Puteți obține mai multe informații despre acest repo introducând:
volo info volojs / create-responsive-template
Utilizarea crea, căutare, și info comenzi, putem presupune că am creat aplicația noastră. Deci ce urmeaza?
Apoi, trebuie să adăugăm dependențe. Acest lucru este destul de ușor și utilizează aceleași opțiuni ca și crea comandă cu câteva adăugiri. Pe lângă faptul că este capabil să specificați un utilizator GitHub, o sucursală / o etichetă sau o adresă URL la un zip, adăuga comanda vă permite să adăugați "#"pentru a introduce un anumit fișier din repo.Multe repo-uri tind să aibă librăria JaveScript pe care o doriți, dar este împachetată împreună cu demo-uri și documentație.În cele mai multe ori, doriți doar biblioteca și adăuga vă permite să faceți acest lucru.
Să presupunem că doriți să descărcați o bibliotecă numită "foo.js". Puteți să tastați pur și simplu:
volo adăugați utilizator / fooRepo / v1.5 # foo.js
Aceasta descarcă întregul fișier zip din GitHub, extrage numai foo.js fișier și îl adaugă la proiectul dvs. Această caracteristică hashtag nu este specifică numelor de fișiere; aveți posibilitatea să transmiteți un nume de folder pentru a adăuga numai folderul specificat proiectului dumneavoastră.
Anterior am menționat că Volo vă așteaptă să practici corect AMD. Deci, dacă adăugați un fișier JavaScript care nu este compatibil AMD, Volo va încerca să îl convertească pentru dvs. Procesul este destul de simplu.
Începe prin a întreba ce dependențe folosește fișierul JavaScript.
Puteți trece numele denumirilor într-o listă separată prin virgulă sau puteți să le dați opțional un nume de variabilă. Iată un exemplu despre ce puteți scrie pentru un plugin jQuery:
jquery1.9 = jQuery, jqueryui
Acest lucru îi spune lui Volo că biblioteca specificată necesită fișierul numit jquery1.9 și să o treci sub numele variabilei jQuery. Apoi adăugăm o virgulă pentru a declara următoarea dependență: jqueryui.
După ce terminați declararea dependențelor, puteți declara ce doriți să exportați din scriptul dvs. De obicei, nu exportați nimic într-un plugin jQuery; care este gestionat de jQuery în sine. Dar dacă aveți o bibliotecă JavaScript care nu trebuie să exporte ceva, ați tasta doar numele variabilei dorite în scriptul dvs. Puteți utiliza această caracteristică de conversie cu ajutorul funcției amdify comanda:
vol. amdify
Trebuie doar să treci numele de fișier dorit.
De asemenea, puteți redenumi automat un fișier descărcat. De exemplu, poate doriți să adăugați un fișier numit jquery.pluginName.1.3.min.js, dar nu este un fișier convenabil de referință în scenariile dvs. Puteți trece un nou nume ca parametru final la adăuga comanda și Volo va redenumi fișierul.
Pentru a rezuma, putem instala acest plugin pseudo jQuery dintr-un repo tastând următoarele:
volo adăugați userName / RepoName / v1.3 # jquery.pluginName.1.3.min.js newName.js
Volo va descărca repo-ul specificat, va extrage doar fișierul dat pentru plugin, vă va întreba cum să îl convertiți în conformitate cu AMD și să îl plasați în proiect sub noul nume. Este o mulțime de control și de automatizare într-o comandă foarte ușor de utilizat.
Acum să mergem la Volofiles.
Volofilele vă permit să automatizați sarcinile creând comenzi macro-like. De exemplu, utilizatorii CoffeeScript și SCSS pot emite manual următoarele comenzi pentru a le compila fișierele:
cafe-c cafea-lib / -o lib / cafe -c app.coffee sass css / main.scss css / main.css
Aceasta este o mulțime de comenzi pentru a executa în mod repetat. Firește, se pot adăuga aceste comenzi într-un fișier bash, dar automatizarea mai multor operațiuni mai mult decât probabil presupune un fișier bash semi-complicat sau mai multe fișiere bash. Cu Volo, creați un fișier numit volofile. În interiorul acestui fișier, creați un obiect JavaScript care conține comenzile pe care doriți să le executați. Apoi le puteți numi pur și simplu ca pe niște comenzi native.
Iată o mostră volofile utilizând parametri comuni:
Accentsconagua
Modul de lucru "," validare ": functie (numitArgs, arg1) if namedArgs.cancel == "true") returnați o nouă eroare ("Parametrul" anulați "a fost setat"); , 'run': ['echo' Hello World '', 'echo "Cum te simți azi?"],' nextCommand ': ... Ați putea apoi tasta volo -h pentru a vedea aceste comenzi și rezumatul acestora. Introducerea volo hi-h arată tot ce este în medic camp. valida cheia este opțională și o puteți utiliza în scopuri de testare pentru a ieși opțional dacă există o problemă. Nu în ultimul rând, avem alerga proprietate, care conține lista de comenzi pentru a executa. Puteți introduce un șir simplu sau o serie de șiruri de caractere, iar Volo va procesa și executa câte unul corespunzător.
Cu comanda de mai sus, aș putea să tip:
volo hi
Pentru a obține ieșirea, sau:
volo hi cancel = adevărat
Pentru a declanșa dacă declarație și ieșire cu mesajul de eroare furnizat. Acesta este probabil exemplul cel mai de bază și aveți mai multe opțiuni disponibile atunci când creați comenzile proprii.
Am menționat Volo procese fiecare șir în alerga proprietate. Eșantionul de mai sus folosește setarea "ultimă instanță". Volo mai întâi caută anumite caracteristici în comenzile dvs. și execută stringul numai în terminalul standard dacă nu poate determina ce doriți. Aveți două opțiuni înainte de asta însă, și sunt numite "v' și 'n'.
v' și 'n' Cuvinte cheieAceste două cuvinte cheie vă permit să injectați funcționalitatea personalizată în șirurile dvs. de alergare. Dacă aveți nevoie să citiți fișiere, să executați procese sau alte sarcini specifice OS-ului, doriți să utilizați "v"cuvânt cheie. Doar scrierea comenzii (de ex. rm file.js) funcționează numai pe sistemele de operare care suportă comanda dată. Prin utilizarea vcomenzi, vă asigurați suportul inter-platformă al dvs. volofile. De exemplu, puteți adăuga șirul de rulare următor dacă doriți să copiați un fișier dintr-o locație în alta:
executați: "v.copyFile file_one file_two"
Această comandă este încrucișată. Pentru a vedea lista completă a "v", aruncați o privire la fișierul sursă. Puteți adăuga parametri cu un spațiu (ca în terminal) în loc să utilizați paranteze.
Apoi avem n cuvântul cheie, care se potrivește cu modulele node.js executabile. Dacă specificați o comandă sub n , Volo verifică dacă poate găsi executabilul node.js în proiectul curent al lui privat node_modules , iar acesta se întoarce la folderul global al modulelor node.js dacă nu este găsit.
Node.js, sau mai precis NPM, are o colecție foarte mare de instrumente de dezvoltare a calității create de mulți oameni inteligenți și creativi.
Volo folosește această resursă enormă, permițându-vă să adăugați executabilele lor direct în volofilele voastre. James Burke a creat chiar și un șablon pentru crearea propriilor module node.js special pentru Volo, dar vom ajunge la asta într-un minut.
Un exemplu de utilizare a n cuvântul cheie este modulul CoffeeScript. Dacă doriți să compilați un director care conține fișiere CoffeeScript, am putea scrie următoarea comandă:
'run': 'n.coffee -c cafea-lib / -o lib /'
Chiar dacă CoffeeScript nu este instalat global, puteți asigura că va funcționa pe toate sistemele de operare de la nivel local node_modules pliant.
Acum puteți utiliza șablonul de comandă pe care l-am menționat (descărcați aici, apropo) pentru a crea o comandă Volo reutilizabilă pentru a fi utilizată în toate proiectele dvs. De exemplu, dacă aveți un modul care susține aplicația, puteți să o includeți în toate proiectele dvs..
Creați un modul standard NPM care exportă proprietățile mai sus menționate (
rezumat,alergaetc) și solicitați modulul în Volofile.
Deci, cu pachetul dvs. adăugat la NPM, puteți să tastați:
npm install commandName
Și în volofile voastre, tastați:
module.exports = 'commandName': cere ('node_modules / commandName / index'); Unde index.js este numele extensiei dvs. Deoarece fișierul dvs. exportă proprietățile necesare, opțiunile vor fi injectate direct în volofile dvs. sub numele de comandă dat. Nu aș numi o caracteristică personalizată (este standard JavaScript), dar este încă frumos să știți că aveți această opțiune.
Acum, odată ce teoria a ieșit din cale, să examinăm un exemplu din lumea reală. Vom construi o aplicație folosind Volo.
Volo este un pachet NPM, așa că instalarea este la fel de simplă:
(sudo) npm instalează -g volo
Pentru acest articol, m-am gândit că voi crea o pagină web mică pentru a genera o hartă a zonei dvs., arătând cine sunt primarii FourSquare din site-urile dvs. preferate. Nu este o idee incredibil de profundă, dar va pune Volo prin pași.
Deci, pentru început, avem nevoie de un repo. Puteți găsi o serie de șabloane de pornire, create special pentru Volo, pur și simplu căutând GitHub. Șablonul implicit vine cu necesitățile goale: un schelet HTML simplu și un folder JavaScript cu o configurație barebone AMD.
De asemenea, obțineți un volofile cu o comandă de construire pentru compilarea fișierelor JavaScript și CSS ale proiectului.
Nu voi folosi șablonul standard, deoarece aș dori să mai am câteva resurse. După o căutare rapidă în GitHub, am găsit un șablon oficial care conține setările implicite, cadrul de bootstrap și alte resurse.
Deci, pentru a crea noul nostru proiect (pe care l-am denumit "turf"), puteți să tastați următoarele într-o fereastră terminală:
volo crea volojs gazon / creare-responsive-template cd turf
Aceasta creează dosarul proiectului și descarcă un instantaneu al repo-ului specificat. Apoi, pentru a descărca alte resurse. În mod evident, vom folosi jQuery, deci să adăugăm:
volo adăugați jquery
De asemenea, avem nevoie de o modalitate de a afișa o hartă pe pagină. Google Maps vine în minte, așa că vom folosi o bibliotecă numită gmaps. Fișierul JavaScript conține întreaga bibliotecă; prin urmare, nu avem nevoie de restul repo-ului. În plus, puteți vedea că biblioteca este stocată într-o variabilă numită GMaps, și necesită ca API Google Maps ca o dependență.
Există o mică problemă în acest sens: API-ul Google Maps nu este compatibil cu tehnologia AMD și este o bibliotecă asincronă.
Când încărcați singurul URL, acesta continuă să încarce alte resurse pe cont propriu. Acest lucru face ca utilizarea standardului require.js să fie o problemă, dar există un plugin care gestionează această situație exactă. Este parte a unui repo numit "requjs-plugins", dar din nou, nu avem nevoie de întreaga repo. Deci, tastați următoarele în fereastra terminalului:
volo adăugați requjs-plugins # src / async.js
Cu pluginul asincron, putem încărca dependențele noastre asincrone speciale.
Avem două opțiuni pentru a instala pluginul real:
Vă voi arăta cum să utilizați ambele opțiuni. Pentru a converti fișierul, trebuie doar să îl adăugați. Volo va detecta automat că fișierul trebuie convertit:
volo adăugați HPNeo / gmaps # gmaps.js
Volo a fost creat cu o relație foarte specială cu GitHub; înțelege replicile GIT, precum și sucursalele și etichetele.
Potrivit paginii Github a proiectului, se bazează pe API-ul google maps. Există o mică problemă la introducerea adresei URL deoarece conține caractere nesuportate (semnul egal). Deci, să folosim un substituent; doar tip Hărți Google și apăsați Enter. Apoi, trebuie să specificăm ce vrem să exportim. Tip GMaps (cu cele două majuscule, acesta este numele variabilei) și apăsați enter. Volo va termina conversia și o va adăuga la js / lib pliant.
De ce js / lib pliant? Dacă te uiți la package.json fișier în rădăcina proiectului dvs., veți vedea o intrare numită baseUrl sub amd proprietate. Acest lucru îi spune lui Volo unde să pună toate fișierele JavaScript descărcate. Există, de fapt, o serie de locații Volo caută să decidă unde să pună lucrurile:
basedir proprietate sub o intrare numită Volo baseUrl proprietate din nou sub Volo baseUrl sub amd ca aicijs din directorul curentscript-uri din directorul curentDacă niciuna dintre aceste locații nu există, Volo pune fișierul în directorul curent.
Cu modulul instalat, este totuși necesar să înlocuim substituentul pe care l-am creat pentru API-ul Google Maps. Deschide www / js / lib / gmaps.js și înlocuiți substituentul în prima linie (sau al doilea) cu următoarele:
async http:!? //maps.google.com/maps/api/js senzor = false & biblioteci = locuri
Acest lucru îi spune lui Volo să includă pluginul asincron și să îl transmită URL-ului API-ului Google Maps.
Modulul GMaps este acum complet instalat, dar vă cere să introduceți coordonatele longitudinale și latitudine specifice - ceva ce majoritatea utilizatorilor nu vor ști. Deci, ar trebui să avem un fel de plugin de completare automată care convertește numele locațiilor în coordonate.
După o altă căutare rapidă Github, am găsit un plugin jQuery numit geocompletă de ubilabs. De asemenea, nu este compatibilă cu AMD, dar vom folosi caracteristica requi. În tipul de terminal, următoarea comandă:
volo add -amdoff ubilabs / geocomplete # jquery.geocomplete.js geocomplete
amdoff opțiunea previne Volo de conversia fișierului și parametrul de terminare redenumiți fișierul jquery.geocomplete.js la geocomplete.js. Acest lucru nu este obligatoriu, dar face ca referirea să fie mai convenabilă.
Deschide acum www / js / app.js fișier și înlocuiți declarația de configurare requ.js din partea de sus:
requirejs.config (baseUrl: 'js / lib', căi: app: '... / app', shim: 'geocomplete': deps: ['jquery', 'async! http: //maps.google .com / maps / api / js? sensor = false & libraries = locuri ']);
Doar pentru a trece prin setările care au fost deja acolo, baseUrl spune where.js unde să caute fișierele relative și paths.app optiunea spune ca require.js ca daca un nume de modul are o referinta la o locatie numita "app", atunci pentru a inlocui cu ceea ce este specificat ('... / app').
shim este ceea ce am adăugat la dosar. Se spune ca require.js trebuie să încarce primul jQuery și API-ul Google Maps atunci când cineva încarcă un fișier numit geocomplete. Puteți seta opțional o altă proprietate numită exporturi, numele variabilei de export. Nu este nevoie să exportați nimic, deoarece acesta este un plugin și se atașează obiectului jQuery.
În acest moment, avem fișierele necesare pentru afișarea hărții și pentru recuperarea coordonatelor necesare. Nu am scris niciun cod, dar avem toate dependențele.
Pentru a începe prototiparea aplicației noastre, trebuie să scriem câteva coduri HTML. Deschideți index.html fișier și eliminați totul în interiorul etichetelor de caroserie, cu excepția element at the bottom. You should be left with a file like the following:
Apoi, adăugați un câmp de introducere a textului pentru caseta de căutare și un substituent pentru harta reală. Noua dvs. zonă corporală ar trebui să arate cam așa:
Este ceva mai mult decât elementele de bază, astfel încât să respecte regulile CSS de la bootstrap. Am dat textul de intrare un ID de căutare și harta hărții un ID de Hartă. Acum, să deschideți fișierul JavaScript.
Volo este o aplicație care ajută dezvoltatorii de la front-end prin automatizarea proceselor lor.
O voi rupe pentru cei dintre voi care sunt noi de a solicita. Motivul principal pentru a folosi ceva de genul require.js este să vă asigurați că dependențele script-urilor sunt încărcate când și numai atunci când scriptul dvs. are nevoie de ele. Acest lucru mărește viteza generală a site-ului dvs. și simplifică fișierele HTML (nu aveți nevoie de mai multe scripturi de referință).
Puteți vedea scriptul din partea de jos a fișierului HTML indicând biblioteca requ.js și are, de asemenea, un date principale atribut care rulează automat odată requ.js este gata.
Dacă vă deschideți js / app.js, secțiunea noastră de configări modificată și o solicitare în partea de jos. Observați că nu aveți nevoie de extensia de fișier. În fișierul index, am făcut referire js / app (fara .js), și aici încărcați app / principal.
În mod normal, o referință la app / principal ar fi hartă la un fișier numit main.js în interiorul unui dosar numit aplicaţia (toate în raport cu js / lib pliant). Dar amintiți-vă în config, am spus orice referire la o locație numită aplicaţia, ar trebui înlocuit cu ... / app. În loc de a căuta js / lib / app / main.js, require.js va prelua js / app / main.js.
În continuare, deschideți-vă js / app / main.js, eliminați totul și introduceți următoarele:
define (['jquery', 'gmaps', 'geocomplete'], funcția ($, gmaps) $ (document) .ready () );
Primul parametru este o serie de dependențe. A doua este o funcție cu numele parametrilor pentru jQuery ($) și GMaps (gmaps). Amintiți-vă că geocompletul este un plugin jQuery, deci nu există nici un motiv să-i dați un parametru corespunzător ...
Funcția a trecut ca al doilea parametru se execută după ce dependențele finalizează încărcarea.
În interiorul acestei funcții executăm geocomplete () când documentul este gata.
Acum puteți deschide pagina în browser și, dacă totul merge bine, caseta de text ar trebui să spună "Introduceți o locație". Începeți să tastați și veți vedea câteva rezultate.
Apoi, trebuie să rezolvăm evenimentul când se găsește o potrivire, adică când utilizatorul apasă tasta Enter pe numele unui loc. Aceste evenimente sunt: Geocodificarea: rezultat si Geocodificarea: eroare. Adăugați codul pentru a gestiona aceste evenimente:
$ (document) .ready (funcția () $ ("# search"). geocomplete () .bind (" eroare ", funcție (eveniment, rezultat) alertă (" Locația nu a fost găsită "););); Următorul pas este să preluați latitudinea și longitudinea și să generați o nouă hartă. Lat / long sunt stocate în proprietățile numite geometry.location.hb și geometry.location.ib, respectiv. Adăugați următorul cod în interiorul Geocodificarea: rezultat handler:
var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; var hartă = noi gmaps (div: "#map", lat: lat, lng: lng, înălțimea: '380px');
Stocăm coordonatele și încărcăm o nouă hartă. Crearea unei hărți este simplă: transmitem ID-ul containerului împreună cu coordonatele și înălțimea.
Acum ar trebui să puteți căuta și afișa o hartă. Apoi, trebuie să interfacă cu Foursquare și să afișăm "primarii" din orașul tău.
Avem mai întâi nevoie de o interfață cu API-ul patrulea. Pentru a economisi timp și pentru a rămâne pe subiect, am creat un repo pe care îl putem clona. Deci, în fereastra terminalului, tastați:
clona git https://github.com/gmanricks/MayorAPI www / foursquare
Aceasta descărcă repo și o plasează într-un folder numit pătrat sub www director.
În continuare, deschideți-vă foursquare.php și introduceți client-id și client-secret în constantele clasei. Dacă nu aveți deja aceste informații, o puteți obține de la Foursquare prin înregistrarea unei aplicații.
Celălalt fișier din repo (data.php) preia coordonatele hărții prin parametrii GET și returnează un obiect JSON. Deci, pentru a adăuga primarii la hartă, trebuie să rescrieți geocomplete: rezultat organizatorul evenimentului:
.bind ("geocode: result", funcție (eveniment, rezultat) var lat = result.geometry.location.hb; var lng = result.geometry.location.ib; $ .get ("foursquare / data.php? lat = "+ lat +" & lng = "+ lng, funcția (d) var map = noi gmaps .para (d); if (places.error) alert ("Limita ratei a fost lovită"); else for (var index in places) var place = places [index]; fotografie) var html = '"+""+"
"+""+"'+ place.mayor.name +'"+"„; map.drawOverlay (lat: place.lat, lng: loc.lng, conținut: html); ); ) Mai întâi definim lat și LNG variabile, dar în loc să creăm imediat harta, așteptăm ca cererea noastră Ajax să se finalizeze. Facem în jurul a unsprezece apeluri API în spatele scenei, așa că ar putea dura zece sau cincisprezece secunde.
Apoi, ne asigurăm că limita de rată nu a fost lovită și avertizează utilizatorul în mod corespunzător. În cele din urmă, vom trece prin rezultate, adăugând fiecare pe hartă utilizând o comandă din biblioteca GMaps.
Acum puteți să deschideți pagina și să o testați; totul ar trebui să funcționeze! Cu puțin stil și un anumit design, ar putea arăta așa:
Aplicația noastră este completă, iar ultimul pas este să-l optimizăm. Să ștergem mai întâi fișierele pe care nu le folosim. În js / app / folder, puteți să ștergeți totul, în afară de acesta main.js fişier. În js / lib / folder, eliminați fișierele numite appCache.js și network.js. De asemenea, nu aveți nevoie de manifest.webapp fișier, dar ați putea păstra dacă doriți.
Deschide acum volofile, și puteți vedea că șablonul a venit cu o comandă destul de complicată de construire pentru optimizarea și configurarea fișierelor JavaScript și CSS ale proiectului. Nu avem nevoie de un astfel de script elaborat, deci ștergeți totul din fișier și înlocuiți-l cu următorul text:
module.exports = 'build': 'summary': 'Comandă pentru compilarea fișierelor sursă', 'run': ['v.rm www-built', 'v.copyDir www www-built' rm www-built / js ',' node tools / r.js -o baseUrl = www / js / lib paths.app = ... / app paths.requireLib = lib / require.js ',' v.rm www-built / css ',' node tools / r.js -o cssIn = www / css / app.css out = www-built / css / app.css ' ;
Volo este un omni-instrument: obțineți ceea ce ați pus în ea.
Acest lucru este mult mai simplu. Aici, creăm o comandă numită construi care elimină foldul anterior construit, dacă acesta există. Apoi, copiază întregul www folder ca bază pentru versiunea noastră compilată. Apoi, ștergem js (îl vom înlocui cu versiunea optimizată).
Apoi rulați optimizatorul require.js pentru a compila fișierele JavaScript într-un singur fișier. Este posibil să observați redenumirea produsului final require.js; acest lucru este un fel de "hack", deoarece nu este de fapt biblioteca require.js. Dar, deoarece fișierul nostru HTML are o referință la require.js deja, este mai ușor să redenumiți fișierul Javascript decât să analizați toate fișierele HTML și să modificați referințele de script.
După finalizarea comenzii, eliminăm dosarul CSS (din nou pentru ao înlocui cu versiunea optimizată). Și nu în ultimul rând, rulați din nou optimizatorul requ.js, de această dată pentru CSS.
Acum puteți executa volo construi din fereastra terminalului și Volo va rula această serie de comenzi.
În browserul dvs., puteți naviga la -Www construit dosar în loc de www pentru a vă asigura că funcționează în continuare. Pe calculatorul meu, construirea proiectului taie dimensiunea fișierului la jumătate, de la puțin sub un megabyte la ~ 400kb. Probabil că puteți obține chiar și mai mic dacă minificați CSS.
În acest articol, v-am învățat sintaxa lui Volo și am construit o aplicație de exemplu. Am învățat cum să folosim Volo pentru a crea un proiect, a adăuga dependențe, a adăuga comenzi personalizate pentru automatizarea sarcinilor comune și optimizarea unui întreg proiect.
Pentru a rezuma, Volo este un omni-instrument: obțineți ceea ce ați pus în ea. Aveți câteva, dar puternice, comenzi, dar adevărata putere a lui Volo provine din extinderea incredibilă și, în cele din urmă, din comunitatea sa.
Deci, ce crezi despre Volo? Voi creați comenzi personalizate Volo? Lăsați un comentariu cu întrebările și opiniile dvs..
Mulțumesc că ați citit.
"+"