首先看业务需求:头顶是个swiper,支持手势滑动,切换swiper-item
遇到问题:由于是swiper组件,三个栏目的业务代码都会混在一个页面里,这会使代码看起来十分冗长;这三个栏目的逻辑几乎不相关,这种情况下放在一个文件里显然是不合逻辑的,那有没有办法通过 import 等等方法,来导入js逻辑代码呢?
尝试方案:Page是个构造器,接受一个对象作为参数。既然如此,我们可以使用 Object.assign 的方式进行代码逻辑分区,如下图所示
它有几个缺点:
- 这在一定程度上可以让代码清晰可观,但仍不达预期——我的一个js文件依然太冗长了
- 我使用的ts无法校验Object.assign的类型,似乎Object.assign的返回值并不纯粹是一个对象,导致ts类型校验失败,我还没办法解决
求求做过类似的大佬能够指点一二
使用自定义组件,拆分成三个独立的组件。
解决了,使用...展开语法