Vraie modularité
La modularisation frontale a commencé très tôt. Qu'il soit requis.js, de navigation pour l'emballage modulaire ou angulaire pour l'injection de dépendance, nous pouvons diviser le code JS en petits modules et les assembler. Ensuite, nous utiliserons également moins ou SASS pour diviser le fichier CSS en petits modules à écrire, et nous ressentons même les caractéristiques orientées objet de l'encapsulation, de l'héritage, du polymorphisme, etc. dans le code CSS.
Cependant, avant la sortie de WebPack, ce que nous avons appelé la modularité ne pouvait pas être considéré comme la modularité. Pourquoi disons-nous cela? Parce qu'il y a un problème important qui n'a pas été résolu, qui est la dépendance du module JS sur les modules CSS.
Par exemple, si nous avons un module JS module, pouvons-nous importer directement et l'appeler pour faire apparaître une boîte de dialogue? Est-ce que ce n'est pas le cas dans la figure ci-dessous?
Théoriquement, cela devrait être le cas, mais en fait, ce modal s'appuie en fait sur un module CSS CSS correspondant. Si nous n'importons pas ce module, nous ne pouvons pas faire apparaître une boîte de dialogue normale. De plus, l'importation de ce module CSS n'est pas écrite au même endroit que l'importation du module JS, mais dans un autre fichier CSS. En d'autres termes, la dépendance est en fait comme ceci:
Pour utiliser un module, nous devons effectuer une opération d'importation dans deux fichiers un par un. C'est en fait une chose très étrange et déraisonnable! Pourquoi devons-nous être modulaires? Il s'agit d'encapsuler un module, qui peut être utilisé après l'avoir importé. Comment il est mis en œuvre et quelles dépendances il possède entièrement gérées par ce module lui-même. C'est-à-dire que la dépendance à modal.css dans la figure ci-dessus doit être gérée par modal.js lui-même.
Mais nous écrivons des modules comme celui-ci pour le frontal que nous avons écrit depuis N ans, non pas parce que c'est juste, mais parce que nous sommes habitués à cette mauvaise façon. Maintenant, en utilisant Vue, nous pouvons encapsuler complètement toutes les dépendances d'un module. Que ce soit des modèles, CSS ou JS, nous n'avons plus besoin de s'en soucier. Introduisez simplement ce module et il peut l'utiliser, et les dépendances du module sont gérées par elle-même.
Ensuite, notre dépendance devient:
modal.vue contient toutes les dépendances requises, nous n'avons donc plus besoin de traiter nous-mêmes le CSS ou même les modèles correspondants. C'est l'effet que la modularité devrait atteindre.
Créer un projet VUE
Vue fournit un outil Vue-Cli pour créer un modèle de projet: https://github.com/vuejs/vue-cli
Ici, j'ai d'abord essayé un autre modèle de modèle: https://github.com/vuejs-templates/webpack
Ensuite, nous pouvons écrire des modules au lieu d'utiliser Pure JS, mais utiliser WebPack pour écrire tout le contenu lié à un module dans un fichier. Prenant la liste des tâches précédentes comme exemple, en fait, le chapitre précédent n'a parlé que de l'utilisation de la composante, alors j'ai écrit de cette façon. Changeons-le en une meilleure méthode d'écriture comme suit:
List.vue:
<mpelate> <ul> <li v-for = 'TODO dans List'> <label v-bider: class = "{Done: todo.done}"> <input type = "checkbox" v-model = "todo.done" /> {{too.Title}} </vabe> }}, data () {return {list: []}}, événements: {add (input) {if (! input) return false this.list.unshift ({title: entrée, fait: false})}}} </ script> <style Lang = "moins" scoped> ul {margin-left: 2rem; rembourrage: 0; .Done {text-décoration: ligne à throuple; }} </ style>Form.vue:
<mpelate> <h1> {{username}} Liste TODO de Todo </h1> <formulaire v-on: soumed = "add" v-on: soumed.prevent> <input type = "text" v-model = "input" /> <input type = "soume" value = 'add' /> </ form> </ template> <script> Export default {promes: {username: {Tything: String: 'unmamed: unmamed default {props: {username: {Tything: String:' UNMEDAM }}, data () {return {input: ''}}, méthodes: {add () {this. $ dispatch ('add', this.input) this.input = ''}}} </ script>Todo.vue:
<template> <div id = "todo"> <todo-forme username = 'lily'> </ todo-form> <todo-list> </ todo-list> </div> </pillate> <cript> Importer la forme de './form.vue'Import à partir de' ./List.vue'export defaute (entrée) {this. $ Broadcast ('Add', Input)}}} </cript> <ystyle> </ style>App.vue:
<mpelate> <todoD> </ todo> </ template> <cript> Importer todo à partir de './components/todo.vue'export default {composants: {' todo ': todo}} </cript> <style> </ style>De cette façon, nous avons réécrit la liste TODO précédente comme modulaire. La modularité est l'une des fondations de la construction de grandes applications, mais cela ne suffit pas, nous devons encore faire:
• Meilleure gestion de l'État, gestion indépendante de l'État partagée par différentes composantes
• Test automatisé
• routage, etc.
Ici, nous ne faisons que l'un d'eux, qui est de séparer l'état en un module séparé. De toute évidence, pour une application de liste TODO, la structure de données qui enregistre la liste TODO est l'état partagé par différents composants.
Pourquoi avons-nous dû diffuser des événements auparavant? C'est parce que les données à utiliser entre différents composants ont été enregistrées dans List.Vue. Par conséquent, lorsque vous souhaitez ajouter un élément de données sous forme.vue, vous devez informer la liste.vue pour l'ajouter via des événements.
En d'autres termes, ces données ne sont pas privées par list.vue et devraient être au moins publiquement détenues par ces deux composantes. Maintenant qu'il appartient à List.vue, Form.vue ne peut pas le modifier et doit le notifier via l'événement.
Bien que la méthode de l'événement soit élégante, nous pouvons réellement faire mieux, qui consiste à séparer les données, afin que Form.Vue et List.vue puissent modifier directement les données sans avoir à envoyer des notifications.
Ici, nous ajoutons un fichier store.js:
Export Default {list: [], add (title) {if (! title) return this.list.unshift ({title: title, fait: false})}}Ensuite, nous pouvons modifier la liste.vue à cela, et seule la partie JS du code est publiée ici:
Importer le magasin de '../store.js'export par défaut {accessoires: {initlist: {type: array}}, data () {return store}}Form.vue ne nécessite pas de diffusion, vous pouvez l'ajouter en appelant directement la méthode Store.add:
Importer Store à partir de '../store.js'export par défaut {props: {username: {type: string, default:' Unnamed '}}, data () {return {input:' '}}, méthodes: {add () {store.add (this.input) this.input =' '}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}Après ce changement, la logique entière sera beaucoup plus claire et plus l'application est complexe, plus vous devriez extraire le magasin public, sinon il y aura des événements diffusés volant dans tout le ciel.
De plus, après avoir utilisé ce modèle de projet, le relais à chaud est si cool et rafraîchissant est enregistré.
Le code source ci-dessus est ici: https://github.com/lihongxun945/vue-webpack-todo-list
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.