Share
Jeg liker virkelig asynkronmoduldefinisjon (AMD); Det er en flott løsning for å administrere de mange JavaScript-filene i et webprogram. Imidlertid finner jeg det å være litt av et problem, Noen av de mest populære bibliotekene er ikke AMD-klare som standard, så du må finne shimmed versjon. Deretter trenger du et ekstra bibliotek for den faktiske AMD-funksjonaliteten!
Jam løser alle disse problemene; som du ser, gjør det faktisk å bruke AMD enklere enn å ikke bruke det!
En av grunnene til at jeg elsker Jam så mye er at det er et kommandolinjeverktøy. Du trenger aldri å laste ned et bibliotek manuelt igjen! Selvfølgelig betyr dette at du må være komfortabel på kommandolinjen for at denne opplæringen skal være nyttig.
En ting til, før vi starter: Mens jeg forklarer litt om AMD i denne opplæringen, antar jeg at du forstår hva det er og hvorfor du vil bruke den. Hvis du er en Tuts + Premium-medlem, kan du sjekke ut disse opplæringene for å få deg raskere:
Jam er en nodemodul, så antar du at du har Node og npm installert, bare kjør dette på kommandolinjen:
npm installere -g jamjs
Legg merke til at vi bruker -g flagg, slik at Jam er installert globalt. Dette skyldes at vi installerer et binært som vi kan bruke til flere prosjekter.
Når det har gått, bør du ha en syltetøy binær i din PATH (den er installert til / Usr / local / bin). Du kan se en liste over tilgjengelige Jam-kommandoer ved å kjøre syltetøy:
Så, la oss begynne å se på noen av disse kommandoene!
Jeg har laget et eksempel prosjektkatalog og cd-reddet til den fra terminalen. La oss si at vi vil bruke jQuery i dette prosjektet. Det er ikke nødvendig å laste ned den nyeste versjonen eller lime inn en lenke til en CDN. Bare kjør dette på kommandolinjen:
jam installere jquery
Du bør se noen utgangslinjer, noe som betyr at jQuery er lastet ned. Hvis du sjekker ut prosjektkatalogen din, bør du se at flere filer er opprettet:
Jam skaper en syltetøy mappe for oss; Dette er hvor alle bibliotekene vi installerer med Jam, blir holdt. Legg merke til det er også hvor require.js filen holdes. Ja, det er KravJS-biblioteket som Jam bruker.
Så, å installere et bibliotek er så enkelt. Hva med å bruke den?
I prosjektkatalogen din (men utenfor det syltetøy mappe), opprett en fil som heter app.js. Dette vil være en egen modul, så vi må bruke definere funksjon (gitt til oss av KravJS). Hvis du har brukt AMD før, vet du at definere funksjonen tar to parametere: rekkefølge av avhengigheter og modulfunksjon, som returnerer modulobjektet. Modulnavnet er hentet fra filbanen og navnet.
Så, her er en veldig grunnleggende modul:
Accentsconagua
define (['jquery'], funksjon ($) return init: function () $ ("# main"). tekst ("Bruke Jam");;); I avhengighetsarrangementet krever vi jQuery; vi trenger ikke å bruke en hel bane streng fordi require.js er konfigurert slik at bare "i det Metode som gjør litt jQuery magi.
La oss nå lage en index.html fil. Virkelig bare-bein:
Denne gangen bruker vi ikke definere funksjon, fordi vi ikke definerer en modul. Vi krever bare andre moduler til bruk, så vi bruker krever funksjon. Hvis du laster opp dette i nettleseren, bør du se at jQuery-koden i modulen blir utført.
Før vi ser på en mer avansert bruk av Jam, la oss dekke noen få grunnleggende kommandoer.
Vi har nettopp installert jQuery 1.8.0. Men la oss si at jQuery 1.8.1 kommer ut; hvordan går du om å oppdatere prosjektet ditt? Kunne ikke være enklere:
jam oppgradering # eller jam oppgradering jquery
Hvis du har installert en pakke, og da finner du ikke trenger den, kan du enkelt fjerne den med syltetøy fjerne :
syltetøy fjerne jquery
Du kan se en liste over alle oppdaterte pakker ved å kjøre syltetøy ls.
Det er grunnleggende om å bruke Jam. La oss se på noen mer avanserte bruksområder.
Package.json FilÅ bruke Jam i seg selv er flott, men det kan virkelig gjøre mer hvis du har en package.json fil. Hvis du har jobbet med Node mye, vil du nok være kjent med package.json filer: de brukes til å ta opp informasjon om moduler og katalogiseringsavhengigheter for apper.
La oss si at vi har en Express-app; For å få dette, installer Express med npm installer -g express og kjør deretter uttrykk myapp. Inne i MinApp mappe, standard package.json filen for en Express-app ser noe slik ut:
"navn": "søknadsnavn", "versjon": "0.0.1", "privat": sant, "skript": "start": "node app", "avhengigheter" : "3.0.0beta7", "jade": "*"
Jam har faktisk noen egenskaper som vi kan legge til i denne filen; Dette vil ikke bare gjøre det lettere å jobbe med Jam: det vil også gjøre det lettere for andre å raskt sette seg i prosjektet (kanskje etter kloning av Github). Vi starter med å legge til en syltetøy objektet bokstavelig som en rotseiendom:
// ... "jam":
Den første nyttige egenskapen er "packageDir"; Som du vet, er dette en mappe som heter syltetøy som standard. I en Express-app, må klientens JS-filer imidlertid gå i en statisk katalog, vanligvis kalt offentlig. Så, la oss gjøre dette:
"jam": "packageDir": "public / lib"
Nå, alle bibliotekene (og require.js) vil være i lib mappe, i offentlig. Men når vi ber om filene, ønsker vi ikke å be om det /public/lib/file.js: Vi ønsker å få /lib/file.js. Så, vi må sette baseURL:
"jam": "packageDir": "public / lib", "baseUrl": "public"
Nå kan vi sette avhengigheter i sin egen hash:
"jam": "packageDir": "public / lib", "baseUrl": "offentlig", "avhengigheter": "jquery": "1.8.0", "ryggraden": null
Dette sier at vi vil laste ned jQuery 1.8.0 og den nyeste versjonen av Backbone. Lagre og lukk nå package.json fil og la oss installere disse bibliotekene.
For å gjøre det, kjører du bare:
jam installasjon
Som du kan se, er både jQuery og Backbone installert. Legg også merke til at Underscore.js ble installert; det er fordi det er en avhengighet av ryggraden.
For å sikre at alt dette fungerer, la oss bygge en super-liten Express-app. Hvis du aldri har jobbet med Express før, ikke bekymre deg. Vi justerer bare en visning.
I MinApp mappe som Express genererte, åpne visninger / index.jade i din favoritt tekstredigerer. Fjern alt innholdet og erstatt det med dette:
#main script (src = "lib / require.js") skript krever (['app'], funksjon (App) // vi kommer tilbake til dette.);
Dette er Jade-kode, og ligner HAML. Det skal være ganske selvforklarende: den første linjen skaper en Vi legger litt JavaScript inn der i et øyeblikk. Først i "><%= name %> | "+" "> @<%= twitter %> Dette antar en liten kjennskap til Backbone, men det er ikke for vanskelig: Vi skaper bare en enkel modell, og en ny Vis klasse for å gjengi den modellen (Visningen gjengis i Nå, tilbake i vår Nå, tilbake på kommandolinjen, la oss installere Express-avhengighetene og starte serveren: Når serveren starter, gå over til localhost: 3000. Du bør se gjengitt visning: bare to lenker. Super-enkel, men vi vet at alle delene fungerer. Det neste trinnet når du bruker AMD, er å kompilere de mange skriptfilene du har lagt inn i en enkelt fil, som skal brukes i produksjonen. Igjen, Jam gjør dette utrolig enkelt. Bare kjør dette: Dette Nå, hvis du oppdaterer siden, vil du legge merke til at vi laster inn vår enkelt Her forteller vi det at inngangen ( Jeg bør merke at hvis du installerer en annen pakke via jam, kompileres dette Vel, til dette punktet, er Jam alt ganske flatt. Men det er selvfølgelig en fangst: hele ideen om Jam er avhengig av pakkene du vil være tilgjengelig, ikke sant? Så hvordan finner du disse pakkene? To veier. Først er det kommandolinjeverktøyet Hvis du foretrekker en GUI, kan du gå over til http://jamjs.org/packages for å bla gjennom de tilgjengelige. Hvis du er interessert i å utvikle pakker for å dele via Jam, bør du ikke finne det vanskelig. Ta en titt på pakningsutviklingsdokumentasjonen for detaljer om hva du skal gjøre. Det gjør en "litt tøff" beste praksis som friksjonsfri som mulig! AMD er en fin måte å organisere et stort JavaScript-program på, men det kan være litt av et problem å bruke. Som jeg sa, det er derfor jeg elsker Jam: det gjør en "litt tøff" beste praksis som friksjonsfri som mulig! Før, jeg ville ikke bruke AMD på grunn av det ekstra arbeidet; Nå, med Jam, er det lettere å bruke det enn å ikke. Så, hva synes du om Jam? Vil det gjøre AMD enklere for deg? Eller har du allerede en AMD-arbeidsflyt som du foretrekker? La oss høre det i kommentarene!hoved-. Da har vi to skriptkoder. offentlig mappe, opprett en app.js fil og sett dette inn i det:define (['jquery', 'ryggrad', 'understreking'], funksjon ($, BB, _) var site = new BB.Model (navn: "Nettuts +", url: "http: //net.tutsplus .com ", twitter:" envatowebdev "), SiteView = BB.View.extend (el:" #main ", mal: _.template (" div # main element). De viktige tingene å merke seg her er hvordan vi bruker alle tre avhengighetene våre i den første definere parameter. Da blir de parametrene til modulmodulen vår. På slutten returnerer vi et objekt med vår modell og View-klassen.visninger / index.jade fil, kan vi fylle ut innholdet av det krever anrop.krever (['app'], funksjon (App) nytt App.SiteView (modell: App.site). render (););
npm installere && npm start
Kompilere skriptene dine
syltetøy kompilere output.js
output.js filen vil ha innholdet i require.js så vel som alle våre biblioteker, så det kan erstatte require.js fil som vi for tiden drar inn i vår index.jade. Imidlertid foreslår Jam docs noe som gjør det enda enklere: overskrive det require.js. På denne måten trenger du ikke endre noe i HTML-filene dine eller maler. Så, jeg kjører dette:syltetøy kompilere offentlig / lib / require.js
require.js fil, og deretter bruke det for å få vår app.js fil. Men la oss ta et skritt videre: løpjam compile -i app public / lib / require.js
-Jeg) for samlingen skal være app modul. Jam vet å se i den offentlige mappen, på grunn av vår package.json innstillinger, og selvfølgelig vil filen være require.js filen blir overskrevet. Alt vil fortsatt fungere, akkurat som før; du må bare kompilere før du presser til produksjon igjen. Du kan tilbakestille filen på egenhånd ved å kjøre jam gjenoppbygging (Du kan også bruke denne kommandoen for å gjenoppbygge require.js fil etter endring av konfigurasjonsalternativer i package.json).
Finne pakker
jam søk. Bare legg til et søkeord, og du får en liste over tilgjengelige pakker som samsvarer med søket ditt. For eksempel, her er hva jeg får når jeg løper jam søk hendelser:
Konklusjon
