Accentsconagua

Forbedre Web Apps med AmplifyJS

Kode
Share

Det ser ut til å være en ny avling av spesielle formål-JavaScript-biblioteker hver uke. Gone, det virker, er dagene med å bruke bare ett bibliotek per prosjekt. I dag vil jeg introdusere deg til et veldig kult komponentbibliotek, AmplifyJS, som tilbyr bare noen få spesialiserte komponenter.

Devs, Meet AmplifyJS

Ifølge nettsiden:

AmplifyJS er et sett med komponenter designet for å løse vanlige webapplikasjonsproblemer.

Høres prestisjetunge, men hva er egentlig i dette biblioteket?

AmplifyJS har tre hovedstykker:

  • En AJAX API
  • Et PubSub Event System
  • En Client-side Storage API

Bli med meg nå for en tur til det utrolige AmplifyJS-biblioteket! Vi skal bygge en super enkel ansattsporing; Virkelig, det er bare et bord med noen app-lignende funksjoner, høflighet (delvis) av AmplifyJS.

Vi trenger egentlig ikke å bekymre oss om styling og layout problemer i dag, så jeg skal bruke Twitter Bootstrap biblioteket. Det er utrolig enkelt: bare inkludere link til CSS-filen, som de lar deg koble fra Github-og du er i virksomhet.

Trinn 1: Sette opp

Så gjør deg selv en prosjektkatalog. Start med index.html fil og a js mappe. Nå, gå over til AmplifyJS nettsiden og klikk den store, røde? Nedlasting? knapp. En gang har du biblioteket zip, trekk det ut, og flytt det inn i js mappe. Vi trenger også noen andre ting:

  • jQuery: Amplify's AJAX-komponent bruker jQuery's AJAX-funksjon under det API, minst som standard. Men vi bruker jQuery til andre ting, så ta det inn på.
  • bootstrap-modal.js: Twitter Bootstrap-biblioteket inneholder noen få skript for å få alle interaktive. Og vi skal bruke en: det modale vinduet jQuery-plugin. Last ned den, og legg den til js mappe.
  • Det er to andre skript som jeg skal nevne underveis, men disse skal vi skrive oss selv.

Deretter starter du vår index.html filen som denne:

   AmplifyJS    
 
 
 
 
 
 
 
kommandoer
 
 
 
medarbeidere

Hvis du ikke er kjent med å bruke Twitter Bootstrap, ser du at det ikke er svett å bruke. Vi har en container som er 940px bred. Da har vi to rads. Den første har en kolonne, som dekker alle 16 kolonnene. Den andre har to kolonner: den ene er 4 kolonner bred, og den ene er 12 kolonner bred.

En ting til, før vi kommer til noen ekte koding: vi kommer til å dukke opp et modalvindu som gjør det mulig å legge inn ansatte. Under

, legg til dette modale vinduet HTML. Ja, det virker som mye kode, men det er hovedsakelig Bootstrap-ting:

 
 x 
Legg til en ansatt

Ok, vi er klare til å gå! La oss kode.

Trinn 2: Tilkobling av det modale vinduet

Åpne opp a manus tag på bunnen av index.html (Jeg gjør bare dette inline, men føler meg å sette den inn i en ny JS-fil). start denne måten:

 (funksjon () var employeeModal = $ ('# add-employee-modal'). modal (bakteppe: 'statisk'); ());

Vi bruker Bootstrap modal plugin her; dette bare? instantiates? det modale vinduet. Nå vil vi at vinduet skal vises når vi klikker på? Legg til ansatt? knapp. Selvfølgelig må vi først legge til knappen: Legg dette inn i

, rett under

.

At data-kontroller-modal = 'add-ansatt modal' Attributtet vil vise modal med IDen når knappen klikkes.

Så, brukeren må fylle ut skjemaet, klikk på? Legg til? knapp som har et ID på create-ansatt. Så la oss slå på en klikkhendelseshåndterer for knappen:

$ ('# create-employee'). klikk (funksjon () var form = $ ('# ansatt-skjema'); employeeModal.modal ('skjul'); EMPLOYEE.create (form.find ('[name = val (), form.find ('[name = lastName]') .val (), form.find ('[navn = rolle]') .val ()); form.find ') .val ("););

Vi får skjemaet, og deretter skjuler det modale vinduet. Da skal vi ringe en EMPLOYEE.create metode, passerer fornavn, etternavn og rolle som de tre parametrene. Til slutt fjerner vi skjemaet.

amplify.publish

Men vent, du sier hva er EMPLOYEE.create? Vel, det er en mikro-klasse? som jeg har satt inn JS / employee.js. Sjekk det ut:

var EMPLOYEE = opprett: funksjon (fornavn, etternavn, rolle) var ansatt = firstName: firstName, lastName: lastName, rolle: rolle, dateEmployed: new Date (); amplify.publish ('ansatt-skapte', ansatt); returnere ansatt; ;

Du vil kaste et skript tag for det opp med de andre.

Ganske enkelt, ikke sant? Vi lager bare et objekt bokstavelig med parametrene våre, og legg til en dateEmployed eiendom. Men da - og til slutt! -Vi har den første inngangen til AmplifyJS-rammen. Her bruker vi pub / sub events komponenten. Dette er flott for å gjøre løs kobling mellom deler av appen din.

Denne metoden trenger ikke å vite om en annen del av vår kode ønsker å gjøre noe med hver ny medarbeider vi lager; Våre? Legg til? knapphendelseshåndterer trenger ikke å bekymre seg for det. Vi publiserer det bare som en ansatt-opprettet? arrangement for enhver del som er interessert i å ta. Vi sender vårt nye ansattobjekt som data for alle interesserte. Deretter returnerer vi medarbeiderobjektet (selv om vi ikke holder øye med det i vår hendelsehandler).

Trinn 3: Reagerer med amplify.subscribe

Så, er noen annen del av vår app interessert i? ansatt-skapte ?? Ja, faktisk. Vi vil gjøre to ting. Først legger du denne medarbeider til et bord på vår side. For det andre vil vi lagre medarbeiderne i localStorage. Her er den første delen av det:

 amplify.subscribe ('employee-created', funksjon (ansatt) employeeTable.add ([employee.firstName, employee.lastName, employee.role, employee.dateEmployed]); newAlert ('suksess', 'New Employee Added') ;);

For å abonnere på en hendelse, ringer vi amplify.subscribe. Vi ønsker å abonnere på? Ansatt-skapte ?; Når hendelsene oppstår, vil vi legge til det i employeeTable; Legg merke til at i stedet for å bare passere den ansatt objekt, vi? konvertere? det til en matrise; Dette er fordi vi må være sikre på at elementene vil være i riktig rekkefølge. Deretter ønsker vi å vise en melding, slik at brukeren vår vet at den ansatte ble lagt til.

Hva skjer med dette employeeTable variabel? Vel, først må vi legge til

til vårt dokument. Så, under våre? Ansatte?

, Legg til dette:

  
  Fornavn   Etternavn   rolle   Dato ansatt  
    
 
Nå må vi fange dette bordet som en variabel i vår Var uttalelse på toppen:
 
employeeTable = TABLE.create ($ ('# employee-table')),
 
Og BORD? Det er det siste stykket JS for dette puslespillet. Sett dette inn JS / table.js og ikke glem scriptet taggen:
 
var TABLE = proto: init: funksjon (el) this.element = $ (el) .find ('tbody'); , legg til: funksjon (arr) var row = $ ('') .html (funksjon () return $ .map (arr, funksjon (verdi) return''+ verdi +''; ), ());;); denne.element.append (rad);, last: funksjon (rad, rekkefølge) for (var i = 0; rader [i]; i ++) this.add rader [i]); varfelt = []; for (var j = 0; rekkefølge [j]; j ++) fields.push (rader [i] [rekkefølge [j]]; this.add );, clear: funksjon () this.element.empty ();, opprett: funksjon (el) var tabell = Object.create (this.proto); table.init (el); returbord; ;
 
Det er litt komplisert, men du burde ikke ha noe problem å grokke det. Vi har en proto Egenskapen som er prototypen for våre tabellinstanser. Da, når vi ringer skape, vi bruker Object.create å lage et objekt som arver fra this.proto. Etter det kaller vi i det metode for å angi noen egenskaper. Til slutt returnerer vi tabelleksemplet. 
 
Denne mikro-API gjør det enkelt for oss å jobbe med bordet vårt. Du bør kunne se hvordan passerer en matrise til Legg til Metoden vil legge til en rad i vårt bord. Legg merke til at vi kan passere en rekke rader til laste og fyll bordet opp; Vi bruker dette snart.
 
Å, da er det newAlert Metode vi ringte:
 
funksjon newAlert (type, melding) $ ('# alarm-område'). append ($ ('
 '+ melding +' 
')); setTimeout (funksjon () $ ('varslingsmelding'). fadeOut ('slow', funksjon () this.parentNode.removeChild (this););, 2000); 
 
Som du kan se, tilføyer dette bare en div innsiden ut 
; den nye div utnytter Twitter Bootstrap varsel styling; Etter to sekunder forsvinner vi varslet og fjerner det.
 
amplify.store
 
Men det er ikke den eneste tenkningen vi ønsker å gjøre når de ansatte er opprettet? hendelsen oppstår:
 
employeeStore = amplify.store ('ansatte') || [];
 
På toppen, med våre to andre variabler, gjør du den tredje og endelige: employeeStore. Hvis amplify.store ( 'ansattes) returnerer noe, vi vil bruke det; Ellers bruker vi en tom rekkefølge.
 
amplify.subscribe ('employee-created', funksjon (ansatt) employeeStore.push (ansatt); amplify.store ('employees', employeeStore););
 
Nå bruker vi lagringskomponenten i AmplifyJS. Det kunne egentlig ikke vært enklere: å lagre en verdi, passere amplify.store en nøkkel og verdien. For å hente verdien, gi den nøkkelen. Under, AmplifyJS lagrer den nøkkelen og verdien i hvilken lagringstype som er tilgjengelig på denne nettleseren. 
 
Så her legger vi til en ny medarbeider i matrisen og lagrer matrisen i? Ansatte? nøkkel. Jeg burde merke at siden AmplifyJS lagrer en matrise, bruker JSON serialisering til å konvertere den til en streng. Derfor, hvis du prøver å støtte nettlesere uten opprinnelig JSON-støtte (IE 5 og ned, Firefox 3 og ned), vil du gjerne inkludere biblioteket json2.js.
 
 
 Trinn 4: Lagre til serveren (med amplify.request)
 
I vårt lille app-eksempel sier vi at standarddataene du legger inn i appen, bare er lagret på datamaskinen din (i den ene nettleseren). Men hvis brukeren vil, tillater vi at de legger opp på serveren (hypotetisk, dette er privat informasjon de kanskje ikke vil dele, men hvis de vil få tilgang til den fra andre enheter, kan de gjøre dette. ).
 
Vi starter med å legge til en knapp for å laste opp dataene.
 
 
Nå har selvsagt dine briljante sinn allerede funnet ut at vi skal bruke AmplifyJS AJAX-komponent. amplify.request er en utrolig fleksibel API, og vi vil ikke se på alt den kan gjøre. Men du får en god følelse for hvordan det fungerer her.
 
Å gjøre AJAX med AmplifyJS er litt annerledes enn med andre biblioteker: ideen er at du først definerer en forbindelse til serveren; da kan du bruke denne tilkoblingen et hvilket som helst antall ganger etter det. La oss begynne med å definere en forbindelse, kalt en ressurs? av AmplifyJS:
 
amplify.request.define ('pushData', 'ajax', url: 'data.php', type: 'POST');
 
Den første parameteren er her RESOURCEID, som vi setter inn som? pushData ?; Slik viser vi til vår forbindelse når vi bruker den. Den andre parameteren er forespørselstypen; i dette tilfellet, ajax.? Dette er den eneste forespørselstypen som er innebygd i AmplifyJS; Du kan legge til din egen, men dette passer til våre behov i dag.
 
Endelig har vi et alternativobjekt. Ifølge dokumentasjonen er innstillingsalternativene noe du vil sette inn jQuery.ajax, i tillegg til cache (som lar deg sette opp en egendefinert minnebuffer) og dekoderen (for å analysere AJAX-responsen). I vårt tilfelle er det bare to alternativer som er nødvendige: url, og type av forespørsel vi lager.
 
Selvfølgelig trenger vi noen enkle PHP på bakenden; sørg for at data mappen er skrivbar.
 
data.php
 
 
 
Nå, hva med å bruke forbindelsen, ressursen, har vi definert? Vel, la oss gjøre dette i en klikkbehandler for det 





















	


	

			

							×