Sie haben es schon eine Weile mit Google Reader, Google Mail und zuletzt auf Facebook gesehen. Möglicherweise möchten auch Sie REST-fähige JavaScript-Anwendungen schreiben. Nun, andere Entwickler, lernen Sie Sammy.js kennen, ein kleines JavaScript-Framework, das auf jQuery basiert. Sammy verwendet den URL-Hash (#), um Ihnen das Erstellen einzelner AJAX-Anwendungen zu ermöglichen, die auf die Schaltfläche "Zurück" Ihres Browsers reagieren. Interessiert?

In diesem Artikel werde ich einen kurzen Überblick über das Framework geben und dann eine kurze Demonstration der Arbeit mit Sammy.js, mit der Hoffnung, Sie so anzulocken, dass Sie es für Ihre Projekte in Betracht ziehen.

---

Die Bühne vorbereiten

"Sammy.js ist sowohl in der Größe (<20kb) and footprint. Pull it into your already started applications."

Sammy.js wird von Aaron Quint, einem Webentwickler aus Brooklyn, NY, zusammengestellt. Die API basiert auf dem beliebten Ruby-Framework Sinatra und eignet sich sowohl für einfache als auch für komplexe Anwendungen. Es ist leicht einzusteigen und kann in Ihre bestehenden Projekte einbezogen werden. Es ist nicht alles oder nichts; Schauen wir uns also mal um.

Mit Sammy.js können Sie Apps für eine Seite erstellen, ähnlich wie bei Google Mail. Sie können den Status Ihrer App mit der URL beibehalten, ohne die Seite aktualisieren oder ändern zu müssen. Es gibt andere MVC-JavaScript-Frameworks wie SproutCore, die alle umfassend sind. Mit Sammy verfügen Sie jedoch über ein leichtes Framework (~ 20kb), mit dem Sie mehrere Instanzen gleichzeitig aufrufen können (dh mehrere Apps in demselben Dokument ausführen)..

---

Eröffnungsakt

Die Installation von Sammy.js ist ziemlich unkompliziert. Gehen Sie zur Download-Seite, nehmen Sie eine Kopie und bewegen Sie sich, sammy-0.5.4.min.js dorthin, wo Sie die Bibliotheken Ihres Projekts ablegen (normalerweise / js für mich). Für die Zwecke dieses Artikels werde ich Version 0.5.4 verwenden, aber Sie können dies gerne versuchen sammy-latest.min.js. Sie benötigen auch eine Kopie von jQuery, mindestens Version 1.4.1. Wie bei den meisten jQuery-Plugins ist auch die Reihenfolge wichtig: jQuery, vor Sammy.js, vor Ihrem JavaScript. Ich neige dazu, mein JavaScript am unteren Rand der Seite zu platzieren, da es das parallele Laden anderer Elemente blockiert, was den Eindruck einer langsameren Ladeseite vermittelt. Bisher haben wir:

Beginnen Sie jetzt mit der Codierung unserer App. Um es einfach zu halten, arbeite ich inline, was nicht die beste Vorgehensweise ist. Das Hinzufügen einer Sammy.js-Anwendung ist so einfach wie das Zuweisen einer Variablen, die ich ratPack nenne. Auf unserer Seite haben wir ein Div mit der ID "content" definiert, auf das sich unsere Anwendung auswirkt. Wir geben dies wie folgt an:

 var ratPack = $ .sammy (function () this.element_selector = '#content'; // Routen gehen hier hin);

Die Elementauswahl ist wichtig, weil in unserem Dokument mehrere Instanzen von Sammy.js ausgeführt werden können, die sich auf verschiedene Elemente auswirken.

---

Hauptattraktion

Sammy.js verwendet den im URL-Hash definierten Pfad und die üblichen HTTP-Methoden (get, post, put, delete), um eine Callback-Funktion zu bestimmen, die aufgerufen werden soll. Diese werden normalerweise als "Routen" bezeichnet. Einige Beispiele aus dem Internet wären:

Als Beispiel skizzieren wir eine Mailbox-Anwendung. Lassen Sie uns zunächst die Standardroute unserer App einrichten, die in # / Posteingang landet.

 this.get ('# / inbox', function (context) context.app.swap ("); context. $ element (). append ('
Posteingang
'); );

Hier können Sie die Callback-Funktion so einstellen, wie Sie möchten. Da ich einen Posteingang anzeigen möchte, möchte ich wahrscheinlich einen Ajax-Anruf tätigen und eine Liste mit Nachrichten abrufen. Der Einfachheit halber werde ich jedoch nur eine zurückgeben h1 Etikett. Das context.app.swap (") sagt Sammy, er soll ersetzen, was in meinem Content-Div enthalten ist, anstatt es einfach anzuhängen.

Damit dies im Browser funktioniert, möchten wir die App mit der Funktion document ready von jQuery ausführen und an unsere Start-URL übergeben, wie in der obigen Route definiert.

 $ (function () ratPack.run ('# / inbox'););

Und das ist es. Wir sollten jetzt in der Lage sein, unser Dokument in einem Browser zu laden. Die App sollte nun starten und zu unserem Posteingang navigieren.

Als Nächstes können Sie eine weitere Route erstellen, um mit beschrifteten Nachrichten zu arbeiten:

 this.get ('# / label /: name', Funktion (Kontext) context.app.swap ("); context. $ element (). append ('
'+ this.params [' name '] +'
'); );

Sammy verwendet die Doppelpunkt-Var-Syntax (: var), um Parameter für die Filterung unserer Nachrichten zurückzugeben. Ich zeige wieder nur den Namen des Labels.

Bisher haben wir nur die HTTP-Methode "get" verwendet. Nehmen wir an, wir sollten ein Formular erstellen und es an # / compose weiterleiten:

 this.get ('# / compose', function (context) context.app.swap ("); context. $ element (). append ('
sag Hallo zu?
'+'
'+''+''+'
'); );

Jetzt können wir eine Route einrichten, um die veröffentlichten Daten zu akzeptieren, und Sammy es für uns analysieren lassen.

this.post ('# / compose', Funktion (Kontext) context.app.swap ("); var to = this.params ['to']; context. $ element (). append (')
hi '+ bis +'
'); );

Das sind die Grundlagen. Eine einfache API, leistungsstark genug für große und kleine Projekte. Wenn Sie dem Code folgen, können wir einige Navigationsmöglichkeiten hinzufügen, um das Klicken zu erleichtern.

 
 
 
Posteingang
 
komponieren
 
Entwürfe
 
 

---

Zugabe

Natürlich hat Sammy.js viel mehr zu bieten, als nur Routen in der App zu definieren. Fortgeschrittene Benutzer können benutzerdefinierte Ereignisse und Namespaces für ereignisgesteuerte Anwendungen durchsuchen. Aaron versucht, den Kern von Sammy.js so eng wie möglich zu halten, aber es enthält auch viele Plugins. Es gibt ein Titel-Plugin, mit dem Sie den Titel des Dokuments für verschiedene Routen festlegen können. Es gibt verschiedene Vorlagen-Systeme, darunter Haml und Schnurrbart. Es gibt einen hübsch aussehenden Formularersteller und Sammy.Store, "eine abstrakte Adapterklasse, die die Vielzahl der in Browserdaten gespeicherten Daten in einen einzigen Satz von Methoden zum Speichern und Abrufen von Daten umschließt."

Ich hoffe, Sie haben diesen kurzen Blick auf Sammy.js genossen und sind bereit, die Verwendung in Ihren Anwendungen in Betracht zu ziehen. Lassen Sie uns Ihre Gedanken zu Sammy.js in den Kommentaren hören!

Der ursprüngliche Ausbilder dieses Tutorials forderte, dass sein Name von der Byline entfernt wird.