Sejauh ini kami telah melakukan pekerjaan yang cukup baik dalam mengatur. Memecah HTML kami menjadi template adalah langkah besar. Kita lebih lama lagi mengotori air. Bit kami yang berbeda secara fungsional di JavaScript dipecah menjadi beberapa bagian rahasia, membuat segalanya lebih mudah untuk dipahami dan dipelihara. Saya tahu kami telah mengerjakan demo yang cukup kecil, tetapi saya harap Anda dapat membayangkan bagaimana aplikasi menjadi lebih rumit dan lebih banyak baris kode, organisasi ini sangat berharga.
JavaScript tidak memiliki "opini" apa pun seperti tentang organisasi. Itu mungkin mengapa beberapa orang menyukainya dan beberapa orang merasa tersesat di dalamnya. Bagaimana Anda memilih untuk mengaturnya sepenuhnya terserah Anda. Itu juga mungkin mengapa beberapa orang benar-benar terikat pada kerangka kerja yang, didasari atau tidak, menyediakan struktur organisasi. Misalnya, Backbone. Tapi itu seri lain!
Untuk demo kami, kami hanya akan mengatur di sekitar objek yang baru kami buat.
var Movies = ( )Setiap hal yang kami lakukan di sini terkait dengan mendapatkan beberapa film di halaman, jadi kami akan memasukkannya ke dalam satu "hal" yang disebut Film. Ingatlah kita hanya melakukan apapun yang masuk akal bagi kita secara organisasi. Manfaatnya adalah hanya menempatkan satu variabel ke dalam "cakupan global". Jika kita melakukan semuanya pada lingkup global, itu akan menjadi kekacauan variabel yang secara tidak sengaja menimpa variabel (dan fungsi dan apa pun) yang dideklarasikan di tempat lain.
Objek seperti itu sebenarnya tidak "melakukan" apa pun. Kita harus "memulai".
var Movies = ( init: function() ( ) ) Movies.init();Memiliki fungsi bernama init adalah sedikit standar yang memungkinkan siapa pun yang membaca kode ini untuk mengetahui bahwa kode di dalamnya ada yang berjalan ketika kelompok kode ini dijalankan. Itu seharusnya membaca sedikit seperti daftar isi tentang apa yang terjadi dengan kelompok kode ini. Kami kemudian membuat fungsi lain (lebih banyak properti dari objek Film) yang melakukan hal-hal yang perlu kami lakukan, dalam potongan diskrit. Ingatlah kita bisa menyebut barang apapun yang kita inginkan, apapun yang masuk akal bagi kita.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Cukup jelas ya? Anda mungkin memperhatikan appendMovesToPagetidak dipanggil di init. Itu karena kami tidak dapat memanggilnya hingga kami memiliki data untuk dikirim. Data itu akan datang dari panggilan Ajax, artinya kita membutuhkan panggilan balik. Jadi getDataakhirnya akan memanggil yang itu.
Segala sesuatu yang lain yang akan mengisi di sini hanyalah memindahkan bit kode yang telah kita tulis ke tempat yang benar.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
Dan selesai.
Mari kita lihat empat masalah yang telah kami uraikan sebelumnya dan lihat apa yang kami lakukan terhadapnya.
- Mendapatkan datanya. Kami memindahkan JSON ke dalam file yang dapat kami gunakan
$.getJSON, karena kemungkinan besar kami perlu melakukannya dalam situasi nyata. Selain hanya mempraktikkannya, ini akan memungkinkan kita untuk menulis tes di sekitarnya. - Tampilkan logika. Kami sekarang memiliki appendMoviesToPage fungsi yang sangat spesifik yang dipanggil saat kami siap untuk menambahkan film kami ke halaman. Fungsi tujuan tunggal sangat bagus untuk (sekali lagi) pengorganisasian, pemahaman, dan pemeliharaan.
- Penanganan acara. Menggunakan delegasi acara, kami tidak lagi mencampurkan "logika bisnis" ini dengan logika tampilan atau template. Kami bahkan tidak perlu khawatir tentang eksekusi perintah sumber, karena pada akhirnya kami akan melampirkan peristiwa tersebut ke
document. Fungsionalitas kami akan bekerja tidak peduli kapan / bagaimana templat ditambahkan ke halaman. - Templating. Benar-benar dipindahkan untuk menggunakan pustaka yang dimaksudkan khusus untuk pembuatan template.
Saya akan menyebutnya kemenangan. Di sinilah kami berakhir:
Lihat Pena BwbhI oleh Chris Coyier (@chriscoyier) di CodePen