摘要：新版本允许多任务操作，这意味着你可以通过同时打开多个文件，在侧边栏中可以方便地进行切换你可以通过拖拽文件的方式把文件直接添加到的工作空间当中最大的变化，在于工具栏的升级。
随着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进行维护。
谢谢大家~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/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...
阅读 848·2021-11-22 09:34
阅读 930·2021-10-08 10:16
阅读 1752·2021-07-25 21:42
阅读 1775·2019-08-30 15:53
阅读 3488·2019-08-30 13:08
阅读 2127·2019-08-29 17:30
阅读 3257·2019-08-29 17:22
阅读 2153·2019-08-29 15:35
