Veidņu veidošana ir svarīga daļa no darba ar JavaScript lietojumprogrammām. Diezgan bieži dati ir pieejami jums, bet ne tādā formātā, kas ir gatavs ekrānā. Parasti tie ir (bet ne vienmēr) dati JSON formātā. Tas ir lielisks formāts darbam ar JavaScript, taču mums tas joprojām ir jāformatē kaut ko tādu, ko mēs varam izmantot.
Piemēram, šeit ir daži izdomāti dati, kas mums varētu būt pieejami:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )Un galu galā mēs vēlētos to padarīt:
Ender's Game
Gavin Hood
Jūs varētu domāt, ka jQuery šajā ziņā ir lielisks. jQuery ir pilns ar DOM pārvietošanās / manipulācijas rīkiem. Bet tam nav ļoti spēcīga DOM izveides rīku komplekta, kā jūs varētu teikt. Es uzskatu, ka jQuery komanda kādā brīdī apsvēra iespēju pievienot veidnes un pat spēlēja ar “oficiālu” spraudni, taču tas neizdevās.
Šajā videoklipā mēs vienkārši nedarām to, ko šodien tradicionāli uzskata par veidni. Mēs vienkārši izveidojam jaunu ar jQuery un izmantojam virkņu savienošanu, lai izveidotu mums nepieciešamo HTML un galu galā ievadītu to lapā. Tajā nav nekā tehniski nepareiza, bet es cenšos braukt mājās, kā šī pieeja var ātri izkļūt no rokas.
Tikai nedaudz JS, ko mēs rakstām šajā videoklipā, mēs sajaucam dažādas problēmas / darbus:
- Datu iegūšana. Mums tas vienkārši ir pa rokai, taču, iespējams, tas ir nedaudz sarežģītāk. Varbūt asinhronais Ajax pieprasījums ar kļūdu apstrādi, kešatmiņu un tamlīdzīgi.
- Parādīt loģiku. Izlemt, kas mums jāparāda. Cik daudz? Kuras daļas? Uz kā pamata?
- Pasākumu apstrāde. Mūsu nesen injicētajiem diviem tika pievienota notikumu apstrāde, kad mēs tos izveidojām, nevis deleģējām.
- Veidošana. HTML, kuru mēs izveidojam, lai veiktu dizainu, strukturētu datus un pielāgotu vai vajadzības.
Šis ir spageti-ish kods, ar kuru mēs pabeidzām:
Skatiet Chris Coyier (@chriscoyier) Pen 31b07f30dce13b31904da36693b29b41 par CodePen
Nākamais videoklipu bloks koncentrēsies uz veidnēm, jo tas ir ļoti svarīgi, taču galu galā mēs kaut kā sadalīsim visas šīs problēmas un galu galā ar daudz organizētāku un uzturētāku kodu.