请选择 进入手机版 | 继续访问电脑版

技术控

    今日:7| 主题:61414
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级

[复制链接]
思恋逃离回忆丶 发表于 2016-10-2 15:26:04
569 8

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级-1-技术控-Markcook,进行,一个,组件,2.0

  随着Vue2.0的正式推出,我也正好籍此机会对我的开源项目Markcook进行重构。这一次重构既打发了我在高速路上堵车的无聊时光,又加深了对Vue2.0和Vuex2.0使用的认识,可谓一举多得。
   项目地址: https://github.com/jrainlau/m...
   在线地址: http://jrainlau.github.io/mar...
  什么是Markcook?

   在上一个版本中我写了一篇文章,叫做 Markcook 1.2,超轻的开源markdown编辑器 ,但是仍然缺乏对Markcook的一个完整的定义。在2.0版本中,Markcook的定义是:
  A smart and beautiful markdown editor.
  一个聪明且好看的markdown编辑器。
  更新内容

   2.0版本使用了Google的 Material Design 作为设计规范,对UI部分进行了完全的重构,提供了更加方便的操作,同时在视觉上也更加舒适。对于用户体验也有着更为详细和人性化的设计,在最大限度上提供最舒适的编辑环境。
     新版本允许多任务操作,这意味着你可以通过Markcook同时打开多个markdown文件,在侧边栏中可以方便地进行切换:
   

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级-2-技术控-Markcook,进行,一个,组件,2.0
       你可以通过拖拽文件的方式把文件直接添加到Markcook的工作空间当中:
   

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级-3-技术控-Markcook,进行,一个,组件,2.0
       最大的变化,在于工具栏的升级。你可以通过点击工具栏的按钮,在页面中插入markdown格式的语句,或者直接把一段文字变成markdown格式:
   

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级-4-技术控-Markcook,进行,一个,组件,2.0
       你可能会好奇为什么Markcook并没有像其他的编辑器一样提供“保存进度”的功能。其实Markcook会在你输入的过程中自动地为你保存内容,这样即使你把页面关掉,在下一次打开Markcook的时候,你会发现你之前的内容仍然留在原地。
   

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级-5-技术控-Markcook,进行,一个,组件,2.0
    深入Markcook

   2.0版本使用了 Vuex2.0 作为全局的状态管理工具,组件之间完全解耦,可以方便地进行维护和定制,其主要目录结构如下:
  1. |__ index.html
  2.    |__ src
  3.      |__ App.vue
  4.      |__ components
  5.        |__ inputer.vue
  6.        |__ navBar.vue
  7.        |__ outputer.vue
  8.        |__ sideMenu.vue
  9.      |__ main.js
  10.    |__ vuex
  11.      |__ store.js
复制代码
     可以看到,Markcook被拆分成了5个组件,包括一个根组件 App.vue 以及4个放在 /components 文件夹下的功能性组件。组件之间的状态完全通过 /vuex/store.js 进行管理,其过程可以通过下面的架构图说明:
   

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级

Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级-6-技术控-Markcook,进行,一个,组件,2.0
     关键逻辑也是放在 store.js 里面进行,下面简要分析一些关键功能的实现原理:
  
       
  •   输入的内容进入 store.js ,经过处理后实时输出到 output.vue ,以实现同步输入输出的效果。
       
  •   每一篇文章都是一个对象,里面有三个属性: id , content , current 。在 store.js 内部有一个 articleList 数组,专门用来存放文章对象。每次新建文件,都会往数组内添加一个新的文章对象,在切换文件的时候,只需要根据对应的ID切换文章对象的 current 属性即可。
    1. articleList: [
    2.   {
    3.     id: createID(),
    4.     content: 'Untitled\n---\n',
    5.     current: true
    6.   }
    7. ]
    复制代码
      
  •   文章的自动保存进度功能,是通过 localStorage 实现的。每一篇文章都在 localStorage 里面根据ID分配了位置,在输入的过程中会实时更新对应ID下的内容。同时在 localStorage 里面有一个叫 idArr 的对象,专门用于存放文章的ID。文章的自动读取等操作,都是根据 idArr 获取文章ID,再获取对应ID下的文章内容来实现的。

    Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级

    Markcook2.0,使用 Vue2.0 和 Vuex2.0 进行完全重构升级-7-技术控-Markcook,进行,一个,组件,2.0

      
   更详细的内容请直接阅读 源码 ,由于篇幅有限,在这里就不作过多的介绍了。
  后记

  在高速公路上一遍堵车一边coding的感觉真的很神奇,在完全没有网络没法google的情况下,反而大大激发了独立思考的能力,真是受益良多。
  最想多说的反而是UI设计。Material Design是我最喜欢的设计风格,在上一版本中已经有所使用了,但还是丑。这一版虽然和专业设计师比起来还是会有很大差距,但是对我来说,着实是顺眼了很多,也不枉我即使在睡觉也在思考Markcook2.0应该长什么样。
   升级到Vue2.0,在开发体验上并没有太大的变化,反而是Vuex2.0的使用让我稍微有些不习惯,因为它和旧版本的用法有着比较大的不同。不过得益于文档的详细,在仔细阅读了文档以后,遇到的问题基本都能够得以解决。经过一定的开发摸索,发现Vuex2.0其实会更容易理解和使用,因为它把 store , mutation , action 和 getter 都放在了一起,在组件中只需要通过 this.$store 就能够对 store 进行操作,逻辑非常清晰易懂,所以也很容易理解为什么我项目中每一个组件的逻辑都非常简单,代码量也非常少。
  由于水平有限,项目代码难免会有错漏和不完美的地方,非常期待能够得到大家能够建议,后续也将继续对Markcook进行维护。
  谢谢大家~
vqte4oKs 发表于 2016-10-6 02:59:36
路过,帮顶!
回复 支持 反对

使用道具 举报

David_SH 发表于 2016-10-14 00:13:56
我女友不当尼姑的原因是她四级没过,庵里不收.
回复 支持 反对

使用道具 举报

刺猬要怎么拥抱ベ 发表于 2016-10-22 09:56:02
顶起思恋逃离回忆丶
回复 支持 反对

使用道具 举报

刘鑫琪 发表于 2016-11-3 05:25:21
楼主,一路顺风!
回复 支持 反对

使用道具 举报

tututu 发表于 2016-11-10 17:58:38
楼下有什么好吐槽的么?
回复 支持 反对

使用道具 举报

hellohenrry 发表于 2016-11-14 16:47:02
我若安好,便是晴天。
回复 支持 反对

使用道具 举报

3056961695 发表于 2016-11-16 17:00:20
酷辣虫人气好旺!
回复 支持 反对

使用道具 举报

吃喝玩乐 发表于 2016-11-16 18:32:06
永远有多远?你小子就给我滚多远。
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表