存在 UI 复用？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2321 天前的主题，其中的信息可能已经有所发展或是发生改变。

作为一名后端（嗯，后端，只是好奇一下），常常对前端感到好奇。。。

代码（区别于样式）是可以复用的，也很容易被复用，因为定制性并不是很强。

而 UI 这种东西我就很迷了，UI 这种东西咋复用？要求定制性这么强。往往不同项目之前的样式风格千差万别，所谓的组件化，复用下逻辑还行，复用样式的话，我觉得就不能理解了。。。迷

欢迎各路大侠来谈谈对 UI 复用的认知和体会^^

复用

定制性

样式

后端

34 条回复 • 2018-07-03 08:57:50 +08:00

shoaly

2018-07-02 20:37:34 +08:00

这边的复用指的是同一个项目里面的

SeanChense

2018-07-02 20:40:22 +08:00

像微信这种万年不变，写好组件复用的收益很大。
有的厂，重写比复用更省时间。

jamiefang

2018-07-02 20:43:57 +08:00 via iPad

基础组件还是可以复用的
https://zhuanlan.zhihu.com/p/36112627
https://zhuanlan.zhihu.com/p/37401387

udqg3v0ZL6h6sHu8

2018-07-02 20:54:50 +08:00 via Android

代码复用的前提是需求稳定，无论前后端。要是那种老板或者产品说改就改的坑 b 项目，复用个屁啊，能复用的我也拆开写。谁都知道少写点代码好，但是经验告诉我还是耦合少点省心。断绝改了这里影响那里的可能。当然自己说了算的项目除外。莫名生气。

mringg

2018-07-02 20:58:43 +08:00 via iPhone

组件级别的复用远远大于方法级别的复用

P233

2018-07-02 21:00:57 +08:00

style guideline

hlwjia

2018-07-02 21:03:58 +08:00

@orzzyd 对的，特别是前端，后端老板不知道是怎么回事，逻辑通就好。前端这里左一点，那里右一点，这个页面放在后面。。。。。

样式啥的写地越独立越好，任何一个页面随便改都不影响其他的哈哈哈

loading

2018-07-02 21:11:17 +08:00 via iPhone

bootstrap，了解一下。

omsfuk

2018-07-02 21:15:10 +08:00

@shoaly 不同项目。。

murmur

2018-07-02 21:16:25 +08:00

ui 复用在办公软件类还是很明显的

omsfuk

2018-07-02 21:18:11 +08:00

@loading bootstrap 了解，确实在用，正因为用它所以引发了我的思考。用它的时候往往很不好定制（可能是因为大多数时候自己设计的页面大都比较任性。。），还不如自己写样式来的痛快=-=

omsfuk

2018-07-02 21:18:54 +08:00

@murmur 同一个项目复用可以理解，，，，，问题是不同项目呢。。这就很迷了

qiayue

2018-07-02 21:25:25 +08:00

CSS Zen Garden 了解一下
同样的 HTML 代码，配上不同的 CSS 就成了完全不一样的界面
http://www.csszengarden.com/

qiayue

2018-07-02 21:25:59 +08:00

http://www.csszengarden.com/tr/zh-cn/

congeec

2018-07-02 21:27:46 +08:00 via iPhone

@omsfuk 举个例子，对#3 补充一下。

下拉菜单到处都有，能复用。做个在日历里选择日期的功能，我会去用第三方的而不是自己写。

omsfuk

2018-07-02 21:31:59 +08:00

@congeec 我来举个反例，比如我非要将下拉菜单和菜单栏融合呢，，表述可能不是很清楚，大体意思就是我非要进行一些微调，这些微调往往又不是几下就搞定的

omsfuk

2018-07-02 21:35:00 +08:00

@qiayue 没用过，感觉这算是“结构”复用吧。。

murmur

2018-07-02 21:39:11 +08:00

@omsfuk 管理后台都是一个模子的
bootstrap 构造下套个模板就去卖钱
我司 oa 相关 n 个系统都一个公司做的。。那真的叫复用

omsfuk

2018-07-02 21:40:52 +08:00

@congeec 通俗一点来说，就是即使是一个按钮组件，样式也五花八门。所以说这是不是要求设计师不要太任性斜眼笑.jpg

omsfuk

2018-07-02 21:42:50 +08:00

@murmur 666，理解，但是认真一点的项目的话，往往是设计师先出图的。。

lightening

2018-07-02 21:45:00 +08:00

@omsfuk 菜单栏可以接受 items，其中的一个 item 可以是个下拉菜单啊。

lightening

2018-07-02 21:48:07 +08:00

这和跨项目的代码复用是一样的。如果你想写一个跨项目使用的工具库，肯定是会覆盖一些通用的功能，并提供一些配置选项。如果你要做一个跨项目使用的 UI 库，当然也是覆盖一些通用的 UI 组件，并提供一些配置选项。

omsfuk

2018-07-02 21:51:11 +08:00

@lightening emmmm，就怕要求太任性，配置选项不够，，，话说回来，最全的配置选项莫过于 css，虽然抽象层次低

udqg3v0ZL6h6sHu8

2018-07-02 21:55:15 +08:00

@hlwjia 哎可是这个道理好多人就是不懂，还以样式复用为荣，最可恨的是不该复用的也非要写在一起。js 慢慢理还能理清楚，但是 css 搞在一起那可真是想骂人。有一次我终于等到项目重构，好不容易把该拆开的拆开了，请个假回来又被前同事把样式抽出来了，嗯，前同事。

Torpedo

2018-07-02 22:05:36 +08:00 via Android

肯定有复用。设计团队有规范的，所以设计上就有复用，代码肯定也有

lightening

2018-07-02 22:19:38 +08:00

@orzzyd 对。是否应该复用不是取决于他们是不是很像，而是取决于他们是不是逻辑上是一样的东西。

lightening

2018-07-02 22:20:42 +08:00

@omsfuk 如果像 React Components 一样可以带逻辑，就有其他的配置方法。是的，一个好的 UI 库肯定是要经过科学合理的设计的，就像好的代码工具库一样。

udqg3v0ZL6h6sHu8

2018-07-02 23:02:51 +08:00 via Android

@lightening 嗯。所以复用与否，很大程度上是产品决定的，不是前端。

congeec

2018-07-03 02:33:01 +08:00 via iPhone

@omsfuk #16 3 楼说的很清楚了，简单的基础组件。你的反例反对啥...

imn1

2018-07-03 03:13:38 +08:00

其实 UI 比后端更容易复用
因为现在的 UI，基本就是控件(对象)，及其属性、方法、事件的集合（现在可能还多个绑定数据）
实际上设计 UI 很少用到控件的方法（指特殊的那些），事件其实也比较固定
基本上可以写成一些 class/function，传参生成
我的 powershell GUI，就用一个 function 可以动态生成整个 winform，其中有个 form 上面 80+个控件，只是用了一个六百行的 hashtable 做参数传到 function 搞定

有一些控件集，例如选择行政区、住址之类，完全可以做成预制件，只是很少人去做
因为搞设计的懂对象、类的人不多，另外就是前端人才流动性大，前端作业变化比后端多等等

Philippa

2018-07-03 03:59:56 +08:00 via Android

Flutter 的 UI 组件就是一个个可复用的 Widget

Building

2018-07-03 06:47:49 +08:00 via iPhone

那得看遵不遵循 MVC 了。

learnshare

2018-07-03 08:48:21 +08:00

Bootstrap 就是组件化的了

littlebaozi

2018-07-03 08:57:49 +08:00

基础组件都差不多吧，页面布局就各不相同了