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

This topic created in 2696 days ago, the information mentioned may be changed or developed.

前阵子，我搭建了一个后台管理系统，使用 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 replies 2019-01-17 08:46:47 +08:00

kernel

Dec 25, 2018

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

learnshare

Dec 25, 2018

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

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

gongcheng121

Dec 25, 2018

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

geshansuiyue

Dec 25, 2018

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

cstome

Dec 25, 2018

@gongcheng121 #3
@geshansuiyue #4

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

@kernel #1

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

passerbytiny

Dec 25, 2018

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

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

kernel

Dec 25, 2018

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

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

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

shintendo

Dec 25, 2018

@passerbytiny

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

cstome

Dec 25, 2018

@kernel #7

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

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

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

passerbytiny

Dec 25, 2018

@kernel #7
@shintendo #8
<button class="btn btn-primary" @click="add()" busy-text="加载中...">，要变样式，就加 CSS 类，要自定义行为，就加自定义属性，但不管怎么变动，它都是一个“ button ”，所以标签名就得是 button。

轮子再怎么定制，都是轮子，要是到雪地上轮子不管用了，那就整体换成雪橇。而你们两个，是用一个不知道什么鬼的“ lun zi ”，去充当轮子。

kernel

Dec 25, 2018

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

honeycomb

Dec 25, 2018 via Android

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

ted94

Dec 25, 2018 via Android

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

cstome

Dec 26, 2018

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

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

yimity

Dec 26, 2018

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

leekafai

Dec 26, 2018

这些是 ui kit，html 自带标签在浏览器中解析也会按照浏览器的 ui kit 进行渲染，用 element ui 的时候没有要求必须使用 element 的所有组件，可以选择 html 自带标签。
element 没有代替原有的 html 标签的功能，你可以使用原有的 html 标签，同时，element 也没有将原有的标签定义得面目全非，引入了 ui kit，就说明侵入了原有的标签了吗？

redbuck

Jan 16, 2019

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

cstome

Jan 16, 2019

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

redbuck

Jan 17, 2019

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

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