Share
Vi har alle vært der. Det er tider når du bare vil kaste litt JavaScript-kode opp og se hvordan det fungerer. Jo, du kan gå gjennom bryet med:
Det virker som en forferdelig masse arbeid, bare gjør noen enkle kodetesting. Heldigvis finnes det verktøy som gjør denne typen arbeid trivial.
I denne opplæringen vil jeg gjerne gå over et av mine favorittverktøy for interaktiv JavaScript-testing, JSBin.
Som nevnt tidligere, må du i mange tilfeller bare teste et lite undersett med JavaScript-kode. Å sette opp et helt utviklingsmiljø for en slik brukstilstand gjør i de fleste tilfeller ikke så mye fornuft med mindre det er en klar avhengighet av maskinvare (for eksempel WebRTC) eller avhengighet av en tredjeparts API eller et produkt der du trenger backend tjenester for å få tilgang til informasjon.
Hva JSBin tilbyr er et nettleserbasert brukergrensesnitt der du kan skrive inn:
... og få umiddelbar tilbakemelding basert på koden din. I tillegg kan du eventuelt inkludere et hvilket som helst antall populære rammer i skjermkoden din, slik at du kan utnytte rammens evner også. Hovedfordelen er sanntids tilbakemelding du får fra oppdateringene du lager.
La oss se nærmere på disse verktøyene.
JSBin ble opprettet og vedlikeholdes aktivt av respektert utvikler Remy Sharp. Ideen om å utvikle den kom fra behovet for å samarbeide interaktivt med andre utviklere for å feilsøke JavaScript-kode. Det har siden blitt modnet til et robust verktøy som:
JSBin er også åpen kildekode lisensiert under den liberale MIT-lisensen som tillater fellesskapsmedlemmer å bidra fritt til det eller forkjøpe det for å skape egne tilpassede løsninger.
JSBin tilbyr et greit brukergrensesnitt som bryter hver type kode i individuelle vertikale paneler.
Hvert panel gir en mini-IDE som lar deg taste inn kode og motta umiddelbar tilbakemelding via Produksjon panel. For eksempel, hvis jeg legger til følgende kode i HTML panel:
Rey Bango
Jeg ser umiddelbart det nye elementet og teksten gjengis i Produksjon panel.
Selvfølgelig kan du legge til et hvilket som helst antall elementer til markeringen, slik at du kan lage en side raskt og interaktivt. Å være i stand til å utforme oppslaget ditt, er like viktig siden i enkelte tilfeller JavaScript er du testet, er eksplisitt utformet for å manipulere stiler og CSS-regler som brukes på elementene dine. Det er der CSS panelet kommer inn. Det tilbyr full CSS-stilskapasitet, slik at du kan opprette elementene dine slik at de passer til dine behov, til og med utnytte CSS3-regler. Så legger du til følgende kode:
div farge: rød; font: 20px Tahoma, sans-serif; grense: 1 px solid svart; bredde: 100px; margin: 30px; polstring: 10px; transform: rotere (15deg); -webkit-transform: roter (15deg);
... gir følgende resultater:
Så langt har koden vært enkel, men jeg må understreke at det viktigste her er ikke kompleksiteten til koden, men det faktum at du er i stand til å motta umiddelbar tilbakemelding. Jeg kunne lett gripe mer involvert kode, som for CSS Transitions-demoen på Mozilla Developer Network, og legge til det i JSBin for å produsere en lignende effekt for testkoden min:
div farge: rød; font: 20px Tahoma, sans-serif; grense: 1 px solid svart; bredde: 100px; margin: 30px; polstring: 10px; -moz-overgang: bredde 2s, høyde 2s, bakgrunnsfarge 2s, -moz-transformere 2s; -webkit-overgang: bredde 2s, høyde 2s, bakgrunnsfarge 2s, -webkit-transformere 2s; -o-overgang: bredde 2s, høyde 2s, bakgrunnsfarge 2s, -o-transformere 2s; overgang: bredde 2s, høyde 2s, bakgrunnsfarge 2s, transformere 2s; div: svever bakgrunnsfarge: #FFCCCC; bredde: 200px; høyde: 200px; -moz-transform: roter (180 grader); -webkit-transform: roter (180 grader); -o-transform: roter (180 grader); transform: roter (180 grader);
Så mens jeg er mer spesifikt fokusert på JavaScript-aspektet av JSBin, er det klart at webutviklere generelt kan ha nytte av verktøyets interaktive natur.
For meg er den største fordelen med JSBin muligheten til å teste JavaScript raskt. Jeg er i stand til å piske opp rask og skitten kode som jeg kan teste og justere på fly uten å måtte spinne opp et helt arbeidsmiljø. Visst, de fleste nettlesere gir utviklerverktøy som tilbyr en konsoll hvor du kan skrive inn raske utklipp, men de er ennå ikke på et punkt der du kan teste interaktive tester av store mengder kode, enn si definere komplementær tilpasset oppretting og styling til utgangen.
JSBin s Javascript panelet er der du kan definere din egendefinerte JavaScript-kode. Som forventet har du full tilgang til språket så vel som DOM API støttet av nettleseren. Dette betyr at når jeg skriver:
Accentsconagua
var myDiv = document.querySelector ("div"); myDiv.innerHTML = "Foo"; den:
div element jeg opprettet i HTML panelResultatene er umiddelbare, slik at jeg kan feilsøke når jeg skriver koden.
Å ha tilgang til plain ole JavaScript er flott, men det er veldig vanlig å bruke et JavaScript-verktøybibliotek som jQuery eller et fullverdig rammeverk som Ember, for å abstrahere kompleksiteten i nettleserutvikling eller opprette app-lignende opplevelser i nettleseren. JSBin adresserer dette ved å la deg inkludere de fleste av de populære biblioteker i testkoden din.
Klikk på Legg til bibliotek menyalternativet gir en veldig lang liste over støttede biblioteker som kan injiseres i JSBin-prosjektet ditt. Hva dette gjør skaper en manus merk i koden din som trekker JavaScript-filen fra en CDN. Velger "jQuery 2.0.2"fra listen injiserer følgende:
... mens du velger Backbone legger du til følgende:
Legg merke til hvordan JSBin bruker forskjellige CDN-er basert på hvor filene er tilgjengelige. De fleste av de store navnet prosjekter er oppført, inkludert:
… og mange flere.
Å legge til i jQuery gir meg full tilgang til alle bibliotekets gode hjelpemetoder og evner. Jeg kan bytte til å bruke sin fine, tverrgående API for å få tilgang til DOM-elementer og sette verdier i en pent kalt linje med kode:
$ ("div") .text ("Foo"); Eller jeg kan ta det litt videre og teste ut en Ajax-forespørsel til Flickrs API for å trekke tilbake JSON-data og gjengi bilder basert på det:
(funksjon () var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $ .getJSON (flickerAPI, tagger: "mount rainier", tagmode: "any ", format:" json ") .done (funksjon (data) $ .each (data.items, function (i, item) $ ("![]()
") .attr (" src ", item.media.m) .appendTo (" div "); hvis (i === 3) return false;;;) Koden ovenfor vil gjengi som følger:
Å ha full kraft i disse bibliotekene og rammene åpner virkelig opp testscenariene som du kan sette opp med JSBin.
Igjen, dette er en liste over de mest populære bibliotekene og rammene som er tilgjengelige, og tydeligvis vil noen nisjer bare ikke være på listen. Hvis du trenger å legge til ditt eget tilpassede bibliotek, viser dokumentasjonen hvordan du kan legge det til i deg selv.
Jeg finner JSBin uvurderlig for min desktop utvikling, og når jeg skifter til å fokusere på mobile enheter, er jeg glad for at jeg kan fortsette å bruke den til å teste på disse enhetene også. Fra versjon tre har JSBin innlemmet en funksjon kalt "live rendering" som fungerer som en simulcast over flere tilkoblede enheter. Disse enhetene er ikke eksplisitt koblet, men bruker i stedet en bestemt nettadresse som gjør at de i hovedsak kan gjøre resultatene samtidig. Du kan se denne funksjonen i bruk i følgende video.
En annen viktig funksjon er muligheten til å lage din egen JSBin-konto, hvor du kan lagre skuffene dine for fremtidig referanse og deling. Registrering er enkel og du kan til og med utnytte Github-legitimasjonene dine via Githubs OAuth-funksjonalitet.
Nøkkelen til å registrere er evnen til å beholde en historie av skuffene du lager, slik at du kan se dem senere.
For å virkelig få en følelse for den fulle bredden av funksjonalitet som tilbys av JSBin, oppfordrer jeg deg til å gå til Remy's Youtube-kanal for JSBin, hvor han har gjort en opptatt jobb med å lage opplæringsvideoer som utforsker alle de utmerkede funksjonene i tjenesten. Vanlige spørsmål gjør også en god jobb med å svare på vanlige spørsmål du måtte ha.
JSBin er et av mine mest verdifulle verktøy jeg har funnet for JavaScript-utvikling. Det faktum at det er gratis og åpen kildekode gjør det til en no-brainer å legge til noen verktøysett. Og Remys fortsatte engasjement for tjenesten er prisverdig. Alt dette kombineres, gjør det enkelt for meg å spre ordet om et så bra verktøy.
