使用過一些清單類的應(yīng)用程序，像 WunderList, Google Keep等，用來記錄一些計(jì)劃和安排，也試著將自己的計(jì)劃安排同筆記一起整理在 Evernote 中，但是無論哪種方式用起來總覺得少了點(diǎn)什么，如果兩者的一些功能能夠結(jié)合起來，就很***了。

“todo”和“note”之間的關(guān)系本來就很微妙，一個(gè)“todo”寫得詳細(xì)點(diǎn)不就成了“note”嗎?于是自己寫了一個(gè)稍微復(fù)雜一點(diǎn)的清單程序，今天將項(xiàng)目總結(jié)整理在此。

我試著將 todo和 note 結(jié)合，可以像 WunderList 一樣記錄計(jì)劃，又可以 Evernote 一樣管理筆記。在開發(fā)過程中，反復(fù)調(diào)整和修改，最終發(fā)現(xiàn)：其實(shí)我只是做了一個(gè)支持 markdown 的 簡易版WunderList :(。不管怎么樣，能堅(jiān)持下來就是值得鼓勵(lì)的。整個(gè)工程前后端分離，后端實(shí)現(xiàn)不在此介紹

前端代碼地址，

后端代碼地址，

在線預(yù)覽。

接下來，我簡單介紹一下 simplelist 的前端實(shí)現(xiàn)過程。注意，下面介紹的一些過程不是一蹴而就，是反復(fù)修改和整理得出的，比如技術(shù)選擇和組件的劃分。

編寫代碼的前期準(zhǔn)備工作

有三點(diǎn)

1. 確定需要實(shí)現(xiàn)的功能
2. 確定界面
3. 確定技術(shù)實(shí)現(xiàn)的方案

功能和界面先放一邊，介紹一下采用的技術(shù)方案。其實(shí)也沒啥可介紹的，前端老司機(jī)花樣多，但是主流的套路也就那么幾種，我選擇“套路のVue”。Vue+ Vuex+ Vue-Router，其他配件像 Less，Webpack等大家也應(yīng)該都清楚。用戶登陸注冊(cè)及接口的實(shí)現(xiàn)不在本文章的討論中，下次再講。

組件劃分很關(guān)鍵

在 React 的組件化的劃分方式中，將組件分成兩種：Container Components和Presentational Components，容器組件和 UI組件。容器組件負(fù)責(zé)數(shù)據(jù)和業(yè)務(wù)邏輯的處理，攜帶相關(guān)的內(nèi)部狀態(tài)，與數(shù)據(jù)有頻繁的交互， UI組件只負(fù)責(zé) UI 的呈現(xiàn)，沒有任何的數(shù)據(jù)和邏輯的處理，組件的數(shù)據(jù)從容器組件傳遞進(jìn)來(在 React中數(shù)據(jù)由 this.props 提供)。如果一個(gè)組件既有 UI 又有業(yè)務(wù)邏輯，可以試著將它拆分成兩個(gè)：一個(gè)容器組件，包著一個(gè)UI 組件。前者負(fù)責(zé)與外部的通信，將數(shù)據(jù)傳給后者，由后者渲染出視圖。

個(gè)人比較喜歡這種方式，組件變得純粹。不過似乎在 Vue 生態(tài)圈中沒有設(shè)計(jì)這方面的介紹，在后面我打算嘗試使用這種方式，不過現(xiàn)在還是使用相對(duì)粗暴一點(diǎn)的方式來劃分。

這是 WunderList 的界面，簡單的分析之后，可以將其劃分成如下形式，再詳細(xì)一點(diǎn)的話可以看下圖，如果堅(jiān)持容器組件和 UI組件的形式開發(fā)的話，相對(duì)較復(fù)雜一點(diǎn)，而我選擇先從簡單的入手。想必你應(yīng)該看過TodoMVC，而這樣也是simplelist 的最簡單也是最核心的功能。所以在實(shí)際操作過程中，我先將輸入框和單個(gè)任務(wù)這兩個(gè)組件實(shí)現(xiàn)。

Vuex

Vuex 是一個(gè)專門為 Vue.js 應(yīng)用所設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。它借鑒了 Flux 和 Redux 的設(shè)計(jì)思想，但簡化了概念，并且采用了一種為能更好發(fā)揮 Vue.js 數(shù)據(jù)響應(yīng)機(jī)制而專門設(shè)計(jì)的實(shí)現(xiàn)。

在單獨(dú)使用 Vue.js 的時(shí)候，通常會(huì)把狀態(tài)儲(chǔ)存在組件的內(nèi)部。整個(gè)應(yīng)用的數(shù)據(jù)和狀態(tài)都是散落在各個(gè)組件。這樣并沒有有什么問題，組件的數(shù)據(jù)組建自己管理。有時(shí)候狀態(tài)的一部分需要共享給其他的組件，此時(shí)使用事件系統(tǒng)，讓一個(gè)組件把一些狀態(tài)“發(fā)送”到其他組件，但是當(dāng)項(xiàng)目一步步擴(kuò)大時(shí)，事件流將變得繁雜，不利于調(diào)試和維護(hù)。此時(shí) Vuex 可以幫助我們實(shí)現(xiàn)狀態(tài)的管理。

Vuex 的四個(gè)核心概念分別是：

1. The state tree：Vuex 使用單一狀態(tài)樹，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)，作為一個(gè)『唯一數(shù)據(jù)源(SSOT)』而存在。每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。數(shù)據(jù)流都是單向的。
2. Getters：用來從 store 獲取 Vue 組件數(shù)據(jù)。
3. Mutators：事件處理器用來驅(qū)動(dòng)狀態(tài)的變化，只有 mutation 可以改變狀態(tài)。
4. Actions：可以給組件使用的函數(shù)，用來派發(fā) Mutation。

Vuex 規(guī)定，屬于應(yīng)用層級(jí)的狀態(tài)只能通過 Mutation 中的方法來修改，而派發(fā) Mutation 中的事件只能通過 action。從組件出發(fā)，組件中調(diào)用 action，在 action 這一層級(jí)我們可以和后臺(tái)數(shù)據(jù)交互，比如獲取初始化的數(shù)據(jù)源，或者中間數(shù)據(jù)的過濾等。然后在 action 中去派發(fā) Mutation。Mutation 去觸發(fā)狀態(tài)的改變，狀態(tài)的改變，將觸發(fā)視圖的更新。

配合 Vuex 這樣的數(shù)據(jù)管理架構(gòu)，我只需要關(guān)心組件的狀態(tài)變化，數(shù)據(jù)的變化和流通全部交給 Vuex。我需要維護(hù)一個(gè)數(shù)組，數(shù)組中每一個(gè)元素代表一個(gè)任務(wù)，輸入框和任務(wù)上的編輯刪除等操作，本質(zhì)上都是對(duì)一個(gè)數(shù)組的操作。

給任務(wù)加上分類

我已經(jīng)說過了，我要做的是復(fù)雜的 simplelist。所以，在完成了最簡單的增刪改的功能之后，要加上任務(wù)的自己的歸屬了。每個(gè)任務(wù)都?xì)w屬于一個(gè)清單，有唯一的清單 id(list_id)。就像 WunderList 一樣，左側(cè)清單列表，右側(cè)任務(wù)列表。這時(shí)候需要用到單頁引用中必不可少的路由裝置了。

從簡單的開始，除了登錄和注冊(cè)(目前整合在應(yīng)用中，更好的做法應(yīng)該是登錄注冊(cè)作為兩個(gè)單獨(dú)的頁面，這里只是個(gè)人 demo，暫不考慮)，暫且只有一種路由狀態(tài)，用來指向?qū)?yīng)的清單，例如：/lists/:id。下面是偽代碼

<div id="app"> 
  <router-view></router-view> 
</div>  

const ListItem =  { 
  template: `<div class="item">{{item.title}}</div>`, 
    props: ['item'], 
} 
const ListContainer = { 
  template: `<div class="list"> 
      <h2>List {{ $route.params.id }}</h2> 
        <div class="item-list"> 
            <list-item v-for="item in list" :item='item'></list-item>  
        </div> 
    </div>`, 
    components: { 
        'list-item': ListItem, 
    }, 
} 
 
const router = new VueRouter({ 
  routes: [ 
    { path: '/lists/:id', component: ListContainer } 
  ] 
})  

然后綁定好 <router-link>，路由切換就算完成了。但是光這樣還不行，最關(guān)鍵的清單數(shù)據(jù)管理還沒有加上。其實(shí)清單的數(shù)據(jù)狀態(tài)管理與任務(wù)的管理大同小異，就不在此復(fù)述，你可以試著捋一捋。

彈層組件的管理

在創(chuàng)建和編輯清單的時(shí)候，需要彈出一個(gè) modal 來方便操作(參照 WunderList)。這個(gè)時(shí)候就涉及到一個(gè)問題：這種定位不是很清晰的模塊，該怎么來管理?

在我看來，這種類型模塊大致有兩類，一類是全局共享，可能在很多不同的組件中都需要調(diào)用，這種全局的我認(rèn)為可以單獨(dú)拿出來放在同一個(gè)地方供應(yīng)用調(diào)用。另一類是只屬于某一個(gè)組件，只會(huì)在固定的組件中被調(diào)用，這類模塊推薦直接寫在組件中，方便管理，***是寫在***組件中，避免一些全七八糟的樣式?jīng)_突(目前我遇到的主要還是層疊順序的問題)。

思路清晰之后，可以很順利的完成清單的創(chuàng)建和編輯功能。

說到這，一個(gè)復(fù)雜的 simplelist 的基本結(jié)構(gòu)和功能已經(jīng)出現(xiàn)了。那么問題來了，你學(xué)到了嗎?