skyADMIN

组件化下的业务逻辑和组件复用的思考

由于目前的工作,用vue用得蛮多,确实是一个很不错的框架。组件化的思想也确实给程序开发带来了很大的便利性。

但是现在我在纠结一个问题。组件化开发下,业务逻辑应该放在细小的组件内部,还是放在父组件中,或者通过什么别的方式,抽离到单独的文件中,比如,模块的方式……?

比如我有一个组件,是一个toast弹出层,弹层可能要在多个地方使用,它的功能是提示操作状态,比如,成功、失败、加载中等等。那么这个组件应该对外界暴露一些props,可以使父组件通过设定props来使组件有不同的表现。而弹层,当然有一个显示、隐藏的需求。那么这个显示和隐藏,是否应该由组件自己控制还是由父组件来控制。

由组件自己来控制就比如,这个组件会监听event bus上的某个事件,再根据事件使自己显示出来,然后组件内部有一个计时器,3秒后自动关闭。而完全由父组件控制的话就是说,props暴露一个isShow接口,父组件给isShow设为true就显示,设为false就关闭,整个逻辑在父组件里,弹层组件就只是一个纯粹的UI。

思考这个东西的原因在与和另一个同事的交流,聊到组件间通信,我说我之前没发现event bus这种玩法的时候,vue兄弟组件通信很扯淡,要靠一种父组件代理的乒乓式的方法来通信,他问我为啥要兄弟组件通信。我说比如我有一个分页组件和一个列表组件。列表组件的功能是从服务器端读取数据并展示,分页组件就是最下面的一排按钮做分页。那么组件列表读到的数据里肯定有总页数这种需要告知分页组件的数据,而换页了也应该由分页组件告诉列表组件。

同事告诉我,你可以把业务逻辑(从服务器端获取数据)挪到父组件里,获取到的数据要展示通过props传递给列表组件,列表组件专注于渲染列表,这样还可以复用。分页组件要知道总页数也可以通过props从父组件获取,翻页也可以通过派发(子父组件通信很简单)告诉父组件。

感觉说得很有道理,我也好好思考了下,准备下次有机会实践一下。不过我觉得我这种把业务逻辑写进细小的组件里的思路也没有错。

我又搜索了一些资料,看到一篇文章中提到,在前端里,组件化和模块化,是常见的两个概念,这两者差不多,都是分而治之的思想,但是又有一些细微的差别:模块化的目的是为了 重用  ,模块化后,可以把模块很方便地重复使用和插拔到不同的平台、不同的业务逻辑。而组件化的目的是为了 解耦  ,把系统拆分成多个组件,分离组件边界和责任,便于独立升级和维护。

我感觉这基本解决了我的问题。组件化里,我应该把业务逻辑放在组件里,因为我的目的是将系统划分为一个个尽可能独立的小部分,能独立开发,易于维护易于升级,降低这个组件和系统中别的部分的耦合度,比如那个列表的问题,如果我要把列表和分页交给两个人分别去开发,就应该把业务逻辑放在组件里,而不是去解决父组件里由于多人共同开发造成的无数冲突。

此外,组件应该设计之初就考虑好这是一个UI组件还是业务组件,UI组件确实应该剥离业务以便复用,业务组件能不能复用呢,我觉得也是能的,业务逻辑也有需要整块复用的地方。

码字很辛苦,转载请注明来自环宇博客《组件化下的业务逻辑和组件复用的思考》

评论