关于前端:在后台框架同质化的今天我是如何思考并做出差异化的

41次阅读

共计 2412 个字符,预计需要花费 7 分钟才能阅读完成。

首先先安利一波,由我开发并保护的后盾框架 Fantastic-admin 正式公布 Vue3 版本了,虽迟但到,欢送大家拜访链接体验。

回归正题

从题目就能够看出,后盾框架其实是一片 大红海 。去年我做过一个统计,在 Github 上搜寻 vue admin,能够搜到 1 万多个仓库,这后果阐明了什么?我认为阐明了两点:一, 仿佛任何人都能够写一套后盾框架 ;二, 但想从中怀才不遇却不容易

去年我写过一篇文章,叫《我是如何设计后盾框架里那些精益求精的动画成果》,那会其实曾经隐约感觉到,仿佛做的好的、被人熟知的几个后盾框架,在性能和界面上曾经开始趋于同质化了,很难做出差别。所以那会的我尝试从动效切入,做点不一样的货色,去优化用户应用体验。

当然这是一个很容易被用户疏忽掉的细节,但我置信 细节决定成败,我也心愿应用的人在用这款产品的时候,能不经意的从一些小细节里发现亮点,内心里说一句「Cool~」,并且这大半年来我也再重复地优化已有的一些性能,尝试做到更好。借着这次大版本升级,也是时候能够和大家聊一聊了。

亮点

配置可视化

这是框架主题配置的界面,可能光看上图也感觉没什么特地的,那来看下下图,原先的配置界面。

没有比照就没有挫伤,配置可视化这一块是我以前做得有余的中央。

因为单纯的文字描述会带来想象力,想象力就会导致信息传播不精确。当配置项一多,大片的纯文字介绍和阐明,会减少用户的了解老本,这也是为什么在一些须要明确传播用意的中央,肯定会有配图,例如交通批示标记。

当然如果图片信息过于形象的话,成果反而不迭文字,所以我仍旧保留了文字描述信息。

截图中其实没用应用任何图片,全是用 CSS3 实现的噢~

全局搜寻

全局搜寻减少了对搜寻后果高低切换和回车进入的快捷键反对。

并且光标始终固定,并不会因为按高低键而扭转地位,不便批改搜寻内容,能够达到全程手齐全不来到键盘实现页面切换操作。

页面水印

局部后盾框架都有提供水印的个性,展现成果大同小异,但仿佛都有一个显著的问题,那就是忘了应用水印的初衷。

为什么要应用水印?无非是在一些特定的场景下,须要爱护零碎里的信息,不被随便截取并分享流传。

既然是爱护,那就不能太容易就被破解,而我看到的状况却是:

水印竟然能从控制台里轻松地被删除,那我是怎么做的呢,还是看图吧。

不论是删除 DOM 元素,还是批改款式,都会从新生成水印,防止水印被批改或删除。

对水印感兴趣的小伙伴能够深刻浏览这篇文章《前端水印实现计划》。

页面最大化

最大化的性能是借鉴了其它框架的思路,在此基础上,我减少了双击标签栏将以后标签页最大化的个性,尽管是个小小的扭转,但很合乎应用习惯。

这种性能的劣势在于,既扩充了页面可操作的面积,又不会像全屏性能那样,强制让人专一于以后页面而无奈进行其它任何操作。

标签页拖拽排序

对拖拽的过程进行了优化,不便比照,上面是 Vue2 版本里的标签页拖拽排序成果。

标签页合并

一般模式下,路由的每一次变动,都会主动创立一个标签页,如下图:

这就会导致频繁操作下,标签页数量会剧增。在大家都默认标签页就应该是这样的状况下,我思考标签页是否能够像浏览器的标签页一样,只在一个标签页里切换,于是一个新个性就进去了。

只需通过简略的配置,就能够实现标签页合并的性能。

页面缓存

这个话题堪称是陈词滥调了,在去年我就提供了一个解决方案,详见《一劳永逸,解决基于 keep-alive 的后盾多级路由缓存问题》。

大抵思路就是将多级路由主动解决成二级,并且保留原先多级路由的数据。相当于保护两份数据,原始数据用于侧边栏展现,而解决过的二级路由当做实在路由进行注册。从而彻底解决多级路由缓存这个坑人的问题。

但因为在 Vue2 版本里并不是强制开启,导致很多开发者如果没有仔细阅读文档的话,压根不晓得这一个性。

而在 Vue3 版本里,我将这个配置项做为了规范个性,并且做了针对性的优化,笼罩更多的应用场景。至于为什么不让用户抉择呢?原因无他,就是这个计划切实是太好用了。

表单展现模式一键切换

在做后盾开发的时候,咱们通常会应用路由跳转的形式去解决表单详情页,然而如果表单内容量较少呢?可能会改成弹窗或者抽屉的模式,置信这个工作量,一两个小时就过来了,而当业务内容减少,表单内容也开始减少,这时候如果又要改回原先路由跳转的形式,我去,那我必定当场解体了。

于是我开发了一个规范模块,只需批改其中一个参数,就能够疾速在 路由跳转 弹窗 抽屉 这三种模式中疾速切换,并且代码无需调整,其外围就是把表单和承载的容器进行解耦。

文字依据背景主动变色

这是一个小 feature,所以就放到最初说了,因为后盾零碎的登录页的背景,会依据不同我的项目需要进行替换,这就可能会呈现一个问题,笼罩在背景图上的文字要如何设置色彩,万一文字色彩和背景色彩色值太靠近,就会导致文字无奈看清,须要手动再批改文字色彩。

为了节俭开发者的工夫,我一开始想的是应用文字暗影 text-shadow: 0 0 1px #000;,把 blur 值设置到最小 1px,看上去就像给文字加了个描边,而后再把文字色彩设置为暗影色彩的反色,例如暗影色彩是彩色,那文字色彩就是红色。这样哪怕是极其的纯白或纯黑背景,有文字暗影的保障,也能确保文字能看到。

但之后我发现了更好的计划,就是 mix-blend-mode 属性,当设置为 mix-blend-mode: difference; 时,成果如下:

完结

以上介绍的只是 Vue3 版本里比拟间接拿出来说的一些个性,还有更多个性大家能够自行去 Fantastic-admin 里应用体验。

最初

做为一款收费 + 付费双模式经营保护的后盾框架,去年我发文分享的时候,评论里有局部小伙伴语气都很激动,心愿往年的评论区能平心静气一点。

最初,用脱口秀里 Callback 的技巧,回应一下我那篇倍受争议的文章《别再吃力去找后盾的前端框架了,2021 年就用 Fantastic-admin 吧》:

2021 年都过半了,你还没用上 Fantastic-admin 吗!

正文完
 0