03月08, 2019

代码对比器:mergely

最近分派给了我一个任务,完成nginx后台项目的三期迭代。

碰到一个功能点:历史版本。在前年,我有做过这个需求,就只是两个textarea框的比较(没有滚动条联动,没有类似git diff的效果)。

本想着就那样实现得了,但实现出来的效果。因为nginx的配置文件可能是有50多行的,太常见了,所以一屏是显示不下的。那么这样会导致一个问题是:一行行地去看,不会看的眼花么?

反正我是不爽了,于是准备开干,google搜索了一下,找到一个:mergely

有些不爽的是:它是基于jquery插件的,没有和react很好的融合。

折腾了一把,最终实现了,先来看一下效果吧:

alt

说一下在做的过程中,碰到的坑:

  • 版权弹窗(我不厚道地用css给它隐藏了)
  • 其他的一些css
  • Modal显示的时候,没法拿到里面的dom节点,上午提了一个issue,新版设置forceRender为true,是可以拿到ref的
  • 初次加载和异步加载,不区分的话,显示的内容会有问题(多列的历史记录全相同了)

第三个,我用setTimeoout的方案处理了一下,虽然挫了一些,但实在想不到更好的方案了。我在issue中提及,react-modal是有提供afterOpenModal,让用户在里面操作ref的,antd没有:

alt

第四个,就是判断是不是初次加载:

alt

因为我把firstMergely这个变量定义在文件上面,所以在切换路由的时候,会有一个坑:第二次进来的时候变成false了。所以必须在componentWillUnmount里面重新把这个参数设为true

另外新功能迭代的过程中,感觉react-hooks真的很有用,比如这个页面:

alt

Modal这玩意超级的多,能看的见的就有三个了。实际的代码中有4个,这边的状态同步会响应到一个集群,所以还有一个同步结果Modal

按正常的写法就要写4个变量来维护Modal的开关,其实这样是很心累的。如果一个页面有六七个弹窗呢,更夸张点,有十个弹窗呢?

所以呢,就有了这个库:react-powerplug

感觉可以在项目中使用,不过暂时我不会用,一是因为工期,二是因为我对hooks这一块还是不熟练。

这里有一篇文章可以看看:

本文链接:www.my-fe.pub/post/code-diff-tool.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。