Share
We zijn er allemaal geweest. Er zijn momenten waarop je simpelweg wat JavaScript-code wilt toevoegen en kijken hoe het werkt. Natuurlijk kun je het gedoe doorlopen van:
Dat lijkt heel veel werk, doe gewoon wat eenvoudige codetests. Gelukkig zijn er tools die dit soort werk triviaal maken.
In deze zelfstudie wil ik graag een van mijn favoriete tools voor het testen van interactieve JavaScripts, JSBin, bespreken.
Zoals ik eerder al zei, hoef je in veel gevallen slechts een kleine subset JavaScript-code te testen. Het opzetten van een hele ontwikkelomgeving voor zo'n use-case, in de meeste gevallen, heeft niet echt zin, tenzij er een duidelijke afhankelijkheid is van hardware (bijvoorbeeld WebRTC) of afhankelijk is van een API of product van een derde partij waar je dit nodig hebt backend-services om met succes toegang te krijgen tot informatie.
Wat JSBin biedt, is een browsergebaseerde gebruikersinterface waar u kunt invoeren:
... en ontvang onmiddellijke feedback op basis van uw code. Bovendien kunt u optioneel een willekeurig aantal populaire frameworks in uw code op het scherm opnemen, zodat u ook de mogelijkheden van het framework kunt benutten. Het grootste voordeel is de realtime feedback die u krijgt van de updates die u maakt.
Laten we deze tools een beetje nauwkeuriger bekijken.
JSBin is gemaakt en wordt actief onderhouden door de gerespecteerde ontwikkelaar Remy Sharp. Het idee om het te ontwikkelen, kwam voort uit de behoefte om interactief samen te werken met andere ontwikkelaars om JavaScript-code te debuggen. Het is inmiddels uitgegroeid tot een robuuste tool die:
JSBin is ook opensource met een licentie onder de liberale MIT-licentie waardoor leden van de gemeenschap er vrijelijk aan kunnen bijdragen of kunnen spitten om hun eigen aangepaste oplossingen te creëren.
JSBin biedt een eenvoudige gebruikersinterface die elk type code in individuele verticale panelen breekt.
Elk paneel biedt een mini-IDE waarmee u code kunt invoeren en directe feedback kunt ontvangen via de uitgang paneel. Als ik bijvoorbeeld de volgende code aan de HTML paneel:
Rey Bango
Ik zie het nieuwe element en de tekstweergave meteen in de uitgang paneel.
Natuurlijk kunt u een willekeurig aantal elementen aan de markup toevoegen, zodat u snel en interactief een pagina kunt maken. Het is ook belangrijk dat u uw markeringen kunt stylen, omdat in sommige gevallen het JavaScript dat u test, expliciet is ontworpen om stijlen en CSS-regels te manipuleren die op uw elementen worden toegepast. Dat is waar de CSS paneel komt binnen. Het biedt volledige CSS-stijl, zodat u uw elementen kunt indelen om aan uw behoeften te voldoen, en zelfs kunt profiteren van de CSS3-regels. Dus de volgende code toevoegen:
div kleur: rood; lettertype: 20px Tahoma, schreefloos; rand: 1px effen zwart; breedte: 100 px; marge: 30px; opvulling: 10px; transform: draaien (15deg); -webkit-transform: rotate (15deg);
... levert de volgende resultaten:
Tot dusverre was de code eenvoudig, maar ik moet benadrukken dat het belangrijkste hier niet de complexiteit van de code is, maar het feit dat je onmiddellijke feedback kunt ontvangen. Ik zou gemakkelijk meer betrokken code kunnen pakken, zoals die van de CSS Transitions-demo op het Mozilla-ontwikkelaarsnetwerk en die toevoegen aan JSBin om een vergelijkbaar effect voor mijn testcode te produceren:
div kleur: rood; lettertype: 20px Tahoma, schreefloos; rand: 1px effen zwart; breedte: 100 px; marge: 30px; opvulling: 10px; -moz-overgang: breedte 2s, hoogte 2s, achtergrondkleur 2s, -moz-transformatie 2s; -webkit-overgang: breedte 2s, hoogte 2s, achtergrondkleur 2s, -webkit-transform 2s; -o-overgang: breedte 2s, hoogte 2s, achtergrondkleur 2s, -o-transform 2s; overgang: breedte 2s, hoogte 2s, achtergrondkleur 2s, transformatie 2s; div: hover background-color: #FFCCCC; width: 200px; Hoogte: 200px; -moz-transform: rotate (180 graden); -webkit-transform: rotate (180 graden); -o-transform: rotate (180 graden); transform: rotate (180 graden);
Dus hoewel ik me specifieker richt op het JavaScript-aspect van JSBin, is het duidelijk dat webontwikkelaars in het algemeen kunnen profiteren van het interactieve karakter van de tool.
Voor mij is het belangrijkste voordeel van JSBin de mogelijkheid om JavaScript snel te testen. Ik kan snel en vuile code opkloppen die ik on-the-fly kan testen en aanpassen zonder dat ik een hele werkomgeving hoef te draaien. Natuurlijk bieden de meeste browsers ontwikkelaarstools die een console bieden waarin u snelfragmenten kunt invoeren, maar ze zijn nog niet op een punt waar u grote hoeveelheden code interactief kunt testen, laat staan complementaire aangepaste markup en styling kunt definiëren voor de uitvoer..
JSBin's JavaScript paneel is waar u uw aangepaste JavaScript-code kunt definiëren. Zoals verwacht hebt u volledige toegang tot de taal en de DOM-API die door de browser wordt ondersteund. Dit betekent dat wanneer ik schrijf:
Accentsconagua
var myDiv = document.querySelector ("div"); myDiv.innerHTML = "Foo"; het:
div element dat ik heb gemaakt in de HTML paneelDe resultaten zijn onmiddellijk, waardoor ik kan debuggen terwijl ik de code aan het schrijven ben.
Toegang hebben tot gewoon ole JavaScript is geweldig, maar het is heel gebruikelijk om een JavaScript-hulpprogramma's zoals jQuery of een volledig framework zoals Ember te gebruiken om de complexiteit van cross-browserontwikkeling te abstraheren of app-achtige ervaringen in de browser te creëren. JSBin lost dit op door u toe te staan de meeste populaire bibliotheken op te nemen in uw testcode.
Klik op de Bibliotheek toevoegen menu-optie biedt een zeer lange lijst met ondersteunde bibliotheken die kunnen worden geïnjecteerd in uw JSBin-project. Wat dit doet, creëert een script tag in uw code die het JavaScript-bestand van een CDN haalt. Selecteren "jQuery 2.0.2"uit de lijst injecteert het volgende:
... tijdens het selecteren van Backbone voegt het volgende toe:
Merk op hoe JSBin verschillende CDN's gebruikt op basis van waar de bestanden beschikbaar zijn. De meeste grote namenprojecten worden vermeld, waaronder:
… en nog veel meer.
Toevoegen in jQuery geeft me volledige toegang tot alle uitstekende hulpmethoden en -mogelijkheden van de bibliotheken. Ik kan overschakelen naar het gebruik van de mooie, beknopte API om toegang te krijgen tot DOM-elementen en waarden in te stellen in een keurig geketende coderegel:
$ ("div") .text ("Foo"); Of, ik kan het een beetje verder nemen en een Ajax-verzoek testen bij de Flickr-API om JSON-gegevens terug te halen en afbeeldingen op basis daarvan weer te geven:
(function () var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $ .getJSON (flickerAPI, tags: "mount rainier", tagmode: "any ", formaat:" json ") .done (functie (gegevens) $ .each (data.items, function (i, item) $ ("![]()
") .attr (" src ", item.media.m) .appendTo (" div "); if (i === 3) return false;););) (); De bovenstaande code wordt als volgt weergegeven:
Als u over de volledige kracht van deze bibliotheken en frameworks beschikt, opent u echt de testscenario's die u met JSBin kunt instellen.
Nogmaals, dit is een lijst met de meest populaire bibliotheken en frameworks die beschikbaar zijn en het is duidelijk dat sommige niche degenen gewoon niet in de lijst staan. Als u uw eigen aangepaste bibliotheek wilt toevoegen, laat de documentatie zien hoe u deze zelf kunt toevoegen.
Ik vind JSBin van onschatbare waarde voor mijn desktopontwikkeling en naarmate ik meer focus op mobiele apparaten, ben ik blij dat ik het ook kan blijven gebruiken om op die apparaten te testen. Vanaf versie drie heeft JSBin een functie opgenomen met de naam "live rendering" die fungeert als simulcast op meerdere aangesloten apparaten. Deze apparaten zijn niet expliciet verbonden, maar gebruiken in plaats daarvan een specifieke URL waarmee ze de resultaten op hetzelfde moment kunnen weergeven. Je kunt deze functie in actie zien in de volgende video.
Een andere belangrijke functie is de mogelijkheid om uw eigen JSBin-account te maken, waar u uw opslaglocaties kunt opslaan voor toekomstig gebruik en delen. Registratie is eenvoudig en u kunt zelfs uw Github-referenties gebruiken via de OAuth-functionaliteit van Github.
Het belangrijkste voordeel van registreren is het vermogen om een geschiedenis te bewaren van de bakken die u maakt, zodat u ze later opnieuw kunt bekijken.
Om echt een indruk te krijgen van de volledige functionaliteit van JSBin, spoor ik je aan om naar Remy's YouTube-kanaal voor JSBin te gaan, waar hij een geweldige klus heeft gedaan door instructievideo's te maken waarin alle uitstekende functies van de service worden verkend. De FAQ beantwoordt ook uitstekend werk aan het beantwoorden van veelgestelde vragen die u heeft.
JSBin is een van mijn meest waardevolle tools die ik heb gevonden voor JavaScript-ontwikkeling. Het feit dat het gratis en open source is, maakt het een goed idee om aan elke toolkit toe te voegen. En de voortdurende inzet van Remy voor de service is lovenswaardig. Dit alles gecombineerd, maakt het gemakkelijk voor mij om het woord over zo'n geweldige tool te verspreiden.
