真正的模塊化

前端模塊化很早就開始了，無論是 require.js，browserify 進(jìn)行模塊化打包， 還是 Angular 進(jìn)行依賴注入，我們都可以把JS代碼分成一個(gè)個(gè)小的模塊并組裝起來。然后我們還會(huì)通過 less 或者 sass 來把CSS文件也拆成一個(gè)個(gè)小的模塊來寫，甚至我們?cè)贑SS代碼中感受到了 封裝，繼承，多態(tài) 等面向?qū)ο蟮奶匦浴?/p>

然而，在 webpack 出來之前，我們所謂的模塊化根本不能算作模塊化。為什么這么講，因?yàn)槲覀兇嬖谝粋€(gè)重要的問題沒有解決，就是JS模塊對(duì)CSS模塊的依賴。

比如我們有一個(gè)JS模塊 modal 那么我們直接導(dǎo)入并調(diào)用它就能彈出一個(gè)對(duì)話框嗎？如下圖所示可以嗎？

理論上應(yīng)該是這樣的，但實(shí)際上這個(gè) modal其實(shí)還依賴一個(gè)對(duì)應(yīng)的CSS模塊 modal.less ，如果不導(dǎo)入這個(gè)模塊我們是無法彈出一個(gè)正常的對(duì)話框的，而且，導(dǎo)入這個(gè)CSS模塊竟然不是和導(dǎo)入JS模塊寫在同一個(gè)地方，而是寫在另一個(gè)CSS文件中。也就是說，其實(shí)依賴關(guān)系是這樣的：

為了使用一個(gè)模塊，我們需要在兩個(gè)文件中分別做一次引入操作。這其實(shí)是一件非常奇怪不合理的事！我們?yōu)槭裁匆K化？就是為了封裝一個(gè)模塊，可以做到導(dǎo)入它就能使用，而它是如何實(shí)現(xiàn)的，它有什么依賴關(guān)系完全是這個(gè)模塊自己處理的，也就是上圖中對(duì) modal.css 的依賴應(yīng)該是 modal.js 自己處理的。
但是我們寫了N年的前端卻一直這樣寫模塊，不是因?yàn)樗麑?duì)，而是因?yàn)槲覀兞?xí)慣了這種錯(cuò)誤的方式。現(xiàn)在用Vue我們可以完全封裝一個(gè)模塊的全部依賴，無論是模板、CSS還是JS，我們都不需要再去關(guān)心，只要引入這個(gè)模塊就可以使用，而模塊的依賴是它自己進(jìn)行處理的。

那么我們的依賴關(guān)系就變成了：

其中 modal.vue 包含了全部所需要的依賴，那么我們就不在需要自己去處理對(duì)應(yīng)的 CSS 甚至 模板了。這才是模塊化應(yīng)該達(dá)到的效果。

創(chuàng)建 Vue 項(xiàng)目

Vue 提供了一個(gè)工具 vue-cli 可以創(chuàng)建一個(gè)項(xiàng)目模板： https://github.com/vuejs/vue-cli

這里我先嘗試了一下另一個(gè)模板項(xiàng)目：https://github.com/vuejs-templates/webpack

然后我們就可以不用 純JS來寫模塊了，而是借助 webpack 來把一個(gè)模塊相關(guān)的所有內(nèi)容全部寫到一個(gè)文件中。以之前的 todo list 為例，其實(shí)上一章講的只是component的用法所以那樣寫了。我們改成一個(gè)更好的寫法如下：

List.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: {  type: Array } }, data () { return {  list: [] } }, events: { add (input) {  if (!input) return false  this.list.unshift({  title: input,  done: false  }) } }}</script><style lang="less" scoped>ul { margin-left: 2rem; padding: 0; .done { text-decoration: line-through; }}</style>

Form.vue:

<template> <h1>{{username}}'s Todo List</h1> <form v-on:submit="add" v-on:submit.prevent> <input type="text" v-model="input"/> <input type="submit" value='add' /> </form></template><script>export default { props: { username: {  type: String,  default: 'Unnamed' } }, data () { return {  input: '' } }, methods: { 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><script>import Form from './Form.vue'import List from './List.vue'export default { components: { 'todo-form': Form, 'todo-list': List }, events: { add (input) {  this.$broadcast('add', input) } }}</script><style></style>

App.vue:

<template> <todo></todo></template><script>import Todo from './components/Todo.vue'export default { components: { 'todo': Todo }}</script><style></style>

這樣我們就把之前的 Todo List 按照 模塊化 重寫了一遍。模塊化是構(gòu)建大型應(yīng)用的基礎(chǔ)之一，但是這一點(diǎn)還不夠，我們還需要做到：
 •更好的狀態(tài)管理，把不同組件共享的 State 獨(dú)立出來管理
 •自動(dòng)化測(cè)試
 •路由等 

這里我們只做其中一個(gè)，就是把 State 獨(dú)立成一個(gè)單獨(dú)模塊。很顯然，對(duì)一個(gè) Todo List 應(yīng)用來說，保存 todo list 的數(shù)據(jù)結(jié)構(gòu)就是不同組件共享的 State。
之前我們?yōu)槭裁葱枰M(jìn)行事件廣播，就是因?yàn)椴煌M件之間要操作的數(shù)據(jù)就保存在 List.vue 中，所以在 Form.vue 中想增加一條數(shù)據(jù)的時(shí)候需要通過事件的方式去通知 List.vue 來添加。
也就是其實(shí)這個(gè)數(shù)據(jù)不是 List.vue 私有的，應(yīng)該至少是這兩個(gè)組件公有的，現(xiàn)在被 List.vue 據(jù)為己有之后，F(xiàn)orm.vue 沒法修改它只好通過事件進(jìn)行通知。
雖然事件的方式很優(yōu)雅，但其實(shí)我們可以做的更好，就是把數(shù)據(jù)獨(dú)立出來，這樣 Form.vue 和 List.vue 都可以直接修改數(shù)據(jù)，而不用那么麻煩發(fā)通知。

這里我們?cè)黾右粋€(gè) Store.js 文件：

export default { list: [ ], add (title) { if (!title) return this.list.unshift({  title: title,  done: false }) }}

 然后 我們可以把 List.vue 改成這樣，這里只貼出JS部分的代碼：

import Store from '../Store.js'export default { props: { initList: {  type: Array } }, data () { return Store }}

 Form.vue 也不需要廣播了，直接調(diào)用 Store.add 方法既可以添加:

import Store from '../Store.js'export default { props: { username: {  type: String,  default: 'Unnamed' } }, data () { return {  input: '' } }, methods: { add () {  Store.add(this.input)  this.input = '' } }}

 這樣一改之后，整個(gè)邏輯會(huì)清晰很多，并且應(yīng)用越是復(fù)雜，越是應(yīng)該抽出公有的 Store ，不然會(huì)出現(xiàn)廣播事件滿天飛的情況。
另外用這個(gè)項(xiàng)目模板之后，hot-reload 爽的不要不要的，刷新操作都省了。

上述的源碼在這里：https://github.com/lihongxun945/vue-webpack-todo-list

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。