Verdadera modularidad
La modularización frontal comenzó muy temprano. Ya sea que sea necesario.js, Browserify for Modular Packaging, o Angular para la inyección de dependencia, podemos dividir el código JS en módulos pequeños y ensamblarlos. Luego también usaremos menos o SASS para dividir el archivo CSS en pequeños módulos para escribir, e incluso sentimos las características orientadas a objetos de encapsulación, herencia, polimorfismo, etc. en el código CSS.
Sin embargo, antes de que saliera un Pack, lo que llamamos modularidad no podría considerarse modularidad en absoluto. ¿Por qué decimos esto? Debido a que hay un problema importante que no se ha resuelto, que es la dependencia del módulo JS en los módulos CSS.
Por ejemplo, si tenemos un modal de módulo JS, ¿podemos importarlo directamente y llamarlo para aparecer para aparecer un cuadro de diálogo? ¿Está bien como se muestra en la figura a continuación?
Teóricamente, este debería ser el caso, pero de hecho, este modal realmente se basa en un módulo CSS correspondiente. Si no importamos este módulo, no podemos aparecer un cuadro de diálogo normal. Además, la importación de este módulo CSS no está escrito en el mismo lugar que importar el módulo JS, sino en otro archivo CSS. En otras palabras, la dependencia es realmente así:
Para usar un módulo, necesitamos hacer una operación de importación en dos archivos uno por uno. ¡Esto es en realidad algo muy extraño e irrazonable! ¿Por qué necesitamos ser modulares? Es para encapsular un módulo, que se puede usar después de importarlo. Cómo se implementa y qué dependencias tiene es manejada por completo por este módulo en sí. Es decir, la dependencia de modal.css en la figura anterior debe ser manejada por el propio modal.js.
Pero hemos estado escribiendo módulos como este para el front-end que hemos escrito durante N años, no porque sea correcto, sino porque estamos acostumbrados a esta manera incorrecta. Ahora usando Vue, podemos encapsular completamente todas las dependencias de un módulo. Ya sea plantillas, CSS o JS, ya no necesitamos preocuparnos por ello. Simplemente presente este módulo y puede usarlo, y las dependencias del módulo se manejan por sí mismas.
Entonces nuestra dependencia se convierte en:
modal.vue contiene todas las dependencias requeridas, por lo que ya no necesitamos lidiar con el CSS o incluso las plantillas correspondientes. Este es el efecto que debe lograr la modularidad.
Crear un proyecto VUE
Vue proporciona una herramienta Vue-Cli para crear una plantilla de proyecto: https://github.com/vuejs/vue-cli
Aquí probé por primera vez otro proyecto de plantilla: https://github.com/vuejs-templates/webpack
Luego podemos escribir módulos en lugar de usar JS puro, pero use Webpack para escribir todo el contenido relacionado con un módulo en un archivo. Tomando la lista anterior de TODO como ejemplo, de hecho, el capítulo anterior solo habló sobre el uso del componente, así que escribí de esa manera. Cambiémoslo a un mejor método de escritura de la siguiente manera:
List.vue:
<template> <ul> <li v-For = 'toDo in list'> <etiqueta v-bind: class = "{ded: toDo.done}"> <input type = "checkbox" v-model = "toDo.done"/> {{toDo.title}} </label> </li> </ul> </tempate> {type: array}}, data () {return {list: []}}, eventos: {add (input) {if (! input) return false this.list.unshift ({title: input, ded: false})}}} </script> <style lang = "menos" scoped> ul {margin-subft: 2rem; relleno: 0; .done {text-decoration: line-through; }} </style>Form.vue:
<template> <h1> {{username}} 's TODO LIST </h1> <form v-on: subt = "add" v-on: subt.prevent> <input type = "text" v-model = "input"/> <input type = "subt" value =' add '/> </form> </tempate> <script> exportar {props: {{{type, {type, {type string: {type, {type, {type: 'Unnamed'}}, data () {return {input: ''}}, métodos: {add () {this. $ Desplazamiento ('add', this.input) this.input = '' '}}} </script>TODO.VUE:
<Template> <Div id = "TODO"> <TODOFORM USERNAME = 'LILY'> </TODOFORM> <TODO-LIST> </TODO-LIST> </div> </template> <script> Importar form de './Form.vue'Import de' ./list.vue'Export {componente: {'a- a-form': forma: ': List}, eventos: {add (input) {this. $ Broadcast ('add', input)}}} </script> <style> </yle>App.Vue:
<Template> <TODO> </todo> </template> <script> Importar demente desde './Components/TODO.VUE'Export predeterminado {Componentes: {' toDo ': toDO}} </script> <syle> </yle>De esta manera, reescribimos la lista anterior de TODO de manera modular. La modularidad es una de las bases para construir aplicaciones grandes, pero esto no es suficiente, aún necesitamos hacer:
• La mejor gestión estatal, gestión independiente del estado compartida por diferentes componentes
• Pruebas automatizadas
• Enrutamiento, etc.
Aquí solo hacemos uno de ellos, que es separar el estado en un módulo separado. Obviamente, para una aplicación de lista de tareas, la estructura de datos que guarda la lista de TODO es el estado compartido por diferentes componentes.
¿Por qué necesitábamos transmitir eventos antes? Fue porque los datos se operarán entre diferentes componentes se guardaron en list.vue. Por lo tanto, cuando desee agregar una pieza de datos en Form.vue, debe notificar a List.vue para agregarlo a través de eventos.
En otras palabras, estos datos no son privados por list.vue, y deben ser propiedad públicamente de estos dos componentes. Ahora que es propiedad de list.vue, form.vue no puede modificarlo y tiene que notificarlo a través del evento.
Aunque el método del evento es elegante, en realidad podemos hacerlo mejor, lo que es separar los datos, de modo que tanto form.vue como list.vue puedan modificar directamente los datos sin tener que enviar notificaciones.
Aquí agregamos un archivo store.js:
Exportar predeterminado {list: [], add (title) {if (! title) return this.list.unshift ({title: title, hecho: falso})}}Entonces podemos cambiar list.vue a esto, y solo la parte JS del código se publica aquí:
Tienda de importación de '../store.js'Export predeterminado {props: {initList: {type: array}}, data () {return store}}Form.vue no requiere transmisión, puede agregarlo llamando directamente al método Store.Add:
Importar tienda de '../store.js'Export predeterminado {props: {username: {type: string, default:' sinnamed '}}, data () {return {input:' '}}, métodos: {add () {store.add (this.input) this.input =' '}}}Después de este cambio, toda la lógica será mucho más clara, y cuanto más compleja sea la aplicación, más debe extraer la tienda pública, de lo contrario habrá eventos de transmisión que vuelan por todo el cielo.
Además, después de usar esta plantilla del proyecto, la relieve caliente es tan genial y se guarda refrescante.
El código fuente anterior está aquí: https://github.com/lihongxun945/vue-webpack-todo-list
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.