AgGrid框架的使用感受及前景分析

免责声明：文章源于本人闲情雅致，没有任何广告意图

我向来是不屑于使用前端框架的，最多用一些ui组件，但是ag-grid这个框架太TM好用了。这篇文章介绍下aggrid的一些哲学思想和我的使用感受，顺带记录一些往事。

CompetenceX：我开发的第一个网站

大三在博世西门子实习期间，我为公司开发了人生中第一个像模像样的H5网站：CompetenceX（能力矩阵管理系统，以下简称能力矩阵或C9X）。网站本身没有太多技术含量，基于aggrid和mongodb外加一个简单的数学模型，但是却成为我在web开发领域中的启蒙项目，为我之后的求职道路上提供了不少燃料。

能力矩阵是一个用来评估员工竞争力和职业技能的一个平台，和所有需求方一样，我的老板当时就给出了这个很模糊的需求。这时一个成熟的开发者当然应该用自己的技术来引导甚至改变用户的需求，但无论如何，首先要做的是建立一个基本的数据对象模型，比如ER图。

我当时为了应对未来可能的需求变更，设计了一套更加通用的对称关系模型，希望能在以后的日子中为我节省些许时间，为此我还专门买了本《MongoDB应用设计模式》来研究mongodb中集合与关系的关系。。（多年之后我才明白，几个月的实习期没必要考虑这么长远，按要求撸码、划水、交货才最实在。。）能力矩阵的ER图如下：

图中只有2个实体：person和project，剩下2个虚拟实体分别是person和project的父类。最重要的关系就是2个主要实体之间的work，work关系还拥有属性：2个实体之间存在多对多的关系，所以需要另外一个数据表来存放。mongodb compass截图如下，其中human和skill就是2个实体集合，unit则是work关系集合。

但是我今天可不是来介绍能力矩阵这个项目的，而是为aggrid做铺垫。据我所知，前公司现在依然在用我的C9X，经过4个大版本，无数个小版本迭代之后的C9X之所以成熟稳定完全是依靠它背后强大的驱动引擎Ag-Grid而生存的。

Ag-Grid：媲美Excel的web框架

完美的集合关系模型如何在前端展现呢，最好的办法呢就是画一个表格，经过1个多月的框架抉择，我终于在能力矩阵2.X版本中选择用aggrid来重构整个系统。（当时我在外网上海淘一款用JavaScript来实现Excel功能的表格框架，在一个不愿意透露姓名的热心群众的推荐下，我来到首页上大言不惭地写着“The Best JavaScript Grid in the World”的aggrid官网，但后来打脸发现人家真的是同行业口碑最高的框架没有之一）

aggrid的版本号已经高达22.X，在其众多功能与特性中最强大也是最闪耀的一个就是它今年刚刚发布的统计图功能。注意，统计图是aggrid今年才推出的，也是今年aggrid刚成为第一个能够同时兼并表格和图表的重量级框架，而且图表颜值不输echarts和chart.js等框架。在以前常常需要将表格框架和图表框架结合使用才能满足某些大数据系统，但如今aggrid已经独自承担2个重量级应用模块，这是我认为很酷的地方。

统一的图表语言

无论是表格还是各种统计图在数据上都是统一的，都是二维列表（也可以叫列表的列表），一个表格可以无损地转化成一个柱状图，折线图，雷达图，饼图。。。所以表格可以看成是一种特殊的图表。著名的前端框架ag-grid就是在这个理论上诞生的。

简而言之，表格即图表，图表即表格，它们在数据上是一致的，只是表现形式不同而已。可是市面上的应用框架要么就是纯表格的，要么就是纯图表的，直到我遇见了能将二者结合起来的aggrid。

虚拟DOM

AgGrid也融入了虚拟DOM来提升UI性能。DOM是一种很垃圾的技术，这是世人皆知的，但由于一些兼容性缘由，DOM一直没有被优化。

例如，使用“ table”，“ tr”和“ td”标签时，将1000条带有20列的记录加载到浏览器中，则该页面最终将带有许多呈现的DOM元素。这将大大降低网页速度。这将导致非常差的用户体验，或者由于浏览器内存不足而导致浏览器崩溃。

为了解决这个问题，aggrid仅呈现能在屏幕上看到的内容。例如，如果您将1,000条记录和20列加载到网格中，但用户只能看到50条记录和10列（因为其余的未滚动到视图中），则网格仅呈现用户的50行和10列可以实际看到。

简而言之，DOM虚拟化的实现之一就是，DOM元素的数量等于当前屏幕上可见元素的数量，而不是整个页面上元素数量。

AgGrid影响力

AgGrid中的Ag取自“Agnostic”，直译过来是"不可知论者"，虽然我也不明白啥意思，但官方的解释是：aggrid零依赖，零依赖的框架就叫”不可知论框架“（(lll￢ω￢)）。

除此之外，AgGrid还是webpack的2个白金赞助商之一。webpack作为一个开源项目，生存基本靠水滴筹，哦呸，是靠爱心捐款。webpack的数百家企业赞助商按照捐款数量从小到大分为青铜会员，白银会员，黄金会员，白金会员，不知道出于什么目的，AgGrid承诺每个月捐赠$2,500给webpack，是仅次于trivago的白金会员。

AgGrid并不是一家开源公司，但是JavaScript框架所谓的“不开源”也就是弄一个版权警告而已，其收费的enterprise版本也可以直接扒拉下来使用，真不知道他哪来这么多钱去补助webpack的。

组件化与模块化

组件和模块在广义上是同一个概念，在狭义上是不同的概念。

通常组件和模块指的是同一个概念，都是一种“分离”，“隔离”的设计模式。只是组件是前端的概念，模块是后端的概念，所以组件一般指的是前端UI组件，模块一般指后端的功能模块。但如果把组件和模块都拿到前端来借一步说话，他俩就有鲜明的区别了，是否一定有区别还得看UI与功能是否完全分离，当然这就扯远了。

作为前端设计的趋势，AgGrid早在2017年就开始使用WebComponents，但由于整个aggrid就是一个UI元素，组件化的效果和反响并不显著；但AgGrid从22.X版本（2019）开始引入模块化的概念，这样用户就可以按需加载功能模块，使得框架体积可以大大减小（enterprise完整版2m+）

看来拆分的思想无处不在，enterprise完整本可以拆成如上图所示的若干个模块。哦，对了，AgGrid还有一个“免费”的community版本不建议使用，因为正真有价值的功能模块包括图表，侧边栏，行列过滤器，搜索引擎，Excel导入导出，右键菜单，索引等核心功能全都在enterprise版本里，留给community版本的只有寥寥几个毫无竞争力的基础表格功能（如下图），你用community版本还不如使用其他开源表格框架。

所以AgGrid的正确用法是把enterprise的所有模块（包含community的所有模块）从官网或GitHub扒拉下来，然后将自己需要的那些组装进应用（教程见官网）。但生成的应用仅供我们内部交流和使用，不可再次销售，否则就违背了AgGrid的版权协议。

AgGrid设计模式

这个话题本身应该单独拉出一篇博客来谈，但篇幅有限就随便聊聊。在使用AgGrid的时候不要把它看成一个表格，把它想象成一个关系型数据库，用关系代数的思想来操作它，就会发现，无论是表格还是统计图都是一样的逻辑。

设计focus对象

focus对象是我常用的一种自定义对象，通常挂载在window.app上，但在aggrid这个重量级框架面前，也可以挂载在<ag-grid></ag-grid>元素上面。focus的思想来自经典的操作习惯：先选中对象再操作对象。在我的C9X项目中focus的属性包括当前聚焦的对象：人，人的分类，技能，技能的分类，人与技能的关系（unit），聚焦的行，聚焦的列。当鼠标在某一个单元格右击的时候就会自动的刷新focus对象，在右键菜单中就能对当前对象做相应的操作。这就是聚焦的哲学。

（未完待续）