Penulis artikel, terjemahan yang kami terbitkan hari ini, percaya bahwa ada lebih banyak programmer di dunia yang, ketika mereka perlu mengembangkan aplikasi web sederhana, beralih ke
jQuery . Biasanya ini terjadi ketika halaman tertentu perlu dilengkapi dengan fitur interaktif sederhana, tetapi menggunakan semacam kerangka JavaScript untuk ini sepertinya berlebihan. Bagaimanapun, ini adalah kilobyte kode yang tidak perlu, templat, alat untuk membangun proyek, alat untuk mengemas modul ... Pada saat yang sama, menghubungkan ke halaman jQuery menggunakan sumber daya CDN semudah menembaki pir.
Artikel ini akan membahas cara menerjemahkan proyek yang dibuat menggunakan jQuery ke
Vue.js. Proyek ini akan dibuat di jQuery, dan kemudian didesain ulang menggunakan Vue. Penulis materi ingin menunjukkan kepada semua orang bahwa penggunaan Vue, bahkan dalam proyek yang relatif kecil, tidak selalu berarti peningkatan berlebihan dalam ukuran kode proyek tersebut dan beban tambahan yang besar pada programmer. Sebaliknya, ini dengan ukuran kode bantu yang hampir sama dengan ketika menggunakan jQuery, memungkinkan Anda untuk meningkatkan produktivitas dan meningkatkan kualitas aplikasi.
Tinjauan Proyek
Kami akan mengembangkan akun elektronik sederhana berdasarkan templat sumber terbuka
ini dari Sparksuite.
Seringkali, studi kasus tersebut menggunakan semua jenis daftar yang harus dilakukan. Saya berharap bahwa penyimpangan dari tradisi ini akan membuat cerita lebih segar dan lebih menarik, dan, pada saat yang sama, tugas kita akan cukup sulit untuk menunjukkan keuntungan menggunakan sesuatu seperti Vue untuk mengembangkan proyek-proyek kecil. Manual ini dirancang sehingga setiap orang tanpa kesulitan khusus dapat mereproduksi dan menguasai metode kerja yang diusulkan.
Berikut adalah templat akun yang ingin kami kerjakan.
Faktur elektronikKami akan menambahkan fitur interaktif ke dalamnya, sehingga memungkinkan untuk memilih produk, jumlah dan harga satuan. Ketika mengubah nilai, total biaya barang dan jumlah total dokumen akan dihitung ulang. Selain itu, kami akan menambahkan tombol di sini yang memungkinkan Anda untuk memasukkan baris kosong baru ke dalam akun.
Saya memodifikasi templat dengan mengonversi kode HTML dari string kosong ke bentuk berikut:
<tr class="item"> <td><input value="" /></td> <td>$<input type="number" value="0" /></td> <td><input type="number" value="1" /></td> <td>$0.00</td> </tr>
Pengembangan proyek JQuery
Pertama, mari kita lihat bagaimana menyelesaikan masalah kita menggunakan jQuery.
$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);
Kami menghubungkan pendengar acara ke tabel. Pendengar ini akan memanggil fungsi
calculateTotals ketika nilai yang sesuai dengan biaya unit produk atau kuantitasnya berubah:
function calculateTotals() { const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get(); const total = subtotals.reduce((a, v) => a + Number(v), 0); $('.total td:eq(1)').text(formatAsCurrency(total)); }
Fungsi mengambil baris-baris tabel dan berjalan melalui mereka, melewati setiap baris ke fungsi Subtotal
calculateSubtotal dan menjumlahkan hasilnya. Hasil perhitungan jatuh ke dalam konstanta konstan. Akibatnya, jumlah total dokumen diganti di bidang terkait akun.
function calculateSubtotal(row) { const $row = $(row); const inputs = $row.find('input'); const subtotal = inputs[1].value * inputs[2].value; $row.find('td:last').text(formatAsCurrency(subtotal)); return subtotal; }
Dalam kode ini, kami mengambil referensi ke semua bidang
<input> ada di baris, lalu kami mengalikan nilai yang disimpan di bidang kedua dan ketiga untuk mendapatkan nilai
subtotal . Kemudian nilai ini dimasukkan ke sel terakhir baris. Kami memformat nilai ini menggunakan fungsi
formatAsCurrency . Ini kodenya:
function formatAsCurrency(amount) { return `$${Number(amount).toFixed(2)}`; }
Selain itu, kami memiliki fungsi bantu kecil yang kami gunakan untuk memastikan tampilan bidang yang sama dengan jumlah barang dan dokumen secara keseluruhan. Yaitu, kita perlu memiliki tanda $ di depan angka-angka di bidang ini, dan bahwa itu adalah angka desimal dengan dua tempat desimal.
$('.btn-add-row').on('click', () => { const $lastRow = $('.item:last'); const $newRow = $lastRow.clone(); $newRow.find('input').val(''); $newRow.find('td:last').text('$0.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); });
Dan akhirnya, kami memiliki pengendali acara untuk mengklik tombol
Add row , yang berfungsi untuk menambahkan baris baru ke dokumen. Di sini kita mengambil baris terakhir dalam tabel yang berisi data produk, dan membuat salinannya. Pada saat yang sama, kami memasukkan data standar ke bidang baris baru ini. Selain itu, kami dapat menjaga kenyamanan pengguna dan menetapkan fokus pada bidang pertama dari baris baru, yang akan memungkinkan pengguna, segera setelah menambahkan baris baru, untuk mulai memasukkan data di bidang pertama.
Ini adalah contoh kerja dari akun yang fitur interaktifnya diimplementasikan menggunakan alat jQuery.
Kerugian dari Solusi Berbasis jQuery
Mari kita bertanya pada diri sendiri apa saja kelemahan dari pendekatan di atas, atau lebih tepatnya, bagaimana meningkatkan proyek kita.
Anda mungkin pernah mendengar tentang perpustakaan baru, seperti Vue dan React, yang dikatakan memungkinkan mereka untuk bekerja dalam gaya deklaratif daripada imperatif. Jika Anda melihat kode jQuery di atas, jelas bahwa kode ini terutama dibaca sebagai seperangkat instruksi yang menggambarkan memanipulasi DOM. Tujuan setiap bagian dari kode ini, yaitu, jawaban atas pertanyaan tentang apa yang dilakukannya, seringkali cukup sulit untuk dipecahkan dengan melihat bagaimana ia melakukannya. Tentu saja, Anda dapat membuat maksud dari fragmen kode yang digunakan lebih jelas dengan memecahnya menjadi fungsi dengan nama yang dipilih dengan cermat. Namun, jika Anda meninggalkan kode ini untuk sementara waktu, dan kemudian kembali lagi, ternyata untuk memahaminya, Anda masih harus melakukan beberapa upaya.
Masalah lain dengan kode ini adalah bahwa keadaan aplikasi disimpan di DOM. Informasi tentang produk yang ingin dipesan pengguna hanya ada sebagai bagian dari markup HTML di antarmuka pengguna. Jika yang kita butuhkan adalah meng-output data di satu tempat, maka masalah ini sepertinya tidak terlalu serius. Namun, begitu diperlukan untuk menampilkan data ini di beberapa tempat aplikasi, kita dihadapkan dengan tugas menyinkronkan data. Tanpa, seperti dalam kasus kami, satu sumber data yang dapat diandalkan, sangat sulit untuk tetap memperbaruinya sepanjang aplikasi.
Saat menggunakan jQuery, tidak ada yang mencegah kita menyimpan keadaan aplikasi di luar DOM dan menghindari masalah yang dijelaskan di atas, perpustakaan seperti Vue menyediakan fitur yang membantu membangun aplikasi dengan arsitektur yang baik. Perpustakaan ini membantu programmer menulis kode yang lebih bersih dan lebih terstruktur.
Terjemahan Proyek pada Vue
Sekarang mari kita bicara tentang cara membuat ulang fungsionalitas yang sama di Vue. Untuk memanfaatkan kapabilitas Vue, cukup sambungkan perpustakaan ini ke halaman web biasa, seperti yang Anda lakukan dengan jQuery. Artinya, tidak perlu menggunakan sistem untuk mengemas modul atau transpiler, Anda tidak perlu memecah aplikasi menjadi komponen dan menguraikan kode mereka ke dalam file .vue.
Kami mulai menerjemahkan proyek ke dalam Vue dengan mengganti konten dari
<script> :
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
Langkah selanjutnya adalah membuat instance Vue baru:
const app = new Vue({ el: 'table' });
Satu-satunya parameter yang diteruskan ke konstruktor instance Vue baru adalah
el . Ini adalah pemilih (sama seperti yang digunakan dalam jQuery) yang mengidentifikasi bagian dari dokumen yang ingin kita kontrol dengan Vue.
Vue dapat diberi tugas berbagai ukuran - mulai dari mengelola seluruh halaman (dalam hal, misalnya, aplikasi satu halaman), hingga sebuah fragmen kecil yang terlampir dalam
<div> . Dalam contoh kami, Vue akan bertanggung jawab untuk bekerja dengan tabel HTML.
Data
Tambahkan data bersyarat untuk tiga baris dokumen ke instance Vue:
const app = new Vue({ el: 'table', data: { items: [ { description: 'Website design', quantity: 1, price: 300 }, { description: 'Hosting (3 months)', quantity: 1, price: 75 }, { description: 'Domain name (1 year)', quantity: 1, price: 10 }, ] } });
Properti
data adalah tempat kami menyimpan status aplikasi. Status tidak hanya mencakup data yang dapat digunakan aplikasi kita, tetapi juga informasi tentang keadaan antarmuka pengguna (misalnya, bagian aplikasi mana, yang terdiri dari beberapa tab, saat ini aktif, atau apakah widget tertentu diminimalkan, seperti "akordeon", atau diperluas).
Vue membantu menjaga status aplikasi terpisah dari presentasinya (yaitu, dari DOM), dan membantu menyimpan status terpusat di satu tempat, yang merupakan sumber tunggal data yang dapat diandalkan.
Modifikasi Templat
Sekarang konfigurasikan templat sehingga menampilkan data yang disimpan dalam objek
data . Karena kami memberi tahu kerangka kerja bahwa kami ingin bekerja dengan tabel menggunakan instance Vue, kami dapat menggunakan sintaks template Vue dalam kode HTML yang menjelaskan tabel ini untuk memberi tahu Vue cara merender tabel dan cara menggunakannya untuk bekerja.
Menggunakan atribut
v-for , kita dapat menyimpulkan satu blok kode HTML untuk setiap elemen dari array
items :
<tr class="item" v-for="item in items"> </tr>
Vue akan mengulangi markup ini untuk setiap elemen array (atau objek) yang diteruskan ke
v-for . Ini memungkinkan kita untuk merujuk ke setiap elemen dalam loop. Dalam hal ini, elemen ini diwakili oleh variabel
item . Karena Vue mengawasi properti dari objek
data , framework akan secara dinamis memperbarui markup ketika konten dari array
items berubah. Yang perlu kita lakukan adalah memodifikasi status dengan menambahkan atau menghapus elemen, dan Vue akan secara otomatis memperbarui antarmuka pengguna.
Selain itu, kami perlu menambahkan kolom input yang dapat diisi pengguna dengan memasukkan deskripsi produk, harga satuan, jumlah:
<td><input v-model="item.description" /></td> <td>$<input type="number" v-model="item.price" /></td> <td><input type="number" v-model="item.quantity" /></td> <td>${{ item.price * item.quantity }}</td>
Di sini kita menggunakan atribut
v-model untuk mengkonfigurasi pengikatan data dua arah antara bidang input dan properti dalam model data. Ini berarti bahwa mengubah data di bidang input akan menyebabkan perubahan mereka dalam model, dan sebaliknya.
Di sel terakhir, kami menggunakan kurung kurawal
{{}} , kami menggunakannya untuk menampilkan teks. Anda dapat menggunakan ekspresi JavaScript yang berfungsi di dalam tanda kurung. Dalam hal ini, kami mengalikan dua properti elemen dan menampilkan apa yang terjadi. Sekali lagi, Vue mengawasi model data, mengubah properti apa pun akan secara otomatis menghitung ulang ekspresi.
Acara dan Metode
Sekarang kami memiliki template yang siap untuk menampilkan koleksi
items dan kami dihadapkan dengan pertanyaan tentang bagaimana menambahkan baris baru ke tabel. Karena Vue akan menampilkan semua yang ada dalam array
items ke halaman, untuk menampilkan string kosong pada halaman, cukup untuk meneruskan objek Vue dengan nilai apa pun yang harus ada dalam array
items .
Untuk membuat fungsi yang dapat diakses dari templat, Anda harus meneruskan fungsi ini ke instance Vue sebagai properti dari objek
methods :
const app = new Vue({
addRow metode
addRow , yang dapat dipanggil untuk menambahkan item baru ke array
items :
methods: { addRow() { this.items.push({ description: '', quantity: 1, price: 0 }); }, },
Harap perhatikan bahwa metode apa pun yang kami buat akan secara otomatis terikat pada instance Vue, yang akan memungkinkan kami untuk mengakses properti objek
data dan metode lain sebagai properti dari metode ini.
Jadi sekarang kita punya metode. Bagaimana cara menyebutnya dengan mengklik tombol
Add row ? Untuk menambahkan pendengar acara ke kontrol dalam templat, Vue menggunakan sintaks
v-on:event-name .
<button class="btn-add-row" @click="addRow">Add row</button>
Vue juga menyediakan cara pintas untuk
v-on : construct, yang terlihat seperti
@ . Ini digunakan dalam cuplikan kode di atas. Anda bisa menggunakan metode apa pun dari instance Vue sebagai pengendali event.
Properti yang Dihitung
Sekarang kita hanya perlu menarik jumlah total untuk dokumen di bagian bawah faktur. Ini bisa dilakukan di template itu sendiri. Seperti yang telah disebutkan, Vue memungkinkan Anda menempatkan ekspresi JS yang berfungsi dalam konstruksi dari kurung keriting. Namun, jauh lebih baik untuk mematuhi pendekatan di mana hanya logika yang sangat sederhana dan tidak lebih disimpan dalam template. Jika logika dipisahkan dari templat, kodenya akan lebih bersih, akan lebih mudah untuk diuji.
Untuk tujuan ini, kita dapat menggunakan metode yang biasa, tetapi saya percaya bahwa dalam kasus ini, apa yang disebut
properti terkomputasi adalah yang terbaik bagi kita. Bekerja dengan sifat seperti itu menyerupai pekerjaan di atas dengan metode. Yaitu, untuk membuat properti seperti itu, objek yang
computed diteruskan ke
computed Vue, berisi fungsi yang hasil eksekusi yang ingin kita gunakan dalam templat:
const app = new Vue({ // ... computed: { total() { return this.items.reduce((acc, item) => acc + (item.price * item.quantity), 0); } } });
Sekarang properti yang dihitung dapat dirujuk dari templat:
<tr class="total"> <td colspan="3"></td> <td>Total: ${{ total }}</td>
Seperti yang mungkin Anda perhatikan, properti yang dihitung dalam template berfungsi seolah-olah itu adalah data. Dalam hal ini, Anda tidak perlu "memanggil" apa pun di templat. Menggunakan properti yang dihitung memiliki keunggulan lain. Vue adalah sistem yang cukup cerdas, ini menyimpan nilai yang dikembalikan dan menceritakannya hanya jika properti tempat nilai properti yang dihitung bergantung diubah.
Jika kami menggunakan metode untuk menghitung jumlah total untuk dokumen, perhitungan akan dilakukan setiap kali templat dikeluarkan. Namun, karena kami menggunakan properti yang dihitung, jumlah total dihitung ulang hanya ketika mengubah
quantity atau nilai
price di baris tabel.
Filter
Anda mungkin telah memperhatikan bahwa ada satu kesalahan kecil dalam implementasi proyek kami yang dibuat menggunakan Vue. Terdiri dari fakta bahwa ketika harga barang individual dinyatakan dalam bilangan bulat, nilai yang dihitung dari jumlah total dalam baris dan jumlah total dalam dokumen ditampilkan sebagai nilai dolar keseluruhan, tanpa sen. Kami ingin, seperti dalam contoh jQuery, angka-angka ini selalu berisi dua tempat desimal.
Alih-alih memodifikasi kode yang bertanggung jawab untuk menghitung nilai total baris, dan kode yang menghitung jumlah total untuk dokumen, kita dapat mengambil keuntungan dari kemampuan pemformatan data Vue yang nyaman. Ini tentang filter.
Seperti yang mungkin sudah Anda pahami, untuk membuat filter, cukup dengan melewatkan objek (
filters dalam hal ini) dengan kunci yang sesuai dengan instance Vue:
const app = new Vue({
Di sini kami telah membuat filter yang sangat sederhana yang disebut
currency . Ini memanggil fungsi
toFixed(2) untuk nilai numerik yang diteruskan ke sana dan mengembalikan hasilnya. Anda dapat menggunakan filter ini di templat sebagai berikut:
<td>Total: ${{ total | currency }}</td>
Ini adalah implementasi proyek kami di Vue.
Ringkasan
Jika Anda membandingkan dua versi proyek, satu dibuat menggunakan jQuery, dan yang kedua ditulis dalam Vue, Anda akan melihat kekuatan berikut dari aplikasi berbasis Vue:
- Pemisahan yang jelas antara antarmuka pengguna, logika, dan data yang mengontrol antarmuka. Kode lebih jelas, akan lebih mudah untuk diuji.
- Deskripsi deklaratif antarmuka. Programmer hanya perlu memperhatikan cara menggambarkan apa yang ingin dilihatnya di layar, dan bukan cara mengakses DOM untuk memberikan tampilan aplikasi yang diinginkan pada halaman aplikasi.
Pustaka Vue dan jQuery memiliki ukuran yang hampir sama (dalam kilobyte). Tentu saja, ukuran jQuery dapat dikurangi dengan menggunakan rakitan perpustakaan kami sendiri, tetapi bahkan dalam proyek yang relatif sederhana, seperti contoh akun elektronik kami, saya percaya bahwa kemudahan pengembangan dan keterbacaan kode membenarkan sedikit peningkatan dalam ukuran aplikasi.
Selain itu, kemampuan Vue jauh lebih luas daripada yang kami jelaskan di sini. Kekuatan kerangka kerja ini terletak pada kenyataan bahwa kerangka ini memungkinkan Anda membuat komponen antarmuka pengguna yang modular dan dapat digunakan kembali sehingga Anda dapat membangun aplikasi klien yang kompleks.
Jika Anda tertarik pada topik pengembangan aplikasi web di Vue, lihat
materi ini . Selain itu, jika Anda mempertimbangkan untuk memindahkan proyek dari JS murni ke Vue, berikut adalah
publikasi terbaru kami tentang hal ini.
Pembaca yang budiman! Apakah Anda menggunakan jQuery? Dan, jika Anda menggunakannya, apakah Anda berencana untuk mengubah perpustakaan ini ke sesuatu yang lain, misalnya - menjadi Vue?