資訊專欄INFORMATION COLUMN
摘要：新版本允許多任務操作，這意味著你可以通過同時打開多個文件，在側邊欄中可以方便地進行切換你可以通過拖拽文件的方式把文件直接添加到的工作空間當中最大的變化，在于工具欄的升級。
隨著Vue2.0的正式推出，我也正好籍此機會對我的開源項目Markcook進行重構。這一次重構既打發了我在高速路上堵車的無聊時光，又加深了對Vue2.0和Vuex2.0使用的認識，可謂一舉多得。
什么是Markcook？項目地址：https://github.com/jrainlau/m...
在線地址：http://jrainlau.github.io/mar...
桌面程序下載（僅windows）：markcook2.0-win32-x64.zip
在上一個版本中我寫了一篇文章，叫做Markcook 1.2，超輕的開源markdown編輯器，但是仍然缺乏對Markcook的一個完整的定義。在2.0版本中，Markcook的定義是：
更新內容A smart and beautiful markdown editor.
一個聰明且好看的markdown編輯器。
2.0版本使用了Google的Material Design作為設計規范，對UI部分進行了完全的重構，提供了更加方便的操作，同時在視覺上也更加舒適。對于用戶體驗也有著更為詳細和人性化的設計，在最大限度上提供最舒適的編輯環境。
新版本允許多任務操作，這意味著你可以通過Markcook同時打開多個markdown文件，在側邊欄中可以方便地進行切換：
你可以通過拖拽文件的方式把文件直接添加到Markcook的工作空間當中：
最大的變化，在于工具欄的升級。你可以通過點擊工具欄的按鈕，在頁面中插入markdown格式的語句，或者直接把一段文字變成markdown格式：
你可能會好奇為什么Markcook并沒有像其他的編輯器一樣提供“保存進度”的功能。其實Markcook會在你輸入的過程中自動地為你保存內容，這樣即使你把頁面關掉，在下一次打開Markcook的時候，你會發現你之前的內容仍然留在原地。
2.0版本使用了Vuex2.0作為全局的狀態管理工具，組件之間完全解耦，可以方便地進行維護和定制，其主要目錄結構如下：
|__ index.html
|__ src
|__ App.vue
|__ components
|__ inputer.vue
|__ navBar.vue
|__ outputer.vue
|__ sideMenu.vue
|__ main.js
|__ vuex
|__ store.js
可以看到，Markcook被拆分成了5個組件，包括一個根組件App.vue以及4個放在/components文件夾下的功能性組件。組件之間的狀態完全通過/vuex/store.js進行管理，其過程可以通過下面的架構圖說明：
關鍵邏輯也是放在store.js里面進行，下面簡要分析一些關鍵功能的實現原理：
輸入的內容進入store.js，經過處理后實時輸出到output.vue，以實現同步輸入輸出的效果。
每一篇文章都是一個對象，里面有三個屬性：id，content，current。在store.js內部有一個articleList數組，專門用來存放文章對象。每次新建文件，都會往數組內添加一個新的文章對象，在切換文件的時候，只需要根據對應的ID切換文章對象的current屬性即可。
articleList: [
{
id: createID(),
content: "Untitled
---
",
current: true
}
]
文章的自動保存進度功能，是通過localStorage實現的。每一篇文章都在localStorage里面根據ID分配了位置，在輸入的過程中會實時更新對應ID下的內容。同時在localStorage里面有一個叫idArr的對象，專門用于存放文章的ID。文章的自動讀取等操作，都是根據idArr獲取文章ID，再獲取對應ID下的文章內容來實現的。
更詳細的內容請直接閱讀源碼，由于篇幅有限，在這里就不作過多的介紹了。
后記在高速公路上一遍堵車一邊coding的感覺真的很神奇，在完全沒有網絡沒法google的情況下，反而大大激發了獨立思考的能力，真是受益良多。
最想多說的反而是UI設計。Material Design是我最喜歡的設計風格，在上一版本中已經有所使用了，但還是丑。這一版雖然和專業設計師比起來還是會有很大差距，但是對我來說，著實是順眼了很多，也不枉我即使在睡覺也在思考Markcook2.0應該長什么樣。
升級到Vue2.0，在開發體驗上并沒有太大的變化，反而是Vuex2.0的使用讓我稍微有些不習慣，因為它和舊版本的用法有著比較大的不同。不過得益于文檔的詳細，在仔細閱讀了文檔以后，遇到的問題基本都能夠得以解決。經過一定的開發摸索，發現Vuex2.0其實會更容易理解和使用，因為它把store，mutation，action和getter都放在了一起，在組件中只需要通過this.$store就能夠對store進行操作，邏輯非常清晰易懂，所以也很容易理解為什么我項目中每一個組件的邏輯都非常簡單，代碼量也非常少。
由于水平有限，項目代碼難免會有錯漏和不完美的地方，非常期待能夠得到大家能夠建議，后續也將繼續對Markcook進行維護。
謝謝大家~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80591.html
摘要：年底，公司項目番茄表單的前端部分，開始了從傳統的到的徹底重構。上傳流程圖不重要看文字事件觸發后，先去如果是圖片，可以同時通過以及將圖片預覽在頁面上后臺請求七牛的上傳，將拿到的和以及通過傳遞過來的一起到中。 關于上傳，總是有很多可以說道的。16年底，公司項目番茄表單的前端部分，開始了從傳統的jquery到vue 2.0的徹底重構。但是上傳部分，無論是之前的傳統版本，還是Vue新版本，都是...
摘要：普通的回調函數調用執行后續邏輯使用了以后的復雜邏輯獲取到正確的結果輸出兩個文件拼接后的內容雖說解決了的問題，不會出現一個函數前邊有二三十個空格的縮進。所以直接使用關鍵字替換原有的普通回調函數即可。 從今年過完年回來，三月份開始，就一直在做重構相關的事情。 就在今天剛剛上線了最新一次的重構代碼，希望高峰期安好，接近半年的Node.js代碼重構。 包含從callback+async.w...
摘要：升級的區別與的斷層式升級不同，延續了自己的風格。在命名方式和上有一些區別，掌握它們是你升級整個項目的關鍵。以下內容都是來源于個人項目的一些經驗之談，并非系統性的闡述。總目錄前端經驗收集器轉載自個人建了前端學習群，旨在一起學習前端。 升級的區別 與angular的斷層式升級不同，vue延續了自己的風格。在命名方式和API上有一些區別，掌握它們是你升級整個項目的關鍵。以下內容都是來源于個人...
摘要：友盟社會化組件正式上線了此次相比于以往的版本，是一次顛覆性創新是友盟社會化組件自年版本推出后最大的一次版本重構升級經過近半年的內測和開發，現在終于正式上線此次版本升級，本著幫助開發者省時省力省事的方針，將主要包體積減少了，刪除了舊版本中所有 友盟社會化組件Android SDK 5.0正式上線了！此次Android SDK5.0相比于以往的版本，是一次顛覆性創新；是友盟社會化組件自20...
閱讀 869·2021-11-22 09:34
閱讀 1002·2021-10-08 10:16
閱讀 1816·2021-07-25 21:42
閱讀 1790·2019-08-30 15:53
閱讀 3518·2019-08-30 13:08
閱讀 2174·2019-08-29 17:30
閱讀 3341·2019-08-29 17:22
閱讀 2173·2019-08-29 15:35
