2019年与表格同在| 掘金年度征文

1,030 阅读3分钟

在2015年初,表格组件GridManager立项,不知不觉间已过去了1700多天。

在2019年初定下的目标

这些年来,表格项目一直不温不火,github的star总是滴滴哒哒的缓慢增长。 反观那些与技术无关的star几天之内就10k+, 除了羡慕之外还有些许不平。

革命尚未成功,同志还需努力。 于是在2019年初启之际,为表格定下了star过千的目标。

为了这个目标我做了这些事

支持三大框架

GridManager在2017年时,移除了jQuery依赖成为了原生JS表格组件,并在2018年支持了Vue框架。于是在2019年首先要解决的就是对Angular-1.xReact框架的支持。

Angular-1.x

得益于一直做着Angular-1.x的项目,所以在对Angular-1.x的支持过程中顺风顺水。在2019年1月5日,支持Angular-1.x框架的v2.7.1发布。并在公司项目中大量使用,在这里感谢我的团队成员给予的支持。

React

早在2018年时就对React进行了初步的支持,但是无法在表格模板中解析jsx,也不支持React组件。问题的根源是React未找到像Vue那样将DOM节点转换为框架对像的方法。 通过对React框架的学习,和相关源码的阅读。最终找到以React.cloneElement + ReactDOM.render相配合的解决方案。详情: 可点击进行

在这个痛点解决后,于2019年6月11日,支持React框架的v2.8.6发布。 并在发布后集成于React组件库cloud-react内。

至此,三大主流框架适配完成。

支持自定义分页模版

在2018年时,团队内的伙伴基于GridManager写了两套皮肤:

在编码期间,为了适配各自的组件库风格需要对分页区域进行自定义。 当时通过大量的配置项支持了这个需求,但总感觉过于复杂。

于是配置项ajaxPageTemplate出现在2019年3月12日的v2.7.5版本中。

新功能迭代

  • 树结构
  • 异步分页模式
  • 行移动

在这些功能的开发过程中,受限于项目结构,所以进行的并不是很顺利。在忍受了一段时间后,终于小宇宙爆发暂停了对新功能的迭代转而进行代码优化。 当优化完成后,最后一个功能也发布于2019年12月19日的v2.10.2中。

代码优化

  • 重新分割模块
  • 抽取公共utils、base、tool
  • 将common下的公共模块从对像编程方式改为函数式编程
  • 样式文件清理,增加className前缀,减少了三分之一的体积。
  • 简化配置项
  • 增加钩子

优化后,不仅使逻辑更加清晰、代码量减少,而且使得单元测试变的更加简易。

古人诚不欺我: 工欲善其事,必先利其器。

目标完成情况

虽然迭代不断,优化不断。但截至2019年12月19日,star才达到336。距离年初想要实现的1000目标相去甚远。

最近一年的npm下载量

数据来源于https://npm-stat.com/, 采集时间点为: 2018-12-18 至 2019-12-18

原生版本

Angular 1.x 版本

Vue 版本

React 版本

从下载量来看并不可观,愿明年可以有所起色。也希望大家尝试使用,功能已经很全面了。

写在最后

在这个时代下,你我同为追梦人。

时代在变化, 技术在更迭。

愿在技术更迭的浪潮中,你我穿戴着被汗水与浪花打湿的衣钵总能平稳着陆。

掘金年度征文 | 2019 与我的技术之路 征文活动正在进行中......