前端之模块化思想

如你所知,npm作为一个包管理工具,能做到开箱即用,模块化可以说是其思想支撑。

最近做了一个地图相关的项目,地图上四种元素,每种元素里面都有一个数据可视化模块(图表)。

最开始写这个项目的时候,地图上只有一种元素:灯。在灯的图表上面加了一堆的东西,比如:chart,拖拽,消息处理,打印等等。后来发现修改过于复杂,于是进行模块化整理,无疑对代码可读性有较大的提升。

之后灯连成组,再加上电表以及三相开关,由于工期紧,所以直接copy一份代码,但后来对图表这块稍微做一点改动,要涉及至少四个模块,改起来很费劲不说,还容易遗忘。

痛定思痛,决定在这个基础上再次进行代码抽离,将公用组件以及函数全部抽离放进一个公用模块,使用时直接调用。

虽说在抽离的时候很痛苦,但整合完毕,对于代码复用性以及观赏性也有了极大提升。此外,对于其他人调用相关模块也不用太过关注其内部实现原理,加快了业务代码开发速度。

演变过程如下图:
之前:
前端之模块化思想

整合之后:
前端之模块化思想
是不是更加的清晰明了呢

写在最后
对于模块划分的粒度要有一定的掌控,如果划分太细致,会导致整个代码很松散,关联性不强,最重要的是,当数据在很多个模块之间传递时,因为不可控因素增多,可能会导致数据丢失或出错。