前端页面设计模式求救

[tu7jako]

vue 前端有多个页面，整体界面及其相近，只有少数内容不同….目前想采用模板设计模式开发。但具体怎么写没谱，想求 v 友分享案例～～谢谢了

[iOCZS]

用组件是基本操作，你想在更高层次复用的话，未必必要。越通用的东西越复杂，毕竟要支持各种情况。

[heybwei]

1 楼说的对，越通用越复杂。并且需求有时候真的说变就变，你能保证后续需求不会破坏了你的模板设计逻辑吗？

我曾经封装过一个用户/群组选择的弹窗组件，后续因为不同场景去适配各种模式：不同模式有可能同个接口，定制筛选要求，不同空间的权限要求等等。给后面接手的同学造成很大压力（界面还是这个界面，但是变动的小的功能点不同模式下不一样）。

[oxAlex]

简单的事情切勿复杂化

[ivslyyy]

vue slot 了解一下

[nitmali]

相同的部分抽出来做成组件，差异部分做成 props

[douxc]

赞同 1 楼

[klo424]

没必要，真没必要，还不如复制粘贴来的快而稳。

[tu7jako]

好吧～听劝放弃

[Jinxishihenian]

高阶函数组件
https://juejin.cn/post/6844904050236850184#heading-19

[ColdBird]

别把暂时的相似当作永久的通用，不然后面通用模板里塞一推业务逻辑，最后变成屎山

[dfkjgklfdjg]

封装真正通用的部分，可自定义的部分可以用 slot ，用这样的方式来设计一个自定义组件就好了。
如果不是状态类型的差异不建议使用 props 来传递。

最后就是如果是一个表单组件，如果只是部分表单内容不一致，可以把表单拆开成多个自定义表单组件，然后在各自的页面引用就好了。
而不会推荐你去封装一个大的自定义表单组件，然后用 slot/props 去传递差异的 form-item 。

[MRG0]

复制粘贴

[gzyguy]

稳通用的写成组件模板，对可能变化的地方做插槽处理。如果不确定，谨慎写成组件，否则后面组件内部一堆 props 和 if else 。

[K332]

复制粘贴呀，这个很简单吧，不用考虑什么复用

[okrfuse]

封装成组件，加 slot ，时间允许可以尝试写一下，不写永远不会进步，时间不允许，复制粘贴是王道

[ryougifujino]

首先你说只有少数不同，那就采用模板的模式，把变化的部分采用 render prop/slot 的模式来处理，切忌直接在模板里用 if else 。

如果页面只有部分相同，这时候就不适合用模板了，最好是每个页面独立出来，只把相同的部分抽象成组件。

还有一个复用层面是逻辑相同，但是 UI 有所差别，这时候就是用 hooks/composition api 的时候了。

[hxysnail]

居然都说复制粘贴好，前端都这个水平吗……

拿我们的前端来说，同个东西，在不同页面都有不同的风格和行为，不就是因为复制粘贴来的吗……一个设计良好的系统，好多通用改动，本来在框架或者模板层面动一下就解决了。结果因为复制粘贴多了，改动扩散到好好多个页面，然后 TMD 还改漏了……

设计模式是个好东西，结果因为自己驾驭不了就说复制粘贴好，就没人怀疑过自己的认知吗……

[zhtyytg]

@hxysnail 屁股决定脑袋。如果你做过的项目普遍需求稳定排期合适，那么一定会偏向于高度封装。反之，你就会理解屎山代码的出现原因。

[zhuangzhuang1988]

可以看下
React 开发人员 dan abramov 得文章，有时候复制粘贴也是一种好模式
https://overreacted.io/goodbye-clean-code/

[leon233333]

能抽出来一些还是抽出来一些，不然复制粘贴改相同代码的时候容易漏掉