Share
Das haben wir alle schon durchgemacht. Es gibt Zeiten, in denen Sie einfach etwas JavaScript-Code werfen und sehen möchten, wie es funktioniert. Sicher, Sie könnten den Ärger durchmachen:
Das scheint eine Menge Arbeit zu sein, tun Sie einfach ein paar einfache Code-Tests. Zum Glück gibt es Werkzeuge, die diese Art von Arbeit trivial machen.
In diesem Lernprogramm möchte ich eines meiner Lieblingswerkzeuge für interaktives JavaScript testen, JSBin.
Wie bereits erwähnt, müssen Sie in vielen Fällen lediglich eine kleine Teilmenge von JavaScript-Code testen. Die Einrichtung einer gesamten Entwicklungsumgebung für einen solchen Anwendungsfall ist in den meisten Fällen nicht sehr sinnvoll, es sei denn, es besteht eine eindeutige Abhängigkeit von Hardware (z. B. WebRTC) oder die Abhängigkeit von einer API oder einem Produkt eines Drittanbieters, wo Sie dies benötigen Backend-Services, um erfolgreich auf Informationen zuzugreifen.
Was JSBin anbietet, ist eine browserbasierte Benutzeroberfläche, in die Sie Folgendes eingeben können:
… Und erhalten Sie sofortiges Feedback basierend auf Ihrem Code. Darüber hinaus können Sie beliebig viele beliebte Frameworks in Ihren Bildschirmcode integrieren, sodass Sie auch die Funktionen des Frameworks nutzen können. Der Hauptvorteil ist das Echtzeit-Feedback, das Sie von den Aktualisierungen erhalten, die Sie vornehmen.
Sehen wir uns diese Tools etwas genauer an.
JSBin wurde von dem angesehenen Entwickler Remy Sharp erstellt und wird von diesem laufend gewartet. Die Idee zur Entwicklung entstand aus der Notwendigkeit, interaktiv mit anderen Entwicklern zusammenzuarbeiten, um JavaScript-Code zu debuggen. Es hat sich seitdem zu einem robusten Werkzeug entwickelt, das:
JSBin ist auch Open Source-Lizenz unter der liberalen MIT-Lizenz, mit der Community-Mitglieder frei dazu beitragen oder eigene eigene Lösungen entwickeln können.
JSBin bietet eine einfache Benutzeroberfläche, die jeden Codetyp in einzelne vertikale Panels unterteilt.
Jedes Panel verfügt über eine Mini-IDE, mit der Sie Code eingeben und sofort über das System eine Rückmeldung erhalten können Ausgabe Panel. Zum Beispiel, wenn ich den folgenden Code einfüge HTML Panel:
Rey Bango
Ich sehe sofort das neue Element und den Text in der Ausgabe Panel.
Natürlich können Sie dem Markup eine beliebige Anzahl von Elementen hinzufügen, sodass Sie eine Seite schnell und interaktiv erstellen können. Die Möglichkeit, Ihre Markierungen zu stylen, ist gleichermaßen wichtig, da das von Ihnen getestete JavaScript in einigen Fällen explizit dazu bestimmt ist, Stile und CSS-Regeln zu ändern, die auf Ihre Elemente angewendet werden. Dort ist das CSS Das Panel ist im Lieferumfang enthalten. Es bietet volle CSS-Style-Funktion, sodass Sie Ihre Elemente an Ihre Bedürfnisse anpassen und sogar die CSS3-Regeln nutzen können. So fügen Sie den folgenden Code hinzu:
div Farbe: Rot; Schrift: 20px Tahoma, serifenlos; Rand: 1px durchgehend schwarz; Breite: 100px; Marge: 30px; Polsterung: 10px; verwandeln: drehen (15 Grad); -webkit-transform: drehen (15 Grad);
… Liefert folgende Ergebnisse:
Bisher war der Code einfach, aber ich muss betonen, dass hier nicht die Komplexität des Codes wichtig ist, sondern die Tatsache, dass Sie sofort Feedback erhalten können. Ich könnte leicht mehr Code einbinden, wie den des CSS Transitions-Demos im Mozilla Developer Network, und dies in JSBin einfügen, um einen ähnlichen Effekt für meinen Testcode zu erzielen:
div Farbe: Rot; Schrift: 20px Tahoma, serifenlos; Rand: 1px durchgehend schwarz; Breite: 100px; Marge: 30px; Polsterung: 10px; -moz-Übergang: Breite 2s, Höhe 2s, Hintergrundfarbe 2s, -moz-transform 2s; -Webkit-Übergang: Breite 2s, Höhe 2s, Hintergrundfarbe 2s, -webkit-transform 2s; -o-Übergang: Breite 2s, Höhe 2s, Hintergrundfarbe 2s, -o-transform 2s; Übergang: Breite 2s, Höhe 2s, Hintergrundfarbe 2s, Transformation 2s; div: hover Hintergrundfarbe: #FFCCCC; Breite: 200px; Höhe: 200px; -Moz-Transformation: drehen (180 Grad); -webkit-transform: drehen (180 Grad); -o-transform: drehen (180 Grad); verwandeln: drehen (180 Grad);
Obwohl ich mich mehr auf den JavaScript-Aspekt von JSBin konzentriere, ist klar, dass Webentwickler im Allgemeinen von der interaktiven Natur des Tools profitieren können.
Für mich ist der Hauptvorteil von JSBin die Möglichkeit, JavaScript schnell zu testen. Ich bin in der Lage, schnellen und schmutzigen Code zu erstellen, den ich direkt testen und anpassen kann, ohne die gesamte Arbeitsumgebung hochfahren zu müssen. Sicher, die meisten Browser bieten Entwicklertools, die eine Konsole bieten, in die Sie schnelle Ausschnitte eingeben können, aber noch nicht an einem Punkt sind, an dem Sie interaktiv große Mengen an Code testen können, ganz zu schweigen von der Erstellung komplementärer benutzerdefinierter Markierungen und Formatierungen.
JSBins JavaScript In diesem Fenster können Sie Ihren benutzerdefinierten JavaScript-Code definieren. Wie erwartet haben Sie vollen Zugriff auf die Sprache sowie auf die vom Browser unterstützte DOM-API. Das bedeutet, wenn ich schreibe:
Accentsconagua
var myDiv = document.querySelector ("div"); myDiv.innerHTML = "Foo"; es:
div Element, das ich in erstellt habe HTML PanelDie Ergebnisse sind sofort verfügbar, sodass ich beim Schreiben des Codes debuggen kann.
Der Zugriff auf einfaches Ole-JavaScript ist großartig, aber es ist üblich, eine JavaScript-Hilfsprogrammbibliothek wie jQuery oder ein ausgewachsenes Framework wie Ember zu verwenden, um die Komplexität der Cross-Browser-Entwicklung zu abstrahieren oder App-ähnliche Erlebnisse im Browser zu erstellen. JSBin behebt dies, indem Sie die meisten gängigen Bibliotheken in Ihren Testcode aufnehmen können.
Klicken Sie auf die Bibliothek hinzufügen Die Menüoption enthält eine sehr lange Liste der unterstützten Bibliotheken, die in Ihr JSBin-Projekt eingefügt werden können. Was dies bewirkt, ist ein Skript Tag in Ihrem Code, der die JavaScript-Datei von einem CDN abruft. Auswählen "jQuery 2.0.2"aus der Liste spritzt folgendes ein:
… Bei der Auswahl von Backbone wird Folgendes hinzugefügt:
Beachten Sie, wie JSBin verschiedene CDNs verwendet, je nachdem, wo die Dateien verfügbar sind. Die meisten namhaften Projekte werden aufgelistet, darunter:
… und viele mehr.
Durch das Hinzufügen in jQuery haben Sie vollen Zugriff auf die hervorragenden Hilfsmethoden und -funktionen der Bibliotheken. Ich kann die nette, knappe API verwenden, um auf DOM-Elemente zuzugreifen und Werte in einer Codezeile zu setzen, die in einer gut verketteten Zeile angeordnet ist:
$ ("div") .text ("Foo"); Oder ich kann noch ein bisschen weiter gehen und eine Ajax-Anfrage an die API von Flickr testen, um JSON-Daten zurückzuholen und darauf basierende Bilder zu rendern:
(function () var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $ .getJSON (flickerAPI, tags: "mount rainier", tagmode: "any ", format:" json ") .done (Funktion (Daten) $ .each (Daten.Elemente, Funktion (i, Element) $ ("![]()
") .attr (" src ", item.media.m) .appendTo (" div "); if (i === 3) return false;););) (); Der Code oben würde wie folgt dargestellt:
Die volle Leistungsfähigkeit dieser Bibliotheken und Frameworks eröffnet wirklich die Testszenarien, die Sie mit JSBin einrichten können.
Auch hier handelt es sich um eine Liste der beliebtesten verfügbaren Bibliotheken und Frameworks, und einige Nischen sind einfach nicht in der Liste enthalten. Wenn Sie eine eigene benutzerdefinierte Bibliothek hinzufügen müssen, zeigt die Dokumentation, wie Sie sie selbst hinzufügen können.
Ich finde JSBin von unschätzbarem Wert für meine Desktop-Entwicklung. Als ich mich auf mobile Geräte konzentriere, bin ich froh zu sehen, dass ich es auch weiterhin nutzen kann, um auf diesen Geräten zu testen. Seit der dritten Version hat JSBin eine Funktion namens "Live-Rendering" integriert, die als Simulcast für mehrere verbundene Geräte fungiert. Diese Geräte sind nicht explizit verbunden, sondern nutzen eine bestimmte URL, die es ihnen ermöglicht, die Ergebnisse im Wesentlichen gleichzeitig darzustellen. Sie können diese Funktion im folgenden Video in Aktion sehen.
Eine weitere wichtige Funktion ist die Möglichkeit, ein eigenes JSBin-Konto zu erstellen, in dem Sie Ihre Bins für spätere Referenzzwecke und zur gemeinsamen Nutzung speichern können. Die Registrierung ist einfach und Sie können sogar Ihre Github-Anmeldeinformationen über die OAuth-Funktionalität von Github nutzen.
Der Hauptvorteil der Registrierung ist die Möglichkeit, eine Historie der von Ihnen erstellten Lagerplätze aufzubewahren, damit Sie sie später erneut aufrufen können.
Um wirklich ein Gefühl für die volle Bandbreite der von JSBin angebotenen Funktionen zu bekommen, fordere ich Sie auf, zu Remys Youtube-Kanal für JSBin zu gehen, wo er die ersten Videos erstellt hat, in denen er die hervorragenden Funktionen des Dienstes untersucht. In den FAQs werden auch häufig gestellte Fragen beantwortet.
JSBin ist eines meiner wertvollsten Tools, die ich für die JavaScript-Entwicklung gefunden habe. Die Tatsache, dass es kostenlos und Open Source ist, macht es zu einem Kinderspiel, jedem Toolkit hinzuzufügen. Und Remys anhaltendes Engagement für den Service ist lobenswert. All dies zusammen macht es mir leicht, über ein so großartiges Werkzeug zu berichten.
