Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Menggunakan JavaScript Prototype dengan MVC

by
Read Time:10 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Dalam artikel ini, kita akan meneliti proses menggunakan JavaScript, dari perspektif berdasarkan MVC, untuk memanipulasi DOM. Lebih khusus lagi, kita akan insinyur kami JavaScript objek, sifat dan metode, dan mereka instantiations paralel dengan perilaku yang dimaksudkan pandangan-pandangan kami (apa pengguna melihat).


Mempertimbangkan pandangan Anda sebagai objek, bukan sebagai halaman

Pada setiap titik dalam pengembangan halaman web, kami menggunakan bahasa yang secara alami mempromosikan pembangunan berbasis kelas atau pembangunan berbasis objek. Dalam bahasa diketik kuat seperti Jawa dan C#, kita biasanya menulis pandangan kami di kelas - memberi mereka negara, Ruang lingkup, dan konteks. Ketika kita bekerja dengan bahasa seperti PHP atau baru Lihat Engine, seperti pisau cukur untuk ASP.NET, pandangan kami hanya mungkin markup (HTML/CSS) dicampur dengan template. Namun, ini tidak berarti kita harus mengubah persepsi kita pada bagaimana pandangan berperilaku sebagai entitas stateful sendiri.

Dalam pandangan, kami terutama bekerja dengan HTML, yang terdiri dari elemen bersarang; elemen-elemen ini memiliki atribut yang menggambarkan apa tujuan semantik mereka atau bagaimana mereka muncul apabila diterjemahkan. Elemen-elemen ini kemudian memiliki anak-anak atau orang tua unsur-unsur yang mewarisi/menyediakan cascading (melalui CSS) dan blok inline perilaku. Unsur-unsur alami dapat dilihat dari perspektif pemrograman berorientasi objek (object-oriented Programming). Mempertimbangkan, misalnya, markup berikut:

Hasil:

Our header inherited a red border through CSS cascading

Seperti yang Anda lihat di atas, header mewarisi properti warna font dari wadah orangtua meskipun perilaku CSS cascading. Perilaku ini sangat mirip dengan konsep inheritance dalam OOP. Kita juga dapat melihat bahwa header adalah anak dari wadah, mewarisi sifat-sifat tertentu, didasarkan pada perilaku dari elemen. Ketika kita melihat unsur-unsur kami dari perspektif ini, kami memiliki definisi yang lebih baik dari apa yang kami berniat untuk melakukannya dengan unsur-unsur lihat kami dan dapat merangkum gaya dan fungsionalitas yang lebih baik.

Dalam pandangan, kita akan memiliki markup. Namun, markup mungkin bersarang sebagian pemandangan seperti sidebars, header, footer, rel kanan (atau kiri), dan satu atau beberapa bagian konten. Semua pandangan parsial ini harus dipandang sebagai entitas mereka sendiri, yang mampu memiliki keadaan, konteks, dan ruang lingkup mereka sendiri.

"Ketika Anda hamil pandangan dan pemandangan sebagian sebagai objek, itu membuat menulis kode sisi klien Anda jauh lebih mudah."


Menerjemahkan konsep ini ke dalam gaya dan script

Banyak pengembang cenderung untuk menulis JavaScript dari prosedural atau fungsional sudut pandang, dan sering mengabaikan untuk mempertimbangkan kecenderungan alami yang ditawarkan dalam pendekatan pembangunan berbasis pandangan dan Instansiasi paralel (membuat sebuah instance baru dari pandangan kita membuat contoh baru dari objek JavaScript yang sesuai dengan pandangan) ketika bekerja di kerangka kerja MVC. Hal ini sering terjadi bahwa aku berlari ke file JavaScript yang metode hanya satu demi satu. Meskipun perilaku ini bekerja, dan adalah umum, itu tidak sangat efisien untuk pemeliharaan kode, debugging, atau ekstensi kode saat ini atau masa depan ketika Anda bekerja secara ekstensif dengan dilihat.

Menjauh dari kebiasaan ini dan mulai menulis kode perilaku yang baik, ketika Anda mulai untuk meletakkan pandangan Anda scripting dan gaya, mengikuti peraturan umum berikut:

Golden aturan pembangunan JavaScript berbasis View

  • Setiap tampilan yang diberikan dari tindakan pada controller harus memiliki objek JavaScript sendiri.
  • Setiap tampilan sebagian yang dimuat di dalam tampilan harus memiliki objek JavaScript sendiri.
  • Nama objek Anda sama dengan pemandangan (atau sebagian pemandangan). Ini akan membuat lebih masuk akal untuk Anda dan orang lain yang menyentuh kode Anda.
  • Menggunakan kasus Pascal untuk semua objek (yaitu tentang, Sidebar, dll). Pandangan Anda harus sudah, jadi mengapa tidak melakukan sama untuk objek JavaScript Anda?
  • Konstanta semua benda-benda ini harus disimpan dalam konstruktor. Ini berarti jika Anda memiliki properti yang akan digunakan dalam beberapa metode, metode ini dapat semua mengakses properti ini.
  • Semua metode yang akan dipanggil pada (atau sebagian pemandangan) harus terikat dengan prototipe dari objek yang sesuai dengan pandangan itu.
  • Semua acara binding untuk melihat (atau pemandangan) harus terkandung dalam metode mengikat acara mereka sendiri, yang ditempatkan pada prototipe.

Pertimbangkan diagram berikut:

Our MVC Layout viewed with styles and scriptsOur MVC Layout viewed with styles and scriptsOur MVC Layout viewed with styles and scripts

Saya biasanya membuat skrip dan gaya tampilan khusus dan kemudian mengambil apa yang saya butuhkan dari stylesheet utama dan pustaka skrip yang saya buat yang akan digunakan pada banyak tampilan. Ini juga mengurangi jumlah kode yang digunakan.


Membuat Objek Berbasis Tampilan

Dalam artikel ini, kami akan meletakkan keluar struktur untuk halaman tentang kami pada situs berbasis MVC. Untuk memulai, kita akan menciptakan struktur seperti ditunjukkan di atas dalam diagram sebelumnya. Dari sana, kita akan membuat objek tentang, dan mulai menambahkan metode ke prototipe. Pertama, pertimbangkan tata letak visual yang berikut:

Sample About Us Page Layout

Ini adalah tata letak yang sangat logis dan banyak digunakan untuk halaman web. Kita dapat segmen halaman kami ke objek visual yang terpisah. Untuk masing-masing pandangan ini, kita dapat membuat sebuah objek logis yang akan sesuai dengan itu. Saya biasanya menghilangkan informasi berulang dalam nama file atau nama kelas yang digunakan oleh MVC untuk menentukan URI dari rute dan sebagai gantinya tetap dengan sesuatu yang mudah untuk tetap konsisten.

Untuk tampilan halaman, aku biasanya menelepon objek JavaScript saya dengan nama tampilan. Berikut adalah contoh dari objek AboutView saya:

Dalam contoh di atas, kami membuat objek JavaScript dalam format fungsi, memberikan kemampuan untuk melayani sebagai objek constructor untuk semua metode menyerukan tentang pandangan. Dengan memilih format ini, kita dapat instantiate sebuah instance baru dari ini, seperti yang kita lakukan dengan pandangan kita Server-Side (dengan mengatakan baru AboutView();). Dari sini, kita dapat menetapkan properti dan metode ke objek ini. Untuk menetapkan metode ke objek ini, kita akan memerlukan akses ke prototipe objek.


JavaScript's prototipe adalah teman Anda

Pengembang sering digagalkan oleh kegesitan (dan ambiguitas) JavaScript's objek prototipe.

Pengembang sering digagalkan oleh kegesitan (dan ambiguitas) JavaScript's objek prototipe. Bagi banyak orang, itu dapat membingungkan untuk menggunakan dan mengerti dan menambah dimensi lain pengkodean. Sebagai JavaScript menjadi lebih peristiwa-didorong dengan HTML5, AJAX, dan konsep-konsep web 2.0, JavaScript cenderung bersandar alami untuk pengembangan prosedur yang mudah untuk mengembangkan tapi sulit untuk mempertahankan, skala, dan meniru.

Pikirkan kata Prototipe sebagai istilah yang keliru untuk saat ini. Ketika saya memikirkan Prototipe, saya berpikir tentang 'konsep kasar' atau dasar untuk pewarisan, tetapi ini bukan masalahnya.

'Pada kenyataannya, perspektif yang lebih baik untuk Prototipe adalah Pointer Object dalam memori.'

Ketika kita membuat sebuah objek, kita kemudian instantiate sebuah instance baru dari itu. Ketika kita melakukan itu, kami menciptakan sebuah tempat di memori yang objek dapat dirujuk (ingat, objek dalam JavaScript adalah referensi jenis, tipe primitif bukan; menciptakan variabel lain sama dengan objek dan kemudian mengubah nilai-nilai yang benar-benar akan mengubah asli objek dalam pointer). Ketika kita membuat sebuah objek, instantiate sebuah instance baru dari itu, dan kemudian memodifikasi "Pointer", atau prototipe, kami menambah bidang dan metode objek dalam memori langsung (jelas kami ingin menambahkan semua hal ini sebelum Instansiasi).

Berikut adalah contoh membuat metode di tentang objek prototipe:

Seperti yang Anda lihat di atas, kami berisi properti dari objek tentang dalam konstruktor, telah membuat satu titik acuan untuk mengikat acara (dalam hal ini kami menggunakan jQuery untuk membuat acara binding, namun Anda dapat menggunakan atau kerangka JavaScript itu sendiri), dan telah menempatkan metode toggleSearch pada prototipe dari objek tentang mengandung metode untuk objek. Kami juga telah memanggil metode bindEvents() di objek sehingga dipanggil pada instantiation.

Sekarang, perhatikan kode berikut untuk Sidebar Partial View:

Catatan: saya disebut pSidebar objek karena ini adalah sebuah partial view, bukan tampilan penuh. Ini preferensi saya adalah untuk membedakan antara keduanya, tapi membuat hal-hal yang lebih jelas.

Keindahan menggunakan pendekatan ini adalah - kita dapat menggunakan nama metode yang sama yang kita gunakan dalam tentang objek dan kita akan memiliki tidak ada konflik. Hal ini karena metode ini terikat untuk prototipe objek itu sendiri, tidak namespace global. Ini menyederhanakan kode kita dan memungkinkan untuk semacam "template" untuk masa depan scripting.


Instantiate Hanya sesuai Kebutuhan

Setelah Anda membuat benda Anda, memanggil mereka sederhana. Tidak lagi Anda perlu tergantung pada kerangka API peristiwa ketika dokumen Anda dimuat atau siap. Sekarang, Anda hanya dapat instantiate objek dan peristiwa-peristiwa yang akan terikat dan dieksekusi seperlunya. Jadi, mari kita instantiate objek tentang kami:

Di dalam tampilan Anda di mana Anda akan memanggil skrip tampilan khusus Anda (tergantung pada bahasa templating Anda), cukup panggil instance baru objek Anda dan sertakan file sebagai berikut:

Seperti yang Anda lihat, saya melewati dalam judul halaman untuk view (yang dapat menjadi argumen untuk kebutuhan apapun - bahkan Model Data. Ini memberi Anda hebat konteks atas data model Anda dan memungkinkan Anda untuk memanipulasi data dalam JavaScript sangat mudah.

Seperti Anda tentang objek, memanggil sebagian pemandangan Anda sama mudahnya. Saya akan sangat menyarankan memanggil contoh baru Anda pemandangan JavaScript objek dalam objek constructor - hal ini memastikan bahwa Anda hanya menelepon ini yang diperlukan dan bahwa mereka adalah kolektif di satu tempat.

Seperti yang Anda lihat, oleh referensi objek Sidebar sebagai properti lokal tentang objek, kita sekarang mengikat contoh, yang adalah perilaku yang sangat alami - contoh ini adalah sekarang tentang halaman Sidebar.

Jika Anda tidak perlu mereferensikan tampilan parsial setelah fakta, Anda bisa langsung membuat instance dari itu tanpa menugaskannya dalam konstruktor objek, seperti:

Dari sini, kita perlu lakukan adalah menambahkan skrip lain untuk skrip kami disebut dalam pandangan kami:


Mengapa teknik ini adalah menguntungkan

Setelah struktur ini di tempat, kita kemudian dapat menyesuaikan objek JavaScript untuk mencocokkan pandangan kami dan menerapkan metode yang diperlukan untuk objek untuk mempertahankan cakupan. Dengan menciptakan sebuah objek pemandangan-paralel dan bekerja dari prototipe objek itu, kita melihat manfaat sebagai berikut:

  1. Nomenklatur membuatnya lebih mudah untuk menavigasi melalui kode
  2. Kami secara alami menamai objek kami, mengurangi kebutuhan akan nama metode yang panjang dan terlalu banyak menggunakan penutupan anonim.
  3. Sedikit untuk tidak ada konflik dalam code yang lain karena metode kami pada prototipe dari objek, bukan pada tingkat global
  4. Ketika instantiating kami sebagian pemandangan dalam pandangan kami objek constructor dan menugaskan mereka untuk referensi variabel lokal, kami secara efektif membuat salinan lokal terikat objek pemandangan itu.
  5. Kami memiliki definisi yang kuat dari konteks dan dapat menggunakan kata kunci 'ini' tanpa khawatir.
  6. Debugging menjadi jelas karena semua metode yang ditampilkan dalam tumpukan terikat di satu tempat.

Kesimpulan

Sebagai pola desain MVC terus menjadi lebih populer di dunia desain, pengembangan JavaScript objek untuk menemani elemen DOM manipulasi akan berubah menjadi lebih disesuaikan terhadap manipulasi pandangan yang spesifik dan acara khusus. Dengan menyesuaikan objek JavaScript kami ke instantiate secara paralel dengan pandangan kita, kita dapat memiliki di tangan stateful hubungan antara dua-satu yang symantically dalam selera yang baik, mudah untuk melangkah melalui, sederhana untuk menjaga, dan sempurna untuk ekspansi sebagai tampilan tumbuh atau perubahan, menciptakan hubungan yang permeabel dan diperluas antara markup dan scripting.

Dengan memanfaatkan sebuah objek prototipe, kami mampu menjaga konteks yang tepat pada objek pandangan kami scripting dan memperluas objek dengan berulang-ulang pembangunan kerangka-of-pikiran. Kita kemudian dapat mereplikasi format ini melalui pandangan kami parsial, menyelamatkan kita waktu, kekuatan otak dan risiko bug dan perilaku tak terduga.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.