Kami telah melakukan pekerjaan yang cukup baik sehingga tidak teratur. Menghasilkan HTML kami dalam templat adalah langkah besar. Kami lebih lama mengeringkan perairan sehingga boleh dikatakan. Potongan fungsi kami yang berbeza dalam JavaScript dipecah menjadi beberapa bahagian yang bijaksana, menjadikan semuanya lebih mudah difahami dan dipelihara. Saya tahu kami telah bekerjasama dengan demo yang cukup kecil, tetapi saya harap anda dapat membayangkan bagaimana apabila aplikasi menjadi lebih rumit dan lebih banyak baris kod, organisasi ini sangat berharga.
JavaScript tidak mempunyai "pendapat" seperti mengenai organisasi. Itulah sebabnya mengapa beberapa orang menyukainya dan sebilangan orang merasa tersesat di dalamnya. Cara anda memilih untuk mengaturnya bergantung sepenuhnya kepada anda. Itu juga mungkin mengapa sebilangan orang benar-benar menggunakan kerangka kerja yang, menurut pendapat atau tidak, memberikan struktur organisasi. Contohnya, Tulang Belakang. Tetapi itu satu lagi siri!
Untuk demo kami, kami hanya akan mengatur objek yang kami buat.
var Movies = ( )Setiap perkara yang kami lakukan di sini berkaitan dengan mendapatkan beberapa filem di halaman, jadi kami akan memasukkannya ke dalam satu "perkara" yang disebut Filem. Ingat bahawa kita hanya melakukan apa sahaja yang masuk akal bagi kita secara organisasi. Ini mempunyai keuntungan hanya memasukkan satu variabel ke dalam "lingkup global" juga. Sekiranya kita melakukan segalanya di ruang lingkup global, maka akan menjadi kekacauan pemboleh ubah yang tidak sengaja (dan fungsi dan apa sahaja) yang dinyatakan di tempat lain.
Objek seperti itu sebenarnya tidak "melakukan" apa-apa. Kita perlu "memulakannya".
var Movies = ( init: function() ( ) ) Movies.init();Mempunyai fungsi yang dinamakan init adalah sedikit standard yang membolehkan sesiapa yang membaca kod ini mengetahui bahawa kod di dalamnya adalah apa yang berjalan ketika kumpulan kod ini dijalankan. Itu mesti sedikit seperti jadual kandungan apa yang berlaku dengan kumpulan kod ini. Kami kemudian membuat fungsi lain (lebih banyak sifat objek Filem) yang melakukan perkara yang perlu kita lakukan, dalam potongan tersendiri. Ingatlah bahawa kita boleh memanggil barang apa sahaja yang kita mahukan, apa sahaja 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 eh? Anda mungkin menyedari appendMovesToPagetidak dipanggil di init. Itu kerana kita tidak dapat memanggilnya sehingga kita mempunyai data untuk menghantarnya. Data itu akan datang dari panggilan Ajax, yang bermaksud kita memerlukan panggilan balik. Jadi getDataakhirnya akan memanggilnya.
Semua perkara lain yang akan diisi di sini hanyalah memindahkan kod yang sudah kita tulis ke tempat yang betul.
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 perhatikan empat masalah yang telah kita gariskan sebelumnya dan lihat apa yang kita lakukan terhadap mereka.
- Mendapatkan data. Kami memindahkan JSON ke dalam fail yang dapat kami tekan
$.getJSON, kerana kemungkinan itu perlu kami lakukan dalam situasi sebenar. Selain daripada mempraktikkannya, ini akan membolehkan kita menulis ujian di sekitarnya. - Logik paparan. Kita sekarang mempunyai fungsi appendMoviesToPage yang sangat spesifik yang dipanggil ketika kita sudah siap untuk menambahkan filem kita ke halaman. Fungsi satu guna sangat bagus untuk (sekali lagi) organisasi, mudah difahami, dan dikekalkan.
- Pengendalian acara. Dengan menggunakan delegasi acara, kami tidak lagi mencampurkan "logik perniagaan" ini dengan logik atau templat paparan. Kami bahkan tidak perlu risau tentang pelaksanaan pesanan sumber, kerana pada akhirnya kami melampirkan peristiwa tersebut ke
document. Fungsi kami akan berfungsi tidak kira bila / bagaimana templat ditambahkan ke halaman. - Templat. Sangat tergerak untuk menggunakan perpustakaan yang dimaksudkan khusus untuk templat.
Saya memanggil kemenangan itu. Di sinilah kami akhirnya:
Lihat Pen BwbhI oleh Chris Coyier (@chriscoyier) di CodePen