Templating adalah bagian penting dari bekerja dengan aplikasi JavaScript. Sangat umum bahwa data tersedia untuk Anda, tetapi tidak dalam format yang siap ditampilkan di layar. Itu biasanya (tetapi tidak selalu) data dalam format JSON. Itu adalah format yang bagus untuk bekerja dengan JavaScript, tapi kita masih perlu memformatnya menjadi sesuatu yang bisa kita gunakan.
Misalnya, inilah beberapa data fiksi yang mungkin kami miliki:
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" ),… ) )Dan pada akhirnya kami ingin membuatnya menjadi:
Ender's Game
Gavin Hood
Anda mungkin berpikir jQuery luar biasa dalam hal itu. jQuery penuh dengan alat traversing / manipulasi DOM. Tapi itu tidak memiliki seperangkat alat pembuatan DOM yang sangat kuat yang bisa Anda katakan. Saya yakin tim jQuery sedang mempertimbangkan untuk menambahkan template di beberapa titik, dan bahkan bermain-main dengan plugin "resmi", tetapi tidak berhasil.
Dalam video ini kami tidak melakukan apa yang saat ini secara tradisional dianggap sebagai templating. Kami baru saja membangun yang baru dengan jQuery dan menggunakan penggabungan string untuk membangun HTML yang kami butuhkan dan akhirnya menyuntikkannya ke halaman. Tidak ada yang salah secara teknis tentang itu, tetapi saya mencoba dan pulang bagaimana pendekatan ini dapat dengan cepat lepas kendali.
Hanya dalam sedikit JS yang kami tulis di video ini, kami menggabungkan berbagai masalah / pekerjaan:
- Mendapatkan datanya. Kami hanya memilikinya di sini, tetapi kemungkinan ini sedikit lebih kompleks. Mungkin permintaan Ajax async dengan penanganan kesalahan dan caching dan semacamnya.
- Tampilkan logika. Memutuskan apa yang perlu kami tunjukkan. Berapa banyak? Bagian mana? Berdasarkan apa?
- Penanganan acara. Div yang baru kami masukkan memiliki penanganan acara yang ditambahkan saat kami membuatnya, bukan mendelegasikan.
- Templating. HTML yang kita buat untuk menyelesaikan desain, menyusun data, dan mengakomodasi atau kebutuhan.
Ini adalah kode spaghetti-ish yang kita selesaikan:
Lihat Pena 31b07f30dce13b31904da36693b29b41 oleh Chris Coyier (@chriscoyier) di CodePen
Blok video berikutnya akan berfokus pada pembuatan template karena itu sangat penting, tetapi pada akhirnya kami akan memecah semua masalah ini dan berakhir dengan kode yang jauh lebih teratur dan dapat dipelihara.