Wahre Modularität
Die Front-End-Modularisierung begann sehr früh. Unabhängig davon, ob es erforderlich ist. Dann werden wir auch weniger oder SASS verwenden, um die CSS-Datei in kleine Module zum Schreiben zu unterteilen, und wir spüren sogar die objektorientierten Eigenschaften der Kapselung, der Vererbung, des Polymorphismus usw. im CSS-Code.
Bevor WebPack jedoch herauskam, konnte das, was wir Modularität bezeichneten, überhaupt nicht als Modularität angesehen werden. Warum sagen wir das? Da es ein wichtiges Problem gibt, das nicht gelöst wurde, ist dies die Abhängigkeit des JS -Moduls von CSS -Modulen.
Wenn wir beispielsweise ein JS -Modulmodal haben, können wir es direkt importieren und aufrufen, um ein Dialogfeld zu überholen? Ist es in Ordnung, wie in der Abbildung unten gezeigt?
Theoretisch sollte dies der Fall sein, aber tatsächlich stützt sich dieses Modal tatsächlich auf einem entsprechenden CSS -Modulmodul. Wenn wir dieses Modul nicht importieren, können wir kein normales Dialogfeld aufgeben. Darüber hinaus ist das Import dieses CSS -Moduls nicht an derselben Stelle wie das Importieren des JS -Moduls, sondern in einer anderen CSS -Datei geschrieben. Mit anderen Worten, die Abhängigkeit ist tatsächlich wie folgt:
Um ein Modul zu verwenden, müssen wir einen Importoperat in zwei Dateien einzeln durchführen. Dies ist eigentlich eine sehr seltsame und unvernünftige Sache! Warum müssen wir modular sein? Es soll ein Modul einkapseln, das nach dem Importieren verwendet werden kann. Wie es implementiert wird und welche Abhängigkeiten es hat, werden von diesem Modul selbst vollständig behandelt. Das heißt, die Abhängigkeit von modal.css in der obigen Abbildung sollte von modal.js selbst behandelt werden.
Aber wir haben solche Module für das Front-End geschrieben, das wir seit N-Jahren geschrieben haben, nicht weil es richtig ist, sondern weil wir uns an diese falsche Weise gewöhnt haben. Mit VUE können wir jetzt alle Abhängigkeiten eines Moduls vollständig zusammenfassen. Egal, ob es sich um Vorlagen, CSS oder JS handelt, wir müssen uns nicht mehr darum kümmern. Stellen Sie dieses Modul einfach vor und es kann es verwenden, und die Abhängigkeiten des Moduls werden von selbst behandelt.
Dann wird unsere Abhängigkeit:
Modal.vue enthält alle erforderlichen Abhängigkeiten, sodass wir uns nicht mehr mit den entsprechenden CSS oder sogar mit Vorlagen befassen müssen. Dies ist der Effekt, den die Modularität erreichen sollte.
Erstellen Sie ein Vue -Projekt
Vue bietet ein Tool Vue-Cli zum Erstellen einer Projektvorlage: https://github.com/vuejs/vue-cli
Hier habe ich zuerst ein anderes Vorlagenprojekt ausprobiert: https://github.com/vuejs-templates/webpack
Anschließend können wir Module schreiben, anstatt reine JS zu verwenden, aber verwenden Sie WebPack, um alle mit einem Modul bezogenen Inhalte in eine Datei zu schreiben. In der vorherigen TODO -Liste als Beispiel wurde im vorherigen Kapitel nur über die Verwendung der Komponenten gesprochen, also habe ich so geschrieben. Wechseln wir es in eine bessere Schreibmethode wie folgt:
Liste.Vue:
<template> <ul> <li v-for='todo in list'> <label v-bind:class="{ done : todo.done }" > <input type="checkbox" v-model="todo.done"/> {{todo.title}} </label> </li> </ul></template><script>export default { props: { initList: { Typ: Array}}, data () {return {list: []}}, Ereignisse: {add (input) {if (! input) return this.list.unshift ({title: input, done: false})}}} </script> <style lang = "less" scoped> Ul {margin-left: 2rem; Polsterung: 0; .Done {Textdekoration: Zeilenum; }} </style>Form.Vue:
<Template> <h1> {{Benutzername}} 'STO-Liste </h1> <Formular v-on: sub: sub: add "v-on: subvent.prevent> <input type =" text "v-model =" input "/> <Eingabe type =" subly "value" add'/> </</template> </templat> <Script> 'Unbenamter'}}, data () {return {input: ''}}, methods: {add () {this. $ Dispatch ('add', this.input) this.input = ''}}} </script>Todo.vue:
<Template> <div id = "todo"> <todo-form userername }, Ereignisse: {add (Eingabe) {this.App.vue:
<Semplate> <Todo> </todo> </template> <skript> importieren Sie Todo aus './Components/todo.vue'export Standard {Komponenten: {' Todo ': todo}} </script> <style> </style>Auf diese Weise haben wir die vorherige ToDo -Liste modular umgeschrieben. Die Modularität ist eine der Fundamente für den Aufbau großer Anwendungen, aber dies reicht nicht aus, wir müssen immer noch:
• Bestes staatliches Management, unabhängiges Management des staatlichen, das von verschiedenen Komponenten geteilt wird
• Automatisierte Tests
• Routing usw.
Hier machen wir nur einen von ihnen, der den Zustand in ein separates Modul trennen soll. Für eine TODO -Listanwendung ist die Datenstruktur, die die TODO -Liste speichert, der Status, der von verschiedenen Komponenten geteilt wird.
Warum mussten wir vorher Ereignisse übertragen? Es lag daran, dass die Daten zwischen verschiedenen Komponenten in list.vue gespeichert wurden. Wenn Sie also ein Datenstück in Form hinzufügen möchten, müssen Sie die Liste benachrichtigen.
Mit anderen Worten, diese Daten sind nicht von list.vue privat und sollten diese beiden Komponenten zumindest öffentlich gehören. Jetzt, da es von list.vue gehört, kann Form.vue es nicht ändern und muss es über das Ereignis informieren.
Obwohl die Ereignismethode elegant ist, können wir tatsächlich besser abschneiden, was die Daten trennen soll, damit sowohl form.vue als auch list.vue die Daten direkt ändern können, ohne Benachrichtigungen zu senden.
Hier fügen wir eine Store.js -Datei hinzu:
Standard -Standard -Standard {Liste: [], add (title) {if (! title) return this.list.unshift ({title: title, fone: false})}}Dann können wir die Liste ändern. Beachten Sie dies, und nur der JS -Teil des Codes wird hier veröffentlicht:
Importieren Sie den Speicher aus '../store.js'export Standard {Props: {initList: {type: array}}, data () {return Store}}Form
Importieren Sie den Speicher aus '../store.js'export Standard {Props: {Benutzername: {Typ: String, Standard:' named '}}, data () {return {input:'Nach dieser Änderung wird die gesamte Logik viel klarer sein, und je komplexer die Anwendung ist, desto mehr sollten Sie den öffentlichen Laden extrahieren, andernfalls werden überall über den ganzen Himmel ausgestrahlt.
Nach der Verwendung dieser Projektvorlage ist die Hot-Reload so cool und erfrischend wird gespeichert.
Der obige Quellcode ist hier: https://github.com/lihongxun945/vue-webpack-todo-list
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.