关于前端代码复用的疑问

Question

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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