Markcook2.0，使用Vue2.0和Vuex2.0進(jìn)行完全重構(gòu)升級

mrcode 發(fā)布于2019-08-20 11:28 / 1166人閱讀

摘要：新版本允許多任務(wù)操作，這意味著你可以通過同時(shí)打開多個(gè)文件，在側(cè)邊欄中可以方便地進(jìn)行切換你可以通過拖拽文件的方式把文件直接添加到的工作空間當(dāng)中最大的變化，在于工具欄的升級。

隨著Vue2.0的正式推出，我也正好籍此機(jī)會對我的開源項(xiàng)目Markcook進(jìn)行重構(gòu)。這一次重構(gòu)既打發(fā)了我在高速路上堵車的無聊時(shí)光，又加深了對Vue2.0和Vuex2.0使用的認(rèn)識，可謂一舉多得。

項(xiàng)目地址：https://github.com/jrainlau/m...
在線地址：http://jrainlau.github.io/mar...
桌面程序下載（僅windows）：markcook2.0-win32-x64.zip

什么是Markcook？

在上一個(gè)版本中我寫了一篇文章，叫做Markcook 1.2，超輕的開源markdown編輯器，但是仍然缺乏對Markcook的一個(gè)完整的定義。在2.0版本中，Markcook的定義是：

A smart and beautiful markdown editor.

一個(gè)聰明且好看的markdown編輯器。

更新內(nèi)容

2.0版本使用了Google的Material Design作為設(shè)計(jì)規(guī)范，對UI部分進(jìn)行了完全的重構(gòu)，提供了更加方便的操作，同時(shí)在視覺上也更加舒適。對于用戶體驗(yàn)也有著更為詳細(xì)和人性化的設(shè)計(jì)，在最大限度上提供最舒適的編輯環(huán)境。

新版本允許多任務(wù)操作，這意味著你可以通過Markcook同時(shí)打開多個(gè)markdown文件，在側(cè)邊欄中可以方便地進(jìn)行切換：

你可以通過拖拽文件的方式把文件直接添加到Markcook的工作空間當(dāng)中：

最大的變化，在于工具欄的升級。你可以通過點(diǎn)擊工具欄的按鈕，在頁面中插入markdown格式的語句，或者直接把一段文字變成markdown格式：

你可能會好奇為什么Markcook并沒有像其他的編輯器一樣提供“保存進(jìn)度”的功能。其實(shí)Markcook會在你輸入的過程中自動(dòng)地為你保存內(nèi)容，這樣即使你把頁面關(guān)掉，在下一次打開Markcook的時(shí)候，你會發(fā)現(xiàn)你之前的內(nèi)容仍然留在原地。

深入Markcook

2.0版本使用了Vuex2.0作為全局的狀態(tài)管理工具，組件之間完全解耦，可以方便地進(jìn)行維護(hù)和定制，其主要目錄結(jié)構(gòu)如下：

|__ index.html
   |__ src
     |__ App.vue
     |__ components
       |__ inputer.vue
       |__ navBar.vue
       |__ outputer.vue
       |__ sideMenu.vue
     |__ main.js
   |__ vuex
     |__ store.js

可以看到，Markcook被拆分成了5個(gè)組件，包括一個(gè)根組件App.vue以及4個(gè)放在/components文件夾下的功能性組件。組件之間的狀態(tài)完全通過/vuex/store.js進(jìn)行管理，其過程可以通過下面的架構(gòu)圖說明：

關(guān)鍵邏輯也是放在store.js里面進(jìn)行，下面簡要分析一些關(guān)鍵功能的實(shí)現(xiàn)原理：

輸入的內(nèi)容進(jìn)入store.js，經(jīng)過處理后實(shí)時(shí)輸出到output.vue，以實(shí)現(xiàn)同步輸入輸出的效果。

每一篇文章都是一個(gè)對象，里面有三個(gè)屬性：id，content，current。在store.js內(nèi)部有一個(gè)articleList數(shù)組，專門用來存放文章對象。每次新建文件，都會往數(shù)組內(nèi)添加一個(gè)新的文章對象，在切換文件的時(shí)候，只需要根據(jù)對應(yīng)的ID切換文章對象的current屬性即可。

articleList: [
  {
    id: createID(),
    content: "Untitled
---
",
    current: true
  }
]

文章的自動(dòng)保存進(jìn)度功能，是通過localStorage實(shí)現(xiàn)的。每一篇文章都在localStorage里面根據(jù)ID分配了位置，在輸入的過程中會實(shí)時(shí)更新對應(yīng)ID下的內(nèi)容。同時(shí)在localStorage里面有一個(gè)叫idArr的對象，專門用于存放文章的ID。文章的自動(dòng)讀取等操作，都是根據(jù)idArr獲取文章ID，再獲取對應(yīng)ID下的文章內(nèi)容來實(shí)現(xiàn)的。

更詳細(xì)的內(nèi)容請直接閱讀源碼，由于篇幅有限，在這里就不作過多的介紹了。

后記

在高速公路上一遍堵車一邊coding的感覺真的很神奇，在完全沒有網(wǎng)絡(luò)沒法google的情況下，反而大大激發(fā)了獨(dú)立思考的能力，真是受益良多。

最想多說的反而是UI設(shè)計(jì)。Material Design是我最喜歡的設(shè)計(jì)風(fēng)格，在上一版本中已經(jīng)有所使用了，但還是丑。這一版雖然和專業(yè)設(shè)計(jì)師比起來還是會有很大差距，但是對我來說，著實(shí)是順眼了很多，也不枉我即使在睡覺也在思考Markcook2.0應(yīng)該長什么樣。

升級到Vue2.0，在開發(fā)體驗(yàn)上并沒有太大的變化，反而是Vuex2.0的使用讓我稍微有些不習(xí)慣，因?yàn)樗团f版本的用法有著比較大的不同。不過得益于文檔的詳細(xì)，在仔細(xì)閱讀了文檔以后，遇到的問題基本都能夠得以解決。經(jīng)過一定的開發(fā)摸索，發(fā)現(xiàn)Vuex2.0其實(shí)會更容易理解和使用，因?yàn)樗?b>store，mutation，action和getter都放在了一起，在組件中只需要通過this.$store就能夠?qū)?b>store進(jìn)行操作，邏輯非常清晰易懂，所以也很容易理解為什么我項(xiàng)目中每一個(gè)組件的邏輯都非常簡單，代碼量也非常少。

由于水平有限，項(xiàng)目代碼難免會有錯(cuò)漏和不完美的地方，非常期待能夠得到大家能夠建議，后續(xù)也將繼續(xù)對Markcook進(jìn)行維護(hù)。

謝謝大家~