Share
Toți am fost acolo. Există momente în care pur și simplu doriți să aruncați niște cod JavaScript și să vedeți cum funcționează. Sigur, ați putea trece prin hassle de:
Se pare că o grămadă de muncă face doar niște teste de cod simple. Din fericire, există instrumente care fac acest tip de muncă trivial.
În acest tutorial, aș dori să trec peste unul dintre instrumentele mele preferate pentru testarea JavaScript interactivă, JSBin.
După cum am menționat anterior, în multe cazuri pur și simplu trebuie să testați un subset mic de cod JavaScript. Configurarea unui întreg mediu de dezvoltare pentru un astfel de caz de utilizare, în majoritatea cazurilor, nu are prea mult sens dacă nu există o dependență clară de hardware (de exemplu, WebRTC) sau dependența de un API terț sau de un produs de care aveți nevoie backend pentru a accesa cu succes informații.
Ceea ce oferă JSBin este o interfață de utilizator bazată pe browser în care puteți introduce:
... și obțineți feedback imediat pe baza codului dvs. În plus, puteți include opțional orice număr de cadre populare în codul de pe ecran, permițându-vă să influențați capabilitățile cadrului. Principalul beneficiu este feedback-ul în timp real obținut de la actualizările pe care le faceți.
Să ne uităm la aceste instrumente ceva mai îndeaproape.
JSBin a fost creat și este întreținut în mod activ de dezvoltatorul bine respectat Remy Sharp. Ideea de a dezvolta aceasta a venit din necesitatea de a colabora interactiv cu alți dezvoltatori pentru a depana codul JavaScript. De atunci sa maturizat într-o unealtă robustă care:
JSBin este licențiat, de asemenea, sub licența liberală MIT, permițând membrilor comunității să contribuie în mod liber la aceasta sau să o furcă să-și creeze propriile soluții personalizate.
JSBin oferă un interfață directă care rupe fiecare tip de cod în panouri individuale verticale.
Fiecare panou oferă un mini-IDE care vă permite să introduceți cod și să primiți feedback imediat prin intermediul producție panou. De exemplu, dacă adaug codul următor HTML panou:
Rey Bango
Voi vedea imediat noul element și renderul textului în producție panou.
Desigur, puteți adăuga orice număr de elemente la marcare, permițându-vă să creați o pagină rapid și interactiv. Fiind capabil să stilul marcajului dvs. este la fel de important, deoarece în unele cazuri, JavaScript-ul pe care îl testați este conceput în mod explicit pentru a manipula stilurile și regulile CSS aplicate elementelor dvs. Aici este locul CSS panoul vine înăuntru. Acesta oferă capacitate completă de stil CSS, astfel încât să puteți structura elementele dvs. pentru a se potrivi cu nevoile dvs., chiar profitând de regulile CSS3. Prin urmare, adăugând următorul cod:
div culoare: roșu; font: 20px Tahoma, sans-serif; frontieră: 1px solid negru; lățime: 100px; margine: 30px; padding: 10px; transforma: roti (15deg); -webkit-transform: rotate (15deg);
... furnizează următoarele rezultate:
Până în prezent, codul a fost simplu, dar trebuie să subliniez că lucrul important aici nu este complexitatea codului, ci faptul că sunteți în stare să primiți feedback imediat. Aș putea să apuc cu ușurință codul implicat mai mult, ca cel al demo-ului CSS Transitions pe rețeaua Mozilla Developer Network și să adaug că în JSBin să producă un efect similar pentru codul meu de testare:
div culoare: roșu; font: 20px Tahoma, sans-serif; frontieră: 1px solid negru; lățime: 100px; margine: 30px; padding: 10px; -moz-tranziție: lățimea 2s, înălțimea 2s, culoarea de fundal 2s, -moz-transform 2s; -webkit-transition: lățimea 2s, înălțimea 2s, culoarea de fundal 2s, -webkit-transform 2s; -o-tranziție: lățimea 2s, înălțimea 2s, culoarea de fundal 2s, -o-transformarea 2s; tranziție: lățimea 2s, înălțimea 2s, culoarea de fundal 2s, transformarea 2s; div: mutați background-color: #FFCCCC; lățime: 200px; height: 200px; -moz-transform: rotate (180deg); -webkit-transform: rotate (180deg); o- transformata: rotate (180deg); transforma: rotate (180deg);
Deci, în timp ce mă concentrez mai mult asupra aspectului JavaScript al JSBin, este clar că dezvoltatorii web, în general, pot beneficia de natura interactivă a instrumentului.
Pentru mine, beneficiul principal al JSBin este capacitatea de a testa JavaScript rapid. Sunt capabil să bici cod rapid și murdar pe care pot să-l testez și să-l ajusesc fără să fie nevoit să întoarcă un întreg mediu de lucru. Sigur, majoritatea browserelor furnizează instrumente pentru dezvoltatori care oferă o consolă unde puteți introduce fragmente rapide, dar acestea nu sunt încă într-un punct în care puteți testa interactiv cantități mari de cod, să nu mai vorbim de definirea marcajului și stilului personalizat complementar la ieșire.
lui JSBin JavaScript este locul în care puteți defini codul JavaScript personalizat. După cum era de așteptat, aveți acces deplin la limbaj, precum și la DOM API-ul acceptat de browser. Aceasta înseamnă că atunci când scriu:
Accentsconagua
var myDiv = document.querySelector ("div"); myDiv.innerHTML = "Foo"; aceasta:
div elementul pe care l - am creat în HTML panouRezultatele sunt imediate, permițându-mi să depan în timp ce scriu codul.
Având acces la un câmp simplu JavaScript este minunat, dar este foarte obișnuit să folosiți o bibliotecă de utilități JavaScript, cum ar fi jQuery sau un cadru complet cum ar fi Ember, pentru a rezuma complexitatea dezvoltării încrucișate a browserului sau pentru a crea experiențe asemănătoare aplicațiilor în browser. JSBin abordează acest lucru, permițându-vă să includeți majoritatea bibliotecilor populare în codul dvs. de testare.
Dând clic pe Adăugați bibliotecă opțiunea de meniu oferă o listă foarte lungă de biblioteci acceptate care pot fi injectate în proiectul dvs. JSBin. Ceea ce face acest lucru este crearea unui scenariu eticheta în codul dvs. care trage fișierul JavaScript dintr-un CDN. Selectând "jQuery 2.0.2"din listă injectează următoarele:
... în timp ce selectați Backbone adaugă următoarele:
Observați cum JSBin utilizează CDN-uri diferite pe baza locului în care sunt disponibile fișierele. Cele mai multe dintre proiectele de nume mari sunt listate, incluzând:
… si multe altele.
Adăugarea în jQuery îmi oferă acces deplin la toate metodele și capabilitățile excelente ale bibliotecilor. Pot trece la folosirea API-ului frumos, terse pentru a accesa elementele DOM și a stabili valorile într-o singură linie de cod bine legat:
$ ("div") .text ("Foo"); Sau, pot să o iau și mai mult și să testez o solicitare Ajax la API-ul Flickr pentru a trage înapoi datele JSON și pentru a face imagini bazate pe acesta:
(funcția () var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $ .getJSON (flickerAPI, tags: "mount rainier", tagmode: "orice ", formatul:" json ") .done (funcția (date) $ .each (date.items, funcția (i, item) $ ("![]()
") .attr (" src ", item.media.m) .appendTo (" div "); dacă (i === 3) return false;););) (); Codul de mai sus se va face după cum urmează:
Având puterea deplină a acestor biblioteci și cadre deschide cu adevărat scenariile de testare pe care le puteți configura cu JSBin.
Din nou, aceasta este o listă cu cele mai populare biblioteci și cadre disponibile și în mod clar, unele nișe doar nu vor fi pe listă. Dacă aveți nevoie să adăugați propria dvs. bibliotecă particularizată, documentația arată cum o puteți adăuga în propriul dvs..
Consider că JSBin este de neprețuit pentru dezvoltarea desktop-ului meu și că trec la focalizarea pe dispozitivele mobile, mă bucur să văd că o să pot folosi în continuare pentru a testa și pe acele dispozitive. Începând cu versiunea a treia, JSBin a încorporat o caracteristică numită "rendering live", care acționează ca un simulcast pe mai multe dispozitive conectate. Aceste dispozitive nu sunt conectate în mod explicit, ci, în schimb, utilizează o anumită adresă URL, care le permite să realizeze în mod esențial rezultatele în același timp. Puteți vedea această funcție în acțiune în următorul videoclip.
O altă caracteristică importantă este capacitatea de a vă crea propriul cont JSBin, unde puteți salva containerele pentru referințe viitoare și pentru partajare. Înregistrarea este simplă și puteți chiar să vă valorificați acreditările Github prin funcția OAuth a lui Github.
Beneficiul principal pentru înregistrare este capacitatea de a păstra o istorie a containerelor pe care le creați, astfel încât să le puteți revizui ulterior.
Pentru a vă simți într-adevăr să vă simțiți pe deplin mulțumită de funcționalitatea oferită de JSBin, vă recomand să mergeți la canalul Youtube al lui Remy pentru JSBin, unde a făcut o lucrare de creare a videoclipurilor tutorial explorând toate caracteristicile excelente ale serviciului. Întrebările frecvente fac, de asemenea, o treabă excelentă de a răspunde la întrebările frecvente pe care le-ați putea avea.
JSBin este unul dintre cele mai valoroase instrumente pe care le-am găsit pentru dezvoltarea JavaScript. Faptul că acesta este gratuit și open source face ca acesta să nu fie un argument pentru a adăuga la orice set de instrumente. Și angajamentul constant al lui Remy față de serviciu este lăudabil. Toate astea combinate, îmi fac ușor să răspândesc cuvântul despre un astfel de instrument excelent.
