关于前端代码复用的疑问

Neal
  • 36

有一个页面,很多场景复用,但是每个场景又有一些区别。这样的话,就要在里面写一堆分支代码,感觉很乱。大佬们有没有什么比较优雅的方法

回复
阅读 1.6k
6 个回答

Vue的可以考虑就是使用作用域插槽把组件封装一下
React可以考虑使用HOC或者自定义hook

既然有很多场景复用,那就说明他们存在一定的相似性,或者更直接的说,存在相同的部分。这部分东西肯定是可以复用的。那就可以形成一个统一的东西,比如函数,比如类,或者一个相对复杂组件,或者更复杂的子系统。

每个场景又有一些区别,那这些区别可以通过某些方式注入到可复用物件中的。

对于函数来说,可以通过参数改变其具体行为;
对于类来说,生成的对象实例可以拥有不同的属性;
对于组件来说,有组件属性和事件提供定制化内容;
子系统的生态更为复杂,可扩展的接口也可能会更多(看设计)

如果仅仅是因为分支太多而受到困扰的话,可以去了解一下策略模式。

可以通过考虑把组件使用继承,或者混入的方式来处理。
特别是页面结构一致但是业务逻辑细微不同的时候。

也可以把页面UI抽离成组件,然后在对应的需求部分引入使用。

我的建议是,作为复用组件:
1.如果不同场景的情况比较少,可以在内部做兼容处理,但是并不能保证后续不会有变更
2.采用@HappyCodingTop 的做法,通过插槽(针对Vue),把灵活性暴露出来,组件内部只做复用数据的处理,后续扩展放内容在插槽中实现

先封装一个可复用的组件吧,其他的一些区别用slot,为了以后更好的扩展使用。好像这是最具性价比的方式了

使用js的工厂模式,或者使用类的多态。这是最经典的编程方法。

宣传栏