Share
Ați mai văzut-o pentru un timp acum cu cititorul Google, Gmail și, cel mai recent, pe Facebook. Probabil, și tu, v-ar plăcea să scriem aplicații JavaScript cu rezultate mai bune. Ei bine, colegi dezvoltatori, întâlniți Sammy.js, un mic cadru JavaScript construit pe partea de sus a jQuery. Sammy folosește hash-ul URL-ului (#) pentru a vă permite să creați aplicații AJAX pentru o singură pagină care să răspundă butonului de navigare al browserului dvs. Interesat?
În acest articol, voi oferi o scurtă trecere în revistă a cadrului și apoi o scurtă demonstrație a ceea ce înseamnă să lucrați cu Sammy.js, cu speranța că te-ar atrage suficient pentru a-l considera pentru proiectele tale.
"Sammy.js este ușor atât în dimensiune (<20kb) and footprint. Pull it into your already started applications."
Sammy.js este pusă împreună de Aaron Quint, dezvoltator web din Brooklyn, NY. API-ul său este modelat pe cadrul rubin popular, Sinatra, și este excelent atât pentru aplicații simple, cât și pentru aplicații complexe. Este ușor să intri în, și pot fi trase în proiectele dvs. existente. Nu este o propunere totală sau nimic; așa că haideți să aruncăm o privire.
Sammy.js vă permite să scrieți aplicații cu o singură pagină, la fel ca Gmail. Puteți să vă mențineți starea aplicației utilizând urlul, fără a fi nevoie să reîmprospătați sau să modificați pagina. Există și alte cadre JavaScript MVC, cum ar fi SproutCore, care tind să fie toate cuprinzătoare. Dar cu Sammy, aveți un cadru ușor (~ 20kb), capabil să invocați simultan mai multe instanțe (de ex. Executați mai multe aplicații în același document).
Instalarea programului Sammy.js este destul de simplă. Continuați pe pagina de descărcare, prindeți o copie și mutați-o, sammy-0.5.4.min.js la locul în care stocați bibliotecile proiectului (de obicei / js pentru mine). În scopul acestui articol, voi folosi versiunea 0.5.4, dar s-ar putea să fiți înclinat să încercați sammy-latest.min.js. Veți avea nevoie și de o copie a jQuery, cel puțin v. 1.4.1. Ca și în cazul celor mai multe pluginuri jQuery, ordinea este importantă: jQuery, înainte de Sammy.js, înainte de JavaScript. Tind să pun JavaScript în partea de jos a paginii, deoarece blochează alte elemente de încărcare în paralel, dând impresia unei pagini de încărcare mai lentă. Până acum avem:
Sammy.js Exemplu
Acum începeți să codificați aplicația noastră. Pentru a păstra lucrurile simple, lucrez în linie, ceea ce nu este cea mai bună practică. Adăugarea unei aplicații Sammy.js este la fel de simplă precum atribuirea acesteia unei variabile, pe care o numesc ratPack. Pe pagina noastră am definit un div cu "conținutul" id pe care va acționa aplicația noastră. Indicăm acest lucru după cum urmează:
var ratPack = $ .sammy (funcția () this.element_selector = '#content'; // rutele vor merge aici);
Importanța selectorului de elemente este că putem avea mai multe exemple de Sammy.js care rulează în documentul nostru, care afectează diferite elemente.
Sammy.js utilizează calea, așa cum este definită în hash-ul URL-ului, și metodele comune HTTP (get, post, put, delete) pentru a determina o funcție de apel invers. Acestea sunt cunoscute în mod tipic ca "rute". Câteva exemple din jurul web-ului ar fi:
De exemplu, vom schița o aplicație pentru cutia poștală. Să configurați mai întâi ruta prestabilită a aplicației noastre, care va ateriza în # / Inbox.
Accentsconagua
acest lucru ('# / inbox', functie (context) context.app.swap ("); context $ element () append ('Inbox
„); ); Aici puteți face funcția de apel invers să faceți tot ce doriți. Din moment ce afișez o căsuță poștală, aș vrea să fac un apel ajax și să recuperez o listă de mesaje. Cu toate acestea, de dragul simplității, voi reveni a h1 etichetă. context.app.swap ( ") spune Sammy să înlocuiască ceea ce este în conținutul meu div, mai degrabă decât să se alăture doar la ea.
Pentru ca această lucrare să funcționeze în browser, vom dori să rulați aplicația utilizând funcția gata de document a jQuery și să o transmiteți URL-ului nostru inițial, așa cum este definit în ruta de mai sus.
$ (funcția () ratPack.run ('# / inbox');); Si asta e. Acum ar trebui să putem încărca documentul într-un browser, aplicația ar trebui să ne lanseze și să ne navigheze în căsuța de e-mail.
Apoi, putem crea o altă rută pentru a gestiona mesajele etichetate:
Acest element ('# / label /: nume', functie (context) context.app.swap ("); context $ element () append (''+ this.params [' nume '] +'
„); ); Sammy folosește sintaxa varului colonului (: var) pentru a returna parametrii pentru ca noi să ne filtram mesajele. Din nou, eu doar afișez numele etichetei.
În acest moment, am folosit doar metoda "get" HTTP. Spuneți că am creat o formă și o direcționăm spre # / compune:
aceasta.get ('# / compose', functie (context) context.app.swap ("); context $ element () append ('salută-l pe?
"+"„); ); Acum putem configura un traseu pentru a accepta datele postate și pentru ca Sammy să o analizeze pentru noi.
Aceasta este o functie de tip "hi '+ to +'
„); );
Acestea sunt elementele de bază. Un API simplu, suficient de puternic pentru proiecte mari și mici. Dacă urmăriți împreună cu codul, putem adăuga o anumită navigație pentru a face clic ușor.
- Inbox
- Compune
- Schițe
Desigur, Sammy.js are multe de oferit decât să definească rute în app. Utilizatorii mai avansați pot explora evenimente personalizate și spații de nume, pentru aplicații bazate pe evenimente. Aaron încearcă să mențină nucleul lui Sammy.js cât mai strâns posibil, dar vine și cu multe pluginuri. Există un plugin pentru titlu, care vă permite să setați cu ușurință titlul documentului pentru diferite rute. Există mai multe sisteme de template, inclusiv hamal și mustașe. Există un constructor de forme frumos și Sammy.Store, "o clasă de adaptor abstract care împachetează multitudinea de date stocate în browser într-un singur set comun de metode de stocare și retrealizare a datelor".
Sper că v-ați bucurat de această scurtă privire la Sammy.js și sunteți gata să vă gândiți să o utilizați în aplicațiile dvs. Să ne auzim gândurile despre Sammy.js în comentariile!
Instructorul original al acestui tutorial a solicitat eliminarea numelui lor de la linia byline.
