Modularitas sejati
Modularisasi front-end dimulai sangat awal. Apakah itu diperlukan.js, browserifikasi untuk kemasan modular, atau sudut untuk injeksi ketergantungan, kita dapat membagi kode JS menjadi modul kecil dan merakitnya. Kemudian kita juga akan menggunakan lebih sedikit atau sedikit untuk memecah file CSS menjadi modul kecil untuk menulis, dan kita bahkan merasakan karakteristik enkapsulasi, pewarisan, polimorfisme, dll. Dalam kode CSS.
Namun, sebelum webpack keluar, apa yang kami sebut modularitas tidak dapat dianggap sebagai modularitas sama sekali. Mengapa kita mengatakan ini? Karena ada masalah penting yang belum diselesaikan, yang merupakan ketergantungan modul JS pada modul CSS.
Misalnya, jika kita memiliki modul modul JS, dapatkah kita secara langsung mengimpor dan memanggilnya untuk memunculkan kotak dialog? Apakah tidak apa -apa seperti yang ditunjukkan pada gambar di bawah ini?
Secara teoritis, ini harus terjadi, tetapi pada kenyataannya, modal ini sebenarnya bergantung pada modul modul CSS yang sesuai. Jika kami tidak mengimpor modul ini, kami tidak dapat memunculkan kotak dialog normal. Selain itu, mengimpor modul CSS ini tidak ditulis di tempat yang sama dengan mengimpor modul JS, tetapi dalam file CSS lain. Dengan kata lain, ketergantungannya sebenarnya seperti ini:
Untuk menggunakan modul, kita perlu melakukan operasi impor dalam dua file satu per satu. Ini sebenarnya adalah hal yang sangat aneh dan tidak masuk akal! Mengapa kita perlu menjadi modular? Ini merangkum modul, yang dapat digunakan setelah mengimpornya. Bagaimana itu diimplementasikan dan dependensi apa yang dimilikinya sepenuhnya ditangani oleh modul ini sendiri. Artinya, ketergantungan pada modal.css pada gambar di atas harus ditangani oleh modal.js itu sendiri.
Tetapi kami telah menulis modul seperti ini untuk front-end yang telah kami tulis selama n tahun, bukan karena itu benar, tetapi karena kami terbiasa dengan cara yang salah ini. Sekarang menggunakan Vue, kita dapat sepenuhnya merangkum semua dependensi modul. Apakah itu template, CSS atau JS, kita tidak perlu peduli lagi. Cukup perkenalkan modul ini dan dapat menggunakannya, dan ketergantungan modul ditangani dengan sendirinya.
Maka ketergantungan kita menjadi:
Modal.vue berisi semua dependensi yang diperlukan, jadi kita tidak perlu lagi berurusan dengan CSS yang sesuai atau bahkan templat sendiri. Ini adalah efek yang harus dicapai oleh modularitas.
Buat Proyek Vue
Vue menyediakan alat vue-cli untuk membuat templat proyek: https://github.com/vuejs/vue-cli
Di sini saya pertama kali mencoba proyek templat lain: https://github.com/vuejs-templates/webpack
Kemudian kita dapat menulis modul alih -alih menggunakan JS murni, tetapi menggunakan webpack untuk menulis semua konten yang terkait dengan modul ke dalam file. Mengambil daftar TODO sebelumnya sebagai contoh, pada kenyataannya, bab sebelumnya hanya berbicara tentang penggunaan komponen, jadi saya menulis seperti itu. Mari ubah menjadi metode penulisan yang lebih baik sebagai berikut:
Daftar.vue:
<lemplate> <ul> <li v-for = 'TODO IN LIST'> <label v-bind: class = "{done: todo.done}"> <input type = "centang kotak" v-model = "TODO.DONE"/> {{{{TODO.TITLE}} </label> </li> </ul> {{{TODO.TITLE}} </label> </li> </Ul> </Ul> {{{{{{{{{{> {{{{{{{{{label> </label> </label> </label> </ulo/{{{{{{{{{{{{{{{{{{{{label> </label> </label Ketik: Array}}, data () {return {list: []}}, peristiwa: {add (input) {if (! input) return false this.list.unshift ({title: input, done: false})}} </script> <style lang = "less" scoped> ul {margin- lange; Padding: 0; .done {teks-dekorasi: line-through; }} </style>Form.vue:
<template> <h1> {{username}} daftar todo </h1> <form v-on: submit = "add" v-on: submit.prevent> <input type = "text" v-Model = "input"/<inpor type = "kirim" value = 'add' String, default: 'Unnamed'}}, data () {return {input: ''}}, metode: {add () {this. $ Dispatch ('add', this.input) this.input = ''}} </script>TODO.VUE:
<lemplate> <v id = "todo"> <TODO-Form nama pengguna = 'lily'> </do-form> <todo-list> </todo-list> </div> </listrate> <script> Formulir dari './Form.Vue'mport dari' ./list.vue' export Default {'form {' form {'form:'. Events: {add (input) {this. $ siaran ('add', input)}}} </script> <tyle> </style>App.vue:
<lemplate> <todo> </dodo> </lemplate> <script> impor todo dari './components/todo.vue'export default {komponen: {' todo ': todo}} </script> <tyle> </tyle>Dengan cara ini, kami menulis ulang daftar TODO sebelumnya sebagai modular. Modularitas adalah salah satu fondasi untuk membangun aplikasi besar, tetapi ini tidak cukup, kita masih perlu melakukan:
• Manajemen Negara Terbaik, Manajemen Independen Negara Dibagikan oleh Komponen yang Berbagai
• Pengujian Otomatis
• Routing, dll.
Di sini kita hanya melakukan salah satu dari mereka, yaitu memisahkan keadaan menjadi modul terpisah. Jelas, untuk aplikasi daftar TODO, struktur data yang menyimpan daftar TODO adalah negara yang dibagikan oleh komponen yang berbeda.
Mengapa kita perlu menyiarkan acara sebelumnya? Itu karena data yang akan dioperasikan antara berbagai komponen disimpan di List.vue. Oleh karena itu, ketika Anda ingin menambahkan sepotong data dalam form.vue, Anda harus memberi tahu List.vue untuk menambahkannya melalui acara.
Dengan kata lain, data ini tidak pribadi berdasarkan daftar.vue, dan setidaknya harus dimiliki secara publik oleh dua komponen ini. Sekarang setelah dimiliki oleh List.vue, form.vue tidak dapat memodifikasinya dan harus memberi tahu melalui acara tersebut.
Meskipun metode acara elegan, kami sebenarnya dapat melakukan lebih baik, yaitu untuk memisahkan data, sehingga baik Form.Vue dan List.vue dapat secara langsung memodifikasi data tanpa harus mengirim pemberitahuan.
Di sini kami menambahkan file Store.js:
Ekspor default {list: [], add (title) {if (! title) return this.list.unshift ({title: title, done: false})}}Kemudian kita dapat mengubah list.vue untuk ini, dan hanya bagian JS dari kode yang diposting di sini:
impor toko dari '../store.js'export default {props: {initlist: {type: array}}, data () {return store}}Form.vue tidak memerlukan penyiaran, Anda dapat menambahkannya dengan menghubungi metode Store.Add secara langsung:
Impor Store dari '../store.js'Export default {props: {username: {type: string, default:' unnamed '}}, data () {return {input:' '}},} {) {store.add (this.input) this.input ='}}} {) {store.add (this.input) this.input = '}}Setelah perubahan ini, seluruh logika akan jauh lebih jelas, dan semakin kompleks aplikasinya, semakin banyak Anda harus mengekstrak toko publik, jika tidak, akan ada acara siaran yang terbang di seluruh langit.
Selain itu, setelah menggunakan templat proyek ini, hot-reload sangat keren dan menyegarkan disimpan.
Kode sumber di atas ada di sini: https://github.com/lihongxun945/vue-webpack-todo-list
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.