前端之模块化思想

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

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

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

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

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

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

演变过程如下图:
之前:
整合之前

整合之后:
整合之后
是不是更加的清晰明了呢

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值