Истинная модульность
Фронтальная модуляризация началась очень рано. Независимо от того, требуется ли это. Затем мы также будем использовать меньше или SASS, чтобы разбить файл CSS на небольшие модули для написания, и мы даже чувствуем объектно-ориентированные характеристики инкапсуляции, наследования, полиморфизма и т. Д. В коде CSS.
Однако до того, как WebPack вышел, то, что мы назвали модульностью, нельзя считать модульностью вообще. Почему мы говорим это? Потому что существует важная проблема, которая не была решена, которая является зависимостью модуля JS от CSS -модулей.
Например, если у нас есть модуль модуля JS, можем ли мы напрямую импортировать и вызвать его, чтобы вспять диалоговое окно? Это нормально, как показано на рисунке ниже?
Теоретически, это должно иметь место, но на самом деле этот модал фактически опирается на соответствующий модуль CSS Modal.less. Если мы не импортируем этот модуль, мы не сможем вспомнить обычное диалоговое окно. Более того, импорт этого модуля CSS записана не в том же месте, что и импорт модуля JS, а в другом файле CSS. Другими словами, зависимость на самом деле такая:
Чтобы использовать модуль, нам нужно сделать операцию импорта в двух файлах один за другим. Это на самом деле очень странная и необоснованная вещь! Зачем нам быть модульным? Он должен инкапсулировать модуль, который можно использовать после его импорта. Как он реализован и какие зависимости у него полностью обрабатываются самим модулем. То есть зависимость от modal.css на рисунке выше должна обрабатывать самим Modal.js.
Но мы писали подобные модули для фронт-энда, которые мы написали в течение N лет не потому, что это правильно, а потому, что мы привыкли к этому неправильно. Теперь, используя Vue, мы можем полностью инкапсулировать все зависимости модуля. Будь то шаблоны, CSS или JS, нам больше не нужно заботиться об этом. Просто введите этот модуль, и он может использовать его, и зависимости модуля обрабатываются сами по себе.
Тогда наша зависимость становится:
Modal.Vue содержит все необходимые зависимости, поэтому нам больше не нужно иметь дело с соответствующими CSS или даже шаблонами сами. Это эффект, который должна достичь модульности.
Создать проект VUE
VUE предоставляет инструмент VUE-CLI для создания шаблона проекта: https://github.com/vuejs/vue-cli
Здесь я впервые попробовал еще один шаблонный проект: https://github.com/vuejs-templates/webpack
Затем мы можем писать модули вместо использования Pure JS, но использовать WebPack, чтобы записать весь контент, связанный с модулем в файл. В качестве примера, взяв предыдущий список Todo, на самом деле, предыдущая глава говорила только об использовании компонента, поэтому я написал таким образом. Давайте изменим его на лучший метод письма следующим образом:
List.vue:
<Template> <ul> <li v-for = 'todo in list'> <label v-bind: class = "{dode: todo.done}"> <input type = "fackbox" v-model = "todo.done"/> {{todo.title}} </label> </lail> </ul> </templat initlist: {type: array}}, data () {return {list: []}}, события: {add (input) {if (! input) return false this.list.unshift ({title: input, dod: false})}}} </script> <style lang = "mess" scoped> ul {margin-left: 2rem; Заполнение: 0; .done {text-decoration: line-through; }} </style>Form.vue:
<Template> <h1> {{username}} 'S Todo List </h1> <form v-on: opper = "add" v-on: opper.prevent> <input type = "text" v-model = "input"/> <input = "value =' add '/> </> </> </template> <cript> expram по умолчанию: 'Unnamed'}}, data () {return {input: ''}}, методы: {add () {this. $ dispatch ('add', this.input) this.input = ''}}} </script>Todo.vue:
<template> <div id = "todo"> <todo-form username = 'lily'> </todo-form> <todo-list> </todo-list> </div> </template> <cropript> Импорт Форма из './form.vue'import List' ./list.vue'export Defloak {. 'todo-list': list}, events: {add (input) {this. $ broadcast ('add', input)}}} </script> <style> </style>App.vue:
<template> <todo> </todo> </template> <script> import todo из './components/todo.vue'export default {components: {' todo ': todo}} </script> <style> </style>Таким образом, мы переписали предыдущий список Todo как модульный. Модульность - одна из оснований для создания больших приложений, но этого недостаточно, нам все еще нужно сделать:
• Лучшее государственное управление, независимое управление государством, разделенное различными компонентами
• Автоматическое тестирование
• Маршрутизация и т. Д.
Здесь мы делаем только один из них, который должен разделить состояние на отдельный модуль. Очевидно, что для приложения TODO List структура данных, которая сохраняет список TODO, является состоянием, разделенным различными компонентами.
Зачем нам нужно было транслировать мероприятия раньше? Это было связано с тем, что данные, которые должны работать между различными компонентами, были сохранены в List.vue. Поэтому, когда вы хотите добавить кусок данных в form.vue, вам нужно уведомить List.vue, чтобы добавить его через события.
Другими словами, эти данные не являются частными по списку. Vue, и должны быть, по крайней мере, публично принадлежать этим двум компонентам. Теперь, когда он принадлежит List.vue, form.vue не может изменить его и должен уведомить его через событие.
Несмотря на то, что метод события элегантен, мы можем добиться большего успеха, то есть разделить данные, чтобы как Form.vue, так и List.vue могут напрямую изменять данные без необходимости отправки уведомлений.
Здесь мы добавляем файл store.js:
Экспорт по умолчанию {список: [], add (title) {if (! title) вернуть this.list.unshift ({title: title, dode: false})}}}}}}}}}}}}}}Затем мы можем изменить список.
Импорт Store из '../store.js'export по умолчанию {opps: {initlist: {type: array}}, data () {return Store}}Form.vue не требует вещания, вы можете добавить его, вызывая метод store.add напрямую:
Импорт хранилище из '../store.js'export default {props: {username: {type: string, default:' безымянный '}}, data () {return {input:' ''}}, методы: {add () {store.add (this.input) this.input = ''}}}}}}}}После этого изменения вся логика будет намного яснее, и чем сложнее применение, тем больше вы должны извлечь общественный магазин, в противном случае будут пролетать события, летающие по всему небу.
Кроме того, после использования этого шаблона проекта горячая переоборудование настолько крутая, а освежающая-сохраняется.
Приведенный выше исходный код здесь: https://github.com/lihongxun945/vue-webpack-todo-list
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.