jsFiddle: En online lekeplass for JavaScript, HTML, CSS

Hver utvikler har vært i en situasjon der du har kode eller et design som du trenger for å teste raskt og muligens dele med andre. jsFiddle er den perfekte løsningen; det gir et tilpasset miljø (basert på brukervalg) for å teste (eller fikle med) JavaScript-, HTML- og CSS-koden rett i nettleseren. En rask omvisning av jsFiddle vil gi deg en bedre forståelse av hva den gir og hvorfor du bør bruke den.

JsFiddle-miljøet

Å komme i gang med jsFiddle er like raskt som å skrive adressen i nettleseren. Når nettstedet lastes inn, får du presentert en side delt inn i forskjellige seksjoner. Den venstre delen av siden er menyområdet der du konfigurerer jsFiddle-miljøet. Hoveddelen av nettstedet (til høyre) er delt inn i fire områder:

  • CSS: Angi CSS som skal brukes på HTML-en som brukes i testene dine. Det er plassert mellom elementer i overskriftsdelen av siden.
  • HTML: Dette området lar deg oppgi HTML som skal brukes i testene dine. Som standard vises det mellom elementene på siden med mindre det overstyres av alternativer i venstre rute. Det fungerer direkte med CSS og JavaScript som er lagt inn på de respektive områdene. JavaScript som er lagt inn i elementer, kan også legges inn her.
  • JavaScript: JavaScript-kilde er lagt inn i dette området. Det vises i taggene i overskriftsdelen av siden. Alternativene til venstre lar deg velge hvilke biblioteker / rammer som skal brukes, så koden i denne delen trenger ikke å inkludere disse.
  • Output: Resultatene av å utføre CSS, HTML og JavaScript lagt inn i seksjonene på siden.
Figur A viser jsFiddle lastet i Internet Explorer 9 med tomme koderuter. Figur A

Standardgrensesnittet til jsFiddle-nettstedet (Klikk på bildet for å forstørre.)

Jobber med jsFiddle-grensesnittet

Å sette jsFiddle å bruke er så enkelt som å laste inn nettstedet og legge inn kode i de aktuelle områdene på siden. JsFiddle-grensesnittet gir mange funksjoner som hjelper deg med å utvikle deg. Øverst på siden inneholder en linje med knapper for å bruke noen av disse funksjonene. Disse knappene inkluderer:

  • Kjør: Utfører koden som er lagt inn i områdene på siden og viser resultatene i outputområdet.
  • Gaffel: Oppretter et nytt eksempel ved å bruke gjeldende kode som base.
  • Reset: Rydder alle områdene i jsFiddle-grensesnittet.
  • TidyUp: Renser JavaScript-koden din ved å innrykke kodeblokker.
  • JSLint: Bruker JSLint-verktøyet for å utføre statisk kodeanalyse av koden i JavaScript-området på siden.
  • Del: Lar deg dele kode fra jsFiddle-siden med andre brukere. Alternativene inkluderer Facebook og Twitter, det og gir en lenke og koden for å legge dem inn på et nettsted (for eksempel i en blogg).

Den venstre ruten i jsFiddle-grensesnittet lar deg konfigurere utviklingsmiljøet. Følgende liste gir et utvalg av tilgjengelige funksjoner:

  • JavaScript-plassering: Den første rullegardinmenyen definerer hvor JavaScript-koden skal plasseres og kjøres. Standardinnstillingen er onLoad, noe som betyr at den kjøres via nettsidens onLoad-hendelse. Andre alternativer inkluderer å plassere den i sidens overskrift eller kropp.
  • JavaScript-bibliotek: Det andre rullegardinmenyen lar deg bruke et av forskjellige JavaScript-rammer, som inkluderer MooTools, jQuery, Prototype, YUI og mye mer. Den støtter også de forskjellige versjonene av disse verktøyene, så testalternativene er uendelige. Dette er en flott funksjon fordi du kan leke med disse bibliotekene uten å laste ned og sette opp ditt eget miljø.
  • Paneler: jsFiddle-grensesnittet inkluderer de tre kodeområdene, men det er alternativer for CSS- og JavaScript-områdene. Du kan velge å bruke SCSS i stedet for CSS og bruke CoffeeScript i stedet for JavaScript.
  • Info: Skriv inn en tittel og beskrivelse som er viktig når du lagrer / deler. I tillegg kan du spesifisere karosserikoden og DTD som er brukt.
  • Eksempler: Dette valget gjør det enkelt å komme i gang med verktøyet, slik at du kan få en følelse av funksjonene og hvordan det kan brukes.
De mange funksjonene som tilbys av jsFiddle-grensesnittet, gjør det relevant for nesten alle webapplikasjonsutviklere. Figur B viser et av eksemplene - Delayed Mouse Tracking - som bruker Processing.js-biblioteket. Ytterligere HTML og CSS er lagt til. Figur B

Bruk ett av eksemplene som er tilgjengelige i jsFiddle (Klikk på bildet for å forstørre.)

Nett lekeplass

JsFiddle-siden merker det som en lekeplass på nettet, og jeg kan ikke tenke på en bedre tagline fordi:

  • det lar utviklere fikle med de tre kjerneelementene i webutvikling (CSS, JavaScript og HTML);
  • den omfavner det sosiale elementet på nettet ved å gjøre det enkelt å dele; og
  • det virker som et perfekt sted å svare på de irriterende utviklingsspørsmålene og raskt dele resultatene - det er ikke nødvendig å lage skrapprosjekter eller filer.

Dette er et vert program, slik at ytelsen kan forringes under maksimal bruk. Dette har ikke skapt problemer for meg, men forhåpentligvis vil flere backend-ressurser (aka servere) være tilgjengelige etter hvert som jsFiddle-bruken øker. Med jsFiddle-bloggen kan du følge med på disse problemene.

Ta en titt på jsFiddle i dag, så ser du raskt kraften til rask prototyping og testing.

Hold dine tekniske ferdigheter oppdatert ved å registrere deg på TechRepublics gratis nyhetsbrev om Software Engineer, levert hver tirsdag.

© Copyright 2020 | mobilegn.com