Share
Vi har alla varit där. Det finns tillfällen då du helt enkelt vill kasta lite JavaScript-kod upp och se hur det fungerar. Visst, du kan gå igenom krångel med:
Det verkar som ett hemskt mycket arbete, gör bara en enkel kodtestning. Tack och lov finns det verktyg som gör denna typ av arbete trivial.
I denna handledning vill jag gå över ett av mina favoritverktyg för interaktiv JavaScript-testning, JSBin.
Som jag nämnde tidigare behöver du i många fall bara testa en liten delmängd av JavaScript-kod. Att skapa en hel utvecklingsmiljö för ett sådant användningsfall ger i de flesta fall inte mycket mening om det inte finns ett tydligt beroende av hårdvara (till exempel WebRTC) eller beroende av API eller produkt från tredje part där du behöver backend tjänster för att få tillgång till information.
Vad JSBin erbjuder är ett webbläsarbaserat användargränssnitt där du kan skriva in:
... och få omedelbar feedback baserat på din kod. Dessutom kan du valfritt inkludera ett antal populära ramverk i din skärmkod, så att du kan utnyttja rammens möjligheter också. Den största fördelen är den realtids återkoppling du får från uppdateringarna du gör.
Låt oss titta lite längre på dessa verktyg.
JSBin skapades och underhålls aktivt av väl respekterad utvecklare Remy Sharp. Tanken att utveckla den kom från behovet av att samarbeta interaktivt med andra utvecklare för att felsöka JavaScript-kod. Sedan har den mattas till ett robust verktyg som:
JSBin är också öppen källkod under den liberala MIT-licensen som tillåter medlemmar i samhället att fritt bidra till det eller gaffla det för att skapa egna skräddarsydda lösningar.
JSBin erbjuder ett enkelt gränssnitt som bryter mot varje typ av kod i enskilda vertikala paneler.
Varje panel ger en mini-IDE som låter dig ange kod och få omedelbar återkoppling via Produktion panel. Till exempel, om jag lägger till följande kod i html panel:
Rey Bango
Jag ser genast det nya elementet och texten som återges i Produktion panel.
Naturligtvis kan du lägga till ett antal element i markeringen så att du kan skapa en sida snabbt och interaktivt. Att kunna ställa din markering är lika viktigt eftersom i vissa fall JavaScript är du som testar, är explicit utformad för att manipulera stilar och CSS-regler som tillämpas på dina element. Det är där CSS panelen kommer in. Den erbjuder full CSS-stilfunktion, så du kan layouta dina element så att de passar dina behov, även utnyttja CSS3-reglerna. Så lägger du till följande kod:
div färg: röd; typsnitt: 20px Tahoma, sans-serif; gräns: 1px solid svart; bredd: 100px; marginal: 30px; vaddering: 10px; transform: Rotera (15deg); -webkit-transform: rotate (15deg);
... ger följande resultat:
Koden har hittills varit enkel men jag måste betona att det viktiga här är inte kodens komplexitet, utan det faktum att du kan få omedelbar feedback. Jag kunde enkelt ta tag i mer inblandad kod, som den för CSS Transitions-demo på Mozilla Developer Network och lägga till det i JSBin för att ge en liknande effekt för min testkod:
div färg: röd; typsnitt: 20px Tahoma, sans-serif; gräns: 1px solid svart; bredd: 100px; marginal: 30px; vaddering: 10px; -moz-övergång: bredd 2s, höjd 2s, bakgrundsfärg 2s, -moz-transform 2s; -webkit-övergång: bredd 2s, höjd 2s, bakgrundsfärg 2s, -webkit-transformation 2s; -o-övergång: bredd 2s, höjd 2s, bakgrundsfärg 2s, -o-transformation 2s; övergång: bredd 2s, höjd 2s, bakgrundsfärg 2s, transform 2s; div: svävar bakgrundsfärg: #FFCCCC; bredd: 200px; höjd: 200px; -moz-transform: rotate (180 grader); -webkit-transform: rotate (180 grader); -o-transform: rotate (180 grader); transform: rotate (180 grader);
Så medan jag mer specifikt fokuserar på JavaScript-aspekten av JSBin, är det tydligt att webbutvecklare i allmänhet kan dra nytta av verktyget interaktiva naturen.
För mig är den största fördelen med JSBin förmågan att testa JavaScript snabbt. Jag kan piska upp snabb och smutsig kod som jag kan testa och justera på-flyga utan att behöva snurra upp en hel arbetsmiljö. Visst, de flesta webbläsare erbjuder utvecklingsverktyg som erbjuder en konsol där du kan skriva in snabba men de är ännu inte på en punkt där du kan testa interaktivt stora mängder kod, än mindre definiera kompletterande anpassad markering och styling till utgången.
JSBin s JavaScript panelen är där du kan definiera din anpassade JavaScript-kod. Som förväntat har du full tillgång till språket såväl som DOM API som stöds av webbläsaren. Det betyder att när jag skriver:
Accentsconagua
var myDiv = document.querySelector ("div"); myDiv.innerHTML = "Foo"; Det:
div element jag skapade i html panelResultaten är omedelbara, så att jag kan felsöka när jag skriver koden.
Att ha tillgång till plain ole JavaScript är bra men det är väldigt vanligt att använda ett JavaScript-verktygsbibliotek som jQuery eller ett fullblåst ramverk som Ember för att abstrakta komplexiteten i cross-browser-utveckling eller skapa appliknande upplevelser i webbläsaren. JSBin adresserar detta genom att låta dig inkludera de flesta populära biblioteken i din testkod.
Klicka på Lägg till bibliotek menyalternativ ger en mycket lång lista över stödda bibliotek som kan injiceras i ditt JSBin-projekt. Vad detta gör skapar en manus tagga i din kod som drar JavaScript-filen från en CDN. Val av "jQuery 2.0.2"från listan injicerar följande:
... medan du väljer Backbone läggs till följande:
Lägg märke till hur JSBin använder olika CDN-filer baserat på var filerna är tillgängliga. De flesta av de stora namnprojekten listas, inklusive:
… och många fler.
Lägga till i jQuery ger mig fullständig tillgång till alla bibliotekens utmärkta hjälparätt och -funktioner. Jag kan byta till att använda dess snygga, täta API för att komma åt DOM-element och ställa in värden i en snyggt kedjad kodlinje:
$ ("div") .text ("Foo"); Eller jag kan ta det lite längre och testa en Ajax-förfrågan till Flickrs API för att dra tillbaka JSON-data och göra bilder baserade på det:
(funktion () var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $ .getJSON (flickerAPI, taggar: "mount rainier", tagmode: "any ", format:" json ") .done (funktion (data) $ .each (data.items, function (i, item) $ ("![]()
() = Koden ovan skulle göra som följer:
Att ha full effekt av dessa bibliotek och ramar öppnar verkligen de testscenarier som du kan installera med JSBin.
Återigen är det här en lista över de mest populära biblioteken och ramarna som är tillgängliga och klart, vissa nischar kommer inte bara att finnas i listan. Om du behöver lägga till ett eget anpassat bibliotek, visar dokumentationen hur du kan lägga till det själv.
Jag tycker att JSBin är ovärderligt för min skrivbordsutveckling och när jag övergår till att fokusera på mobila enheter, är jag glad att se att jag kommer att kunna fortsätta använda den för att testa på dessa enheter också. Från version 3 har JSBin införlivat en funktion som heter "live rendering" som fungerar som en simulcast över flera anslutna enheter. Dessa enheter är inte explicit kopplade men istället utnyttja en specifik webbadress som gör det möjligt för dem att i huvudsak göra resultaten samtidigt. Du kan se den här funktionen i åtgärd i följande video.
En annan viktig funktion är möjligheten att skapa ditt eget JSBin-konto där du kan spara dina fack för framtida referens och delning. Registrering är enkel och du kan till och med utnyttja dina Github-referenser via Githubs OAuth-funktionalitet.
Den viktigaste fördelen att registrera är möjligheten att behålla en historia av de rutor du skapar så att du kan se dem senare.
För att verkligen få en känsla för den fulla bredden av funktionalitet som erbjuds av JSBin, uppmanar jag dig att gå till Remys Youtube-kanal för JSBin, där han har gjort ett bra jobb för att skapa handledningsvideor och utforska alla de utmärkta funktionerna i tjänsten. Vanliga frågor gör det också bra att svara på vanliga frågor du kanske har.
JSBin är ett av min mest värdefulla verktyg jag har hittat för JavaScript-utveckling. Faktumet att det är gratis och öppen källkod gör det till en no-brainer att lägga till någon verktygslåda. Och Remys fortsatta engagemang för tjänsten är lovvärt. Allt detta kombinerat gör det enkelt för mig att sprida ordet om ett så bra verktyg.
