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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

前阵子，我搭建了一个后台管理系统，使用 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 标签重新定义的面目全非。

HTML

element

组件

标签

19 条回复 • 2019-01-17 08:46:47 +08:00

kernel

2018-12-25 15:09:26 +08:00

如果你要增加原生标签没有的功能呢？

learnshare

2018-12-25 15:14:32 +08:00

你的疑问其实已经有了答案，这么多第三方 UI 库和组件库就说明有必要，很有必要

这个问题主要的矛盾是：浏览器早期定位于显示文章（文字和图像），类似 word 那样有基本的排版功能即可。但现在我们要在里边做复杂的东西，复杂到浏览器提供的标签和组件不够用

gongcheng121

2018-12-25 16:40:31 +08:00

这个看下文档能用几秒钟，又不是每次都看，而且框架帮你省了的时间应该更多。
再说自身技术提升，这个要看你怎么做，就是复制过来用，那没啥提升，要是去想他怎么封装的，看看源码实现，不可能没有提升。

geshansuiyue

2018-12-25 16:50:05 +08:00

自己写可能要写一堆的样式

cstome

2018-12-25 16:52:16 +08:00

@gongcheng121 #3
@geshansuiyue #4

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

@kernel #1

我没说不能用框架，我是说没必要吧自带的标签重写，增加学习和使用成本。

passerbytiny

2018-12-25 17:06:36 +08:00

我已经脱离前端很久了，只说下以前的想法，现在不一定适合。前端框架，要么像 Extjs 那样完全隐藏 HTML，以 Javascript 为主，用桌面应用的思想来开发（然而真的好难，我没学会）；要么像 AngularJS 1 那样完全隔离 HTML 跟 Javascript，HTML 只管界面，Javascript 只管数据。

如果现有功能不够用，可以新增自定义标签，例如新增一个<grid>来显示表格，但是不能入侵现有标签，<el-button>是个相当糟糕的标签。

kernel

2018-12-25 17:54:18 +08:00

@cstome 不重写怎么加功能啊？拿个 button 这种没功能的举例有什么意义？
即使是 button，比如我要加一个功能点下后文字变化，比如

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

这个 busy-text 属性不是原生有的，你不改标签直接用原生的 button+自造的属性? 更容易引起混乱。

shintendo

2018-12-25 18:00:15 +08:00

@passerbytiny

不明白，比如我提供一个功能强化版的按钮，叫<el-button>不就是为了非侵入吗，这样不影响你在不需要它的地方继续用原生<button>，要是框架直接改造原生 button 往上面挂功能，那才是侵入吧

cstome

2018-12-25 18:11:47 +08:00

@kernel #7

完全有替代的解决方法，就以你的例子：

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

重申一遍，我不反对组件化，反对的是重新 HTMl 本来就有的标签。

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

2018-12-25 21:16:39 +08:00

@passerbytiny 搞笑，为什么一定要对应原生标签名?那没有对应的原生标签的组件呢？比如分页，直接用 div ？

honeycomb

2018-12-25 21:52:14 +08:00 via Android

这样就意味着阿里的前段库统统上了黑名单

ted94

2018-12-25 21:59:36 +08:00 via Android

因为组件不仅仅有样式，还具备属性，方法，事件等。如果仅仅只是更换样式，确实没必要用到组件。

cstome

2018-12-26 09:17:00 +08:00

@kernel #11 估计你是真的不懂组件化的意义。

像分页这种可复用的组件完全抽象拆分成单独的组件。

yimity

2018-12-26 10:16:25 +08:00

对于完全没有更多功能的自定义组件，真的不如用原生标签来得好。
当然了，如果需要更多功能，那为什么要自己写组件，而不用定义好的组件呢？
所以上面很多人回答的，明白楼主的意思吗？

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

2019-01-16 11:17:27 +08:00

你用 Bootstrap 不是一样要学习成本.

cstome

2019-01-16 11:30:08 +08:00

@redbuck #17 用 bootstrap 只是 CSS 层面的，调用 class 就行了，不用像 element-ui 一样学他特有的属性，给他传参。

redbuck

2019-01-17 08:46:47 +08:00

@cstome 你要实现特定功能,需要借助第三方库的时候,也是要看文档的.

而且 react 写多了,你自己封装的组件也是这种玩法.学习成本不大.就是看下都有哪些属性,控制什么功能.看一下不用 1 分钟.而对于一些类似原生 html 标签的,UI 库都是做加法.原来有的一般都会保留.