Share
Lo vedi da un po 'di tempo con Google Reader, Gmail e, più recentemente, su Facebook. Probabilmente, anche tu vorrai scrivere applicazioni JavaScript RESTful. Bene, colleghi sviluppatori, conosci Sammy.js, un piccolo framework JavaScript creato su jQuery. Sammy utilizza l'URL hash (#) per consentire di creare applicazioni AJAX a singola pagina che rispondono al pulsante Indietro del browser. Interessato?
In questo articolo, fornirò una breve panoramica del framework e quindi una breve dimostrazione di come funziona con Sammy.js, con la speranza di attirarti abbastanza per prenderlo in considerazione per i tuoi progetti.
"Sammy.js è leggero sia in termini di dimensioni (<20kb) and footprint. Pull it into your already started applications."
Sammy.js è stato creato da Aaron Quint, uno sviluppatore web di Brooklyn, NY. La sua API è modellata sul popolare framework di ruby, Sinatra, ed è perfetta per applicazioni semplici e complesse. È facile entrare e può essere inserito nei progetti esistenti. Non è una proposizione tutto o niente; quindi diamo un'occhiata.
Sammy.js ti permette di scrivere app a singola pagina, proprio come Gmail. Puoi mantenere lo stato della tua app con l'url, senza dover aggiornare o modificare la pagina. Esistono altri framework MVC JavaScript, come SproutCore, che tendono ad essere onnicomprensivi. Ma con Sammy, hai un framework leggero (~ 20kb), in grado di richiamare più istanze simultaneamente (ad esempio, eseguire più app nello stesso documento).
L'installazione di Sammy.js è piuttosto semplice. Andate alla pagina di download, prendete una copia e spostatevi, Sammy-0.5.4.min.js dove conservi le librerie del tuo progetto (in genere / js per me). Per gli scopi di questo articolo, userò la versione 0.5.4, ma potresti essere incline a provare Sammy-latest.min.js. Avrai anche bisogno di una copia di jQuery, almeno v. 1.4.1. Come con la maggior parte dei plugin jQuery, l'ordine è importante: jQuery, prima di Sammy.js, prima del tuo JavaScript. Tendo a mettere il mio JavaScript nella parte inferiore della pagina, perché blocca altri elementi dal caricamento in parallelo, dando l'impressione di una pagina di caricamento più lenta. Finora abbiamo:
Sammy.js Esempio
Ora inizia a programmare la nostra app. Per mantenere le cose semplici, sto lavorando in linea, che non è la migliore pratica. L'aggiunta di un'applicazione Sammy.js è semplice come assegnarla a una variabile, che sto chiamando ratPack. Sulla nostra pagina abbiamo definito un div con il "contenuto" id su cui agirà la nostra applicazione. Indichiamo questo come segue:
var ratPack = $ .sammy (function () this.element_selector = '#content'; // percorsi andranno qui);
L'importanza del selettore di elementi è che possiamo avere più istanze di Sammy.js in esecuzione nel nostro documento, che influiscono su diversi elementi.
Sammy.js utilizza il percorso, come definito nell'hash dell'URL, e i metodi HTTP comuni (get, post, put, delete) per determinare una funzione di callback da richiamare. Questi sono in genere noti come "percorsi". Alcuni esempi da tutto il Web potrebbero essere:
Ad esempio, abbozzeremo un'applicazione per le cassette postali. Iniziamo ad impostare il percorso predefinito della nostra app, che verrà inserito in # / inbox.
Accentsconagua
this.get ('# / inbox', function (context) context.app.swap ("); context. $ element (). append ('Posta in arrivo
'); ); Qui, puoi fare in modo che la funzione di callback faccia ciò che desideri. Poiché visualizzo una casella di posta in arrivo, probabilmente vorrei effettuare una chiamata ajax e recuperare un elenco di messaggi. Tuttavia, per semplicità, ho intenzione di restituire a h1 etichetta. Il context.app.swap ( ") dice a Sammy di sostituire ciò che è contenuto nel mio contenuto, piuttosto che accodarlo.
Per farlo funzionare nel browser, vorremmo eseguire l'app utilizzando la funzione Document Ready di jQuery e passarla al nostro URL iniziale, come definito nel percorso sopra.
$ (function () ratPack.run ('# / inbox');); E questo è tutto. Ora dovremmo essere in grado di caricare il nostro documento in un browser, l'app dovrebbe avviarsi e navigare nella nostra casella di posta elettronica.
Successivamente, possiamo creare un'altra rotta per gestire i messaggi etichettati:
this.get ('# / label /: name', function (context) context.app.swap ("); context. $ element (). append (''+ this.params [' name '] +'
'); ); Sammy usa la sintassi var dei due punti (: var) per restituire i parametri per noi per filtrare i nostri messaggi. Di nuovo, sto solo visualizzando il nome dell'etichetta.
A questo punto, abbiamo solo utilizzato il metodo HTTP "get". Diciamo che dovremmo creare un modulo e indirizzarlo a # / comporre:
this.get ('# / compose', function (context) context.app.swap ("); context. $ element (). append ('di Ciao a?
'+''); ); Ora possiamo impostare un percorso per accettare i dati pubblicati e fare in modo che Sammy lo analizzi per noi.
this.post ('# / compose', function (context) context.app.swap ("); var to = this.params ['a']; context. $ element (). append ('ciao '+ a +'
'); ); Ecco le basi. Una semplice API, abbastanza potente per progetti sia grandi che piccoli. Se stai seguendo il codice, possiamo aggiungere un po 'di navigazione per facilitare il clic.
- Posta in arrivo
- comporre
- bozze
Certo, Sammy.js ha molto altro da offrire rispetto alla semplice definizione di percorsi nell'app. Gli utenti più esperti possono esplorare eventi personalizzati e spazi dei nomi, per applicazioni basate su eventi. Aaron sta cercando di mantenere il nucleo di Sammy.js il più stretto possibile, ma ha anche un sacco di plugin. C'è un plugin per il titolo, che ti permette di impostare facilmente il titolo del documento per diversi percorsi. Esistono diversi sistemi di template, inclusi haml e baffi. C'è un costruttore di moduli dall'aspetto piacevole e Sammy.Store, "una classe di adattatore astratta che racchiude la moltitudine di dati nell'archiviazione dei dati del browser in un unico insieme comune di metodi per l'archiviazione e il recupero dei dati".
Spero che tu abbia apprezzato questa rapida occhiata a Sammy.js e sei pronto a prendere in considerazione l'utilizzo nelle tue applicazioni. Sentiamo i tuoi pensieri su Sammy.js nei commenti!
L'istruttore originale di questo tutorial ha richiesto che il loro nome fosse rimosso dal sottotitolo.
