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

AntDesign 地雷事件有感: HTML 自带的标签有必要用第三方组件库代替吗?

  •  
  •   cstome · 2018-12-25 14:13:09 +08:00 · 4186 次点击
    这是一个创建于 1921 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前阵子,我搭建了一个后台管理系统,使用 Vue 作为前端框架。与网上许多现成的 Vue 全家桶+element ui 的后台管理系统不同,我采用了 AdminLTE 3.0 (也自带了 Bootstrap4 ) 的 CSS 作为样式框架,HTML 部分大部分也照搬了 AdminLTE。整个开发体验感觉非常好,把复杂的可复用组件模块化的同时,也保留了原生 HTML 的写法。

    于是这里就涉及到一个问题,HTML 自带的标签用第三方组件库代替有什么意义?

    在我看来这只是增加了学习成本,而且对自身技术提高是无用的。

    以 button 标签为例,按钮的样式本身通过 class 定义,像自带的 disable 之类的属性也都是 HTML 标准。

    <button class="btn btn-primary" @click="add()">Add New</button>
    

    而 element ui 也提供类似的方法定义按钮,但我们为什么要浪费精力,学多一个框架的标签呢?

    <el-button type="primary" icon="el-icon-edit">Edit</el-button>
    

    实现同样的功能,上面的写法只要学过 HTML 的人都知道,而下面的写法至少要专门看下 element ui 的文档,但好端端的 HTML 怎么就变成了 element ui ML 了呢?

    在我的项目中也用到 element ui 的一些组件,我赞同前端组件化开发,但我觉得不应该把前端本该有的 HTML 标签重新定义的面目全非。

    19 条回复    2019-01-17 08:46:47 +08:00
    kernel
        1
    kernel  
       2018-12-25 15:09:26 +08:00
    如果你要增加原生标签没有的功能呢?
    learnshare
        2
    learnshare  
       2018-12-25 15:14:32 +08:00
    你的疑问其实已经有了答案,这么多第三方 UI 库和组件库就说明有必要,很有必要

    这个问题主要的矛盾是:浏览器早期定位于显示文章(文字和图像),类似 word 那样有基本的排版功能即可。但现在我们要在里边做复杂的东西,复杂到浏览器提供的标签和组件不够用
    gongcheng121
        3
    gongcheng121  
       2018-12-25 16:40:31 +08:00
    这个看下文档能用几秒钟,又不是每次都看,而且框架帮你省了的时间应该更多。
    再说自身技术提升,这个要看你怎么做,就是复制过来用,那没啥提升,要是去想他怎么封装的,看看源码实现,不可能没有提升。
    geshansuiyue
        4
    geshansuiyue  
       2018-12-25 16:50:05 +08:00
    自己写可能要写一堆的样式
    cstome
        5
    cstome  
    OP
       2018-12-25 16:52:16 +08:00
    @gongcheng121 #3
    @geshansuiyue #4

    我是引入了 Bootstrap,用他们的 class。

    @kernel #1

    我没说不能用框架,我是说没必要吧自带的标签重写,增加学习和使用成本。
    passerbytiny
        6
    passerbytiny  
       2018-12-25 17:06:36 +08:00
    我已经脱离前端很久了,只说下以前的想法,现在不一定适合。前端框架,要么像 Extjs 那样完全隐藏 HTML,以 Javascript 为主,用桌面应用的思想来开发(然而真的好难,我没学会);要么像 AngularJS 1 那样完全隔离 HTML 跟 Javascript,HTML 只管界面,Javascript 只管数据。

    如果现有功能不够用,可以新增自定义标签,例如新增一个<grid>来显示表格,但是不能入侵现有标签,<el-button>是个相当糟糕的标签。
    kernel
        7
    kernel  
       2018-12-25 17:54:18 +08:00
    @cstome 不重写怎么加功能啊?拿个 button 这种没功能的举例有什么意义?
    即使是 button,比如我要加一个功能点下后文字变化,比如

    <button busy-text="加载中...">点我</button>

    这个 busy-text 属性不是原生有的,你不改标签直接用原生的 button+自造的属性? 更容易引起混乱。
    shintendo
        8
    shintendo  
       2018-12-25 18:00:15 +08:00
    @passerbytiny

    不明白,比如我提供一个功能强化版的按钮,叫<el-button>不就是为了非侵入吗,这样不影响你在不需要它的地方继续用原生<button>,要是框架直接改造原生 button 往上面挂功能,那才是侵入吧
    cstome
        9
    cstome  
    OP
       2018-12-25 18:11:47 +08:00
    @kernel #7

    完全有替代的解决方法,就以你的例子:

    你想实现这个功能肯定要绑定一个是否 busy 的数据,那么在 Vue 下就直接这样处理:
    ```
    <button class="btn btn-primary"> {isBusy ? "加载中...":"OtherText"} </button>
    ```
    这样不是更直观更有语义化吗?

    重申一遍,我不反对组件化,反对的是重新 HTMl 本来就有的标签。
    passerbytiny
        10
    passerbytiny  
       2018-12-25 18:22:14 +08:00
    @kernel #7
    @shintendo #8
    <button class="btn btn-primary" @click="add()" busy-text="加载中...">,要变样式,就加 CSS 类,要自定义行为,就加自定义属性,但不管怎么变动,它都是一个“ button ”,所以标签名就得是 button。

    轮子再怎么定制,都是轮子,要是到雪地上轮子不管用了,那就整体换成雪橇。而你们两个,是用一个不知道什么鬼的“ lun zi ”,去充当轮子。
    kernel
        11
    kernel  
       2018-12-25 21:16:39 +08:00
    @passerbytiny 搞笑,为什么一定要对应原生标签名?那没有对应的原生标签的组件呢?比如分页,直接用 div ?
    honeycomb
        12
    honeycomb  
       2018-12-25 21:52:14 +08:00 via Android
    这样就意味着阿里的前段库统统上了黑名单
    ted94
        13
    ted94  
       2018-12-25 21:59:36 +08:00 via Android
    因为组件不仅仅有样式,还具备属性,方法,事件等。如果仅仅只是更换样式,确实没必要用到组件。
    cstome
        14
    cstome  
    OP
       2018-12-26 09:17:00 +08:00
    @kernel #11 估计你是真的不懂组件化的意义。

    像分页这种可复用的组件完全抽象拆分成单独的组件。
    yimity
        15
    yimity  
       2018-12-26 10:16:25 +08:00
    对于完全没有更多功能的自定义组件,真的不如用原生标签来得好。
    当然了,如果需要更多功能,那为什么要自己写组件,而不用定义好的组件呢?
    所以上面很多人回答的,明白楼主的意思吗?
    leekafai
        16
    leekafai  
       2018-12-26 12:37:15 +08:00
    这些是 ui kit,html 自带标签在浏览器中解析也会按照浏览器的 ui kit 进行渲染,用 element ui 的时候没有要求必须使用 element 的所有组件,可以选择 html 自带标签。
    element 没有代替原有的 html 标签的功能,你可以使用原有的 html 标签,同时,element 也没有将原有的标签定义得面目全非,引入了 ui kit,就说明侵入了原有的标签了吗?
    redbuck
        17
    redbuck  
       2019-01-16 11:17:27 +08:00
    你用 Bootstrap 不是一样要学习成本.
    cstome
        18
    cstome  
    OP
       2019-01-16 11:30:08 +08:00
    @redbuck #17 用 bootstrap 只是 CSS 层面的,调用 class 就行了,不用像 element-ui 一样学他特有的属性,给他传参。
    redbuck
        19
    redbuck  
       2019-01-17 08:46:47 +08:00
    @cstome 你要实现特定功能,需要借助第三方库的时候,也是要看文档的.

    而且 react 写多了,你自己封装的组件也是这种玩法.学习成本不大.就是看下都有哪些属性,控制什么功能.看一下不用 1 分钟.而对于一些类似原生 html 标签的,UI 库都是做加法.原来有的一般都会保留.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2850 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 13:39 · PVG 21:39 · LAX 06:39 · JFK 09:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.