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

Logo

随着Vue2.0的正式推出,我也正好籍此机会对我的开源项目Markcook进行重构。这一次重构既打发了我在高速路上堵车的无聊时光,又加深了对Vue2.0和Vuex2.0使用的认识,可谓一举多得。


项目地址:https://github.com/jrainlau/m...
在线地址:http://jrainlau.github.io/mar...
桌面程序下载(仅windows):markcook2.0-win32-x64.zip

什么是Markcook?

在上一个版本中我写了一篇文章,叫做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的时候,你会发现你之前的内容仍然留在原地。
图片描述

深入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,以实现同步输入输出的效果。

  • 每一篇文章都是一个对象,里面有三个属性:idcontentcurrent。在store.js内部有一个articleList数组,专门用来存放文章对象。每次新建文件,都会往数组内添加一个新的文章对象,在切换文件的时候,只需要根据对应的ID切换文章对象的current属性即可。

    articleList: [
      {
        id: createID(),
        content: 'Untitled\n---\n',
        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其实会更容易理解和使用,因为它把storemutationactiongetter都放在了一起,在组件中只需要通过this.$store就能够对store进行操作,逻辑非常清晰易懂,所以也很容易理解为什么我项目中每一个组件的逻辑都非常简单,代码量也非常少。

由于水平有限,项目代码难免会有错漏和不完美的地方,非常期待能够得到大家能够建议,后续也将继续对Markcook进行维护。

谢谢大家~


Jrain-前端玩具盆
记录一路以来的各种折腾。

Hiphop dancer,

12.9k 声望
11.6k 粉丝
0 条评论
推荐阅读
浅谈组件库和 SVG 图标库的解耦维护思路
任何的前端组件库,无论是业界内有名的 tdesign,ant-design 还是 element-ui 也好,它们都有着自己的一系列图标。经过观察发现,这些图标都是在组件库发布的时候就已经基本稳定了,鲜有调整,所以可以一直存放于...

jrainlau1阅读 1.9k

Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 67.7k评论 81

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 7.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.6k评论 6

Hiphop dancer,

12.9k 声望
11.6k 粉丝
宣传栏