Verdadeira modularidade
A modularização do front-end começou muito cedo. Seja necessário. Em seguida, também usaremos menos ou sass para quebrar o arquivo CSS em pequenos módulos para escrever, e até sentimos as características orientadas a objetos do encapsulamento, herança, polimorfismo etc. no código CSS.
No entanto, antes do lançamento do Webpack, o que chamamos de modularidade não poderia ser considerado modularidade. Por que dizemos isso? Porque existe um problema importante que não foi resolvido, que é a dependência do módulo JS nos módulos CSS.
Por exemplo, se tivermos um modal do módulo JS, podemos importar e chamá -lo diretamente para exibir uma caixa de diálogo? Tudo bem, como mostrado na figura abaixo?
Teoricamente, esse deve ser o caso, mas, de fato, esse modal realmente depende de um modal do módulo CSS correspondente. Se não importarmos este módulo, não podemos exibir uma caixa de diálogo normal. Além disso, a importação deste módulo CSS não está gravada no mesmo local que a importação do módulo JS, mas em outro arquivo CSS. Em outras palavras, a dependência é realmente assim:
Para usar um módulo, precisamos fazer uma operação de importação em dois arquivos, um por um. Isso é realmente uma coisa muito estranha e irracional! Por que precisamos ser modulares? É para encapsular um módulo, que pode ser usado após importá -lo. Como é implementado e quais dependências ele é totalmente tratado por este módulo em si. Isto é, a dependência de modal.css na figura acima deve ser tratada pelo próprio modal.js.
Mas escrevemos módulos como este para o front-end que escrevemos há N anos, não porque está certo, mas porque estamos acostumados a esse caminho errado. Agora, usando o VUE, podemos encapsular completamente todas as dependências de um módulo. Sejam modelos, CSS ou JS, não precisamos mais nos preocupar com isso. Basta apresentar este módulo e ele pode usá -lo, e as dependências do módulo são tratadas por si só.
Então nossa dependência se torna:
O Modal.vue contém todas as dependências necessárias; portanto, não precisamos mais lidar com o CSS correspondente ou mesmo modelos de nós mesmos. Esse é o efeito que a modularidade deve alcançar.
Crie um projeto Vue
O Vue fornece uma ferramenta vue cli para criar um modelo de projeto: https://github.com/vuejs/vue-cli
Aqui tentei primeiro outro projeto de modelo: https://github.com/vuejs-templates/webpack
Em seguida, podemos escrever módulos em vez de usar JS puro, mas use o WebPack para escrever todo o conteúdo relacionado a um módulo em um arquivo. Tomando a lista de Todo anterior como exemplo, de fato, o capítulo anterior apenas falou sobre o uso do componente, então escrevi dessa maneira. Vamos alterá -lo para um melhor método de escrita da seguinte forma:
List.vue:
<Modemplate> <ul> <li v-for = 'TODO na lista'> <Rótulo v-bind: class = "{done: tdo.done}"> <input type = "caixa de seleção" v-model = "tdo.done"/> {{tdo.title}} </label> </li> </> </model Array}}, data () {return {list: []}}, eventos: {add (input) {if (! Input) retorna false this.list.unshift ({title: input, done: false})}}}} </script> <style lang = "menos" scoped> ul {marginftft: 2 marginft: preenchimento: 0; .DONE {Decoração de texto: linha de linha; }} </style>Form.vue:
<Modemplate> <h1> {{nome de usuário}} 's list </h1> <formulário v-on: submit = "add" v-on: submit.prevent> <input type = "text" v-model = "input"/> <input type = "submit" =' add '/> </form> </model padrão: 'não nomeado'}}, data () {return {input: ''}}, métodos: {Add () {this.TODO.VUE:
<modemplate> <div id = "TODO"> <TODO-FORM NOME = 'LILY'> </TODO-FORM> <TOgDO-LIST> </TODO-LIST> </div> </modyM> <cript> importar formulário './form.vue'import list de' ./list.vue'export default {com compost.ndo {com componentes: {com compost.vue'import de './list.vue'export default {comcomonents: {com componente {com compost.vue'import de' ./list.vue'export default {com compost. { {add (input) {this. $ transmitido ('add', input)}}} </sCript> <yyled> </style>App.vue:
<Modemplate> <TODO> </doDo> </modemplate> <cript> Importar TODO de './components/todo.vue'export padrão {components: {' TODO ': TODO}} </SCRIPT> <TILOME> </style>Dessa forma, reescrevemos a lista de TODO anterior como modularmente. A modularidade é uma das fundações para a construção de grandes aplicações, mas isso não é suficiente, ainda precisamos fazer:
• Melhor gerenciamento de estado, gerenciamento independente de estado compartilhado por diferentes componentes
• Teste automatizado
• roteamento, etc.
Aqui, fazemos apenas um deles, que é separar o estado em um módulo separado. Obviamente, para um aplicativo de lista de tarefas, a estrutura de dados que salva a lista de tarefas é o estado compartilhado por diferentes componentes.
Por que precisamos transmitir eventos antes? Foi porque os dados a serem operados entre diferentes componentes foram salvos na lista.vue. Portanto, quando você deseja adicionar uma peça de dados no formulário.
Em outras palavras, esses dados não são privados pela list.vue e devem ser pelo menos de propriedade pública desses dois componentes. Agora que é de propriedade da list.vue, o form.vue não pode modificá -lo e precisa notificá -lo durante o evento.
Embora o método do evento seja elegante, podemos realmente fazer melhor, o que é separar os dados, para que o formulário e listem.
Aqui adicionamos um arquivo store.js:
exportar padrão {list: [], add (title) {if (! title) return this.list.unshift ({title: title: done: false})}}Então podemos mudar a lista.vue para isso, e apenas a parte JS do código é publicada aqui:
Importar armazenamento de '../store.js'export default {props: {initList: {type: Array}}, data () {return store}}Form.vue não requer transmissão, você pode adicioná -lo ligando diretamente para o método da loja.Add.
Importar o armazenamento de '../store.js'export padrão {props: {nome de usuário: {type: string, padrão:' não nomeado '}}, data () {return {input:' '}}, métodos: {add () {store.add (this.input) this.input ='}}}Após essa mudança, toda a lógica será muito mais clara e, quanto mais complexa o aplicativo, mais você deve extrair a loja pública; caso contrário, haverá eventos de transmissão voando por todo o céu.
Além disso, depois de usar este modelo de projeto, o Hot-Reload é tão legal e é salvo refrescante.
O código-fonte acima está aqui: https://github.com/lihongxun945/vue-webpack-todo-list
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.