真正的模塊化
前端模塊化很早就開始了，無論是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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。