真正的模塊化
前端模塊化很早就開始了，無論是 require.js，browserify 進行模塊化打包， 還是 Angular 進行依賴注入，我們都可以把JS代碼分成一個個小的模塊並組裝起來。然後我們還會通過 less 或者 sass 來把CSS文件也拆成一個個小的模塊來寫，甚至我們在CSS代碼中感受到了 封裝，繼承，多態 等面向對象的特性。
然而，在 webpack 出來之前，我們所謂的模塊化根本不能算作模塊化。為什麼這麼講，因為我們存在一個重要的問題沒有解決，就是JS模塊對CSS模塊的依賴。
比如我們有一個JS模塊 modal 那麼我們直接導入並調用它就能彈出一個對話框嗎？如下圖所示可以嗎？
理論上應該是這樣的，但實際上這個 modal其實還依賴一個對應的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
然後我們就可以不用 純JS來寫模塊了，而是借助 webpack 來把一個模塊相關的所有內容全部寫到一個文件中。以之前的 todo list 為例，其實上一章講的只是component的用法所以那樣寫了。我們改成一個更好的寫法如下：
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 按照 模塊化 重寫了一遍。模塊化是構建大型應用的基礎之一，但是這一點還不夠，我們還需要做到：
•更好的狀態管理，把不同組件共享的 State 獨立出來管理
•自動化測試
•路由等
這裡我們只做其中一個，就是把 State 獨立成一個單獨模塊。很顯然，對一個 Todo List 應用來說，保存 todo list 的數據結構就是不同組件共享的 State。
之前我們為什麼需要進行事件廣播，就是因為不同組件之間要操作的數據就保存在 List.vue 中，所以在 Form.vue 中想增加一條數據的時候需要通過事件的方式去通知 List.vue 來添加。
也就是其實這個數據不是 List.vue 私有的，應該至少是這兩個組件公有的，現在被 List.vue 據為己有之後，Form.vue 沒法修改它只好通過事件進行通知。
雖然事件的方式很優雅，但其實我們可以做的更好，就是把數據獨立出來，這樣 Form.vue 和 List.vue 都可以直接修改數據，而不用那麼麻煩發通知。
這裡我們增加一個 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 也不需要廣播了，直接調用 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 = ''
}
}
}
這樣一改之後，整個邏輯會清晰很多，並且應用越是復雜，越是應該抽出公有的 Store ，不然會出現廣播事件滿天飛的情況。
另外用這個項目模板之後，hot-reload 爽的不要不要的，刷新操作都省了。
上述的源碼在這裡：https://github.com/lihongxun945/vue-webpack-todo-list
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。