前端页面设计模式求救

[tu7jako]

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

[finalwave]

@hxysnail 有合格的产品和设计才有合理的前端组件设计。动不动就加两个改两个需求，不去复制粘贴，那组件的可维护性更是灾难。

[RogerL]

我习惯用 hooks 抽象出数据，然后样式数据分离
比如 useTable 这种，传入一个 request ，返回 dataSource ，pageInfo ，isLoaing
大部分情况下，数据逻辑其实是差不多的（基本就返回数据，loading 加载状态，分页这几个）
UI 如果真的差距比较小，你就可以继续封装成更通用的

[fuyun]

@hxysnail 因为：1 、目前绝大多数项目都是短平快的复制粘贴项目，只要求“可用”，不要求“优雅”； 2 、目前很大部分前端确实不需要、不了解、不会设计模式，都用 vue 了，还谈设计模式？

[weixind]

这种场景下，组合优于继承。理解这个了就知道应该怎么搞了。使用插槽是个糟糕的设计。

[chicbian]

尽量的细化组件，先写几个页面，然后再抽，基本上你就知道要抽那些了，逐渐的抽离。本人站 vue ，写这种非常丝滑。只封装最基本的组件，然后基于这个，封装上层业务组件。

[lizy0329]

简单封装一下即可，前端页面过时得非常快

[hxysnail]

@zhtyytg 其实问题是出在人的能力上，能力已经具备的前提下，高度封装是本能，肯定是比简单复制粘贴高效的。但是很多人把能力建设的时间算在项目排期上，因为他不会，而学习需要时间，但学习其实是在学校阶段就要做的事情。

[hxysnail]

@fuyun 虽然我也不用 vue ，也更喜欢 react 的设计理念，但是我不认为 vue 就不配谈设计模式。其实，再烂的语言，都有漂亮的写法。前端项目短平快是现状，现状不意味着正确。

[hxysnail]

@finalwave 我觉得这是另一个问题，不能因为别人烂我跟着烂吧……实际上，好的设计适应性也强，更不会因为产品设计的调整就大动干戈。

[fuyun]

@hxysnail 不是不配，只是现状下选择的最优解。而且，设计模式是有成本的，jQuery 也可以撸一个优雅的方案出来，但大部分情况下你还是会选择框架。同理，大部分公司、项目就是为了解决实际问题的，甚至还要求快，这也是为何很多人倾向于 vue 的原因。另外，自己的项目大多是 ng 路线……

[X0V0X]

复制粘贴，早点下班

[zhtyytg]

@hxysnail 你这就属于话不投机半句多了。我完全赞成#21 楼说的，并且认为你有点想当然的俯视本帖下的所有人。你能力这么出众，应该已经财富自由了吧？

[hxysnail]

@zhtyytg 话不投机不要说不就完了嘛？非要说那么多干嘛呢？我是不是可以学你这么说：

既然复制粘贴这么牛逼，你也掌握了这个大招，在前端圈应该混得风生水起，财富自由了吧？相反，我由于没理解到复制粘贴的精髓，所以混了这么多年，还在苦哈哈打着工，有上顿没下顿的。是否有什么书讲解这个技巧的，不凡告知小弟，我想学习一下，

[daysv]

没啥设计的， 全走函数完事。react 你想怎么拆就怎么拆

[asdjgfr]

业务搞封装就是屎山，这是无数前辈总结的经验，跟语言、框架都没关系

[gerefoxing]

不要封装，业务页面以后会出来个性化需求的，公用封装以后一堆判断，每个页面自己写自己功能模块就行了。除非那种非业务的公用的，这些可以封装下组件

[LeeSeoung]

mixin 合理复用就行了。

[cheneydog]

相同的且通用部分抽出来做成组件，差异部分做成 props 。
也同意以上回答，不要过度封装业务。业务如果理解的很深可以按照业务抽象组件，但是拿捏不好业务还是按技术通用部分抽出来做成组件，哪怕业务实现上啰嗦重复。

[Yumwey]

做过一个通用卡片设计，最早规划就是后端数据动态渲染卡片效果，后来全部变成定制了😂

[ZGame]

@heybwei 看看复杂度 哈哈