V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
omsfuk
V2EX  ›  前端开发

存在 UI 复用?

  •  1
     
  •   omsfuk · 2018-07-02 20:16:29 +08:00 · 3713 次点击
    这是一个创建于 2365 天前的主题,其中的信息可能已经有所发展或是发生改变。

    作为一名后端(嗯,后端,只是好奇一下),常常对前端感到好奇。。。

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

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

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

    34 条回复    2018-07-03 08:57:50 +08:00
    shoaly
        1
    shoaly  
       2018-07-02 20:37:34 +08:00
    这边的复用指的是 同一个项目里面的
    SeanChense
        2
    SeanChense  
       2018-07-02 20:40:22 +08:00
    像微信这种万年不变,写好组件复用的收益很大。
    有的厂,重写比复用更省时间。
    jamiefang
        3
    jamiefang  
       2018-07-02 20:43:57 +08:00 via iPad   ❤️ 1
    udqg3v0ZL6h6sHu8
        4
    udqg3v0ZL6h6sHu8  
       2018-07-02 20:54:50 +08:00 via Android
    代码复用的前提是需求稳定,无论前后端。要是那种老板或者产品说改就改的坑 b 项目,复用个屁啊,能复用的我也拆开写。谁都知道少写点代码好,但是经验告诉我还是耦合少点省心。断绝改了这里影响那里的可能。当然自己说了算的项目除外。莫名生气。
    mringg
        5
    mringg  
       2018-07-02 20:58:43 +08:00 via iPhone
    组件级别的复用远远大于方法级别的复用
    P233
        6
    P233  
       2018-07-02 21:00:57 +08:00
    style guideline
    hlwjia
        7
    hlwjia  
       2018-07-02 21:03:58 +08:00
    @orzzyd 对的,特别是前端,后端老板不知道是怎么回事,逻辑通就好。前端这里左一点,那里右一点,这个页面放在后面。。。。。

    样式啥的写地越独立越好,任何一个页面随便改都不影响其他的 哈哈哈
    loading
        8
    loading  
       2018-07-02 21:11:17 +08:00 via iPhone
    bootstrap,了解一下。
    omsfuk
        9
    omsfuk  
    OP
       2018-07-02 21:15:10 +08:00
    @shoaly 不同项目。。
    murmur
        10
    murmur  
       2018-07-02 21:16:25 +08:00
    ui 复用在办公软件类还是很明显的
    omsfuk
        11
    omsfuk  
    OP
       2018-07-02 21:18:11 +08:00
    @loading bootstrap 了解,确实在用,正因为用它所以引发了我的思考。用它的时候往往很不好定制(可能是因为大多数时候自己设计的页面大都比较任性。。),还不如自己写样式来的痛快=-=
    omsfuk
        12
    omsfuk  
    OP
       2018-07-02 21:18:54 +08:00
    @murmur 同一个项目复用可以理解,,,,,问题是不同项目呢。。这就很迷了
    qiayue
        13
    qiayue  
       2018-07-02 21:25:25 +08:00
    CSS Zen Garden 了解一下
    同样的 HTML 代码,配上不同的 CSS 就成了完全不一样的界面
    http://www.csszengarden.com/
    qiayue
        14
    qiayue  
       2018-07-02 21:25:59 +08:00
    congeec
        15
    congeec  
       2018-07-02 21:27:46 +08:00 via iPhone
    @omsfuk 举个例子,对#3 补充一下。

    下拉菜单到处都有,能复用。做个在日历里选择日期的功能,我会去用第三方的而不是自己写。
    omsfuk
        16
    omsfuk  
    OP
       2018-07-02 21:31:59 +08:00
    @congeec 我来举个反例,比如我非要将下拉菜单和菜单栏融合呢,,表述可能不是很清楚,大体意思就是我非要进行一些微调,这些微调往往又不是几下就搞定的
    omsfuk
        17
    omsfuk  
    OP
       2018-07-02 21:35:00 +08:00
    @qiayue 没用过,感觉这算是“结构”复用吧。。
    murmur
        18
    murmur  
       2018-07-02 21:39:11 +08:00
    @omsfuk 管理后台都是一个模子的
    bootstrap 构造下套个模板就去卖钱
    我司 oa 相关 n 个系统都一个公司做的。。那真的叫复用
    omsfuk
        19
    omsfuk  
    OP
       2018-07-02 21:40:52 +08:00
    @congeec 通俗一点来说,就是即使是一个按钮组件,样式也五花八门。所以说这是不是要求设计师不要太任性 斜眼笑.jpg
    omsfuk
        20
    omsfuk  
    OP
       2018-07-02 21:42:50 +08:00
    @murmur 666,理解,但是认真一点的项目的话,往往是设计师先出图的。。
    lightening
        21
    lightening  
       2018-07-02 21:45:00 +08:00
    @omsfuk 菜单栏可以接受 items,其中的一个 item 可以是个下拉菜单啊。
    lightening
        22
    lightening  
       2018-07-02 21:48:07 +08:00
    这和跨项目的代码复用是一样的。如果你想写一个跨项目使用的工具库,肯定是会覆盖一些通用的功能,并提供一些配置选项。如果你要做一个跨项目使用的 UI 库,当然也是覆盖一些通用的 UI 组件,并提供一些配置选项。
    omsfuk
        23
    omsfuk  
    OP
       2018-07-02 21:51:11 +08:00
    @lightening emmmm,就怕要求太任性,配置选项不够,,,话说回来,最全的配置选项莫过于 css,虽然抽象层次低
    udqg3v0ZL6h6sHu8
        24
    udqg3v0ZL6h6sHu8  
       2018-07-02 21:55:15 +08:00
    @hlwjia 哎可是这个道理好多人就是不懂,还以样式复用为荣,最可恨的是不该复用的也非要写在一起。js 慢慢理还能理清楚,但是 css 搞在一起那可真是想骂人。有一次我终于等到项目重构,好不容易把该拆开的拆开了,请个假回来又被前同事把样式抽出来了,嗯,前同事。
    Torpedo
        25
    Torpedo  
       2018-07-02 22:05:36 +08:00 via Android   ❤️ 1
    肯定有复用。设计团队有规范的,所以设计上就有复用,代码肯定也有
    lightening
        26
    lightening  
       2018-07-02 22:19:38 +08:00
    @orzzyd 对。是否应该复用不是取决于他们是不是很像,而是取决于他们是不是逻辑上是一样的东西。
    lightening
        27
    lightening  
       2018-07-02 22:20:42 +08:00
    @omsfuk 如果像 React Components 一样可以带逻辑,就有其他的配置方法。是的,一个好的 UI 库肯定是要经过科学合理的设计的,就像好的代码工具库一样。
    udqg3v0ZL6h6sHu8
        28
    udqg3v0ZL6h6sHu8  
       2018-07-02 23:02:51 +08:00 via Android
    @lightening 嗯。所以复用与否,很大程度上是产品决定的,不是前端。
    congeec
        29
    congeec  
       2018-07-03 02:33:01 +08:00 via iPhone
    @omsfuk #16 3 楼说的很清楚了,简单的基础组件。你的反例反对啥...
    imn1
        30
    imn1  
       2018-07-03 03:13:38 +08:00
    其实 UI 比后端更容易复用
    因为现在的 UI,基本就是控件(对象),及其属性、方法、事件的集合(现在可能还多个绑定数据)
    实际上设计 UI 很少用到控件的方法(指特殊的那些),事件其实也比较固定
    基本上可以写成一些 class/function,传参生成
    我的 powershell GUI,就用一个 function 可以动态生成整个 winform,其中有个 form 上面 80+个控件,只是用了一个六百行的 hashtable 做参数传到 function 搞定

    有一些控件集,例如选择行政区、住址之类,完全可以做成预制件,只是很少人去做
    因为搞设计的懂对象、类的人不多,另外就是前端人才流动性大,前端作业变化比后端多等等
    Philippa
        31
    Philippa  
       2018-07-03 03:59:56 +08:00 via Android
    Flutter 的 UI 组件就是一个个可复用的 Widget
    Building
        32
    Building  
       2018-07-03 06:47:49 +08:00 via iPhone
    那得看遵不遵循 MVC 了。
    learnshare
        33
    learnshare  
       2018-07-03 08:48:21 +08:00
    Bootstrap 就是组件化的了
    littlebaozi
        34
    littlebaozi  
       2018-07-03 08:57:49 +08:00
    基础组件都差不多吧,页面布局就各不相同了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1212 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 17:43 · PVG 01:43 · LAX 09:43 · JFK 12:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.