AntDesign 地雷事件有感： HTML 自带的标签有必要用第三方组件库代替吗？
cstome · 2018-12-25 14:13:09 +08:00 · 4422 次点击这是一个创建于 2147 天前的主题，其中的信息可能已经有所发展或是发生改变。
前阵子，我搭建了一个后台管理系统，使用 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 标签重新定义的面目全非。
 |
1
kernel 2018-12-25 15:09:26 +08:00
如果你要增加原生标签没有的功能呢？
|
 |
2
learnshare 2018-12-25 15:14:32 +08:00
你的疑问其实已经有了答案，这么多第三方 UI 库和组件库就说明有必要，很有必要
这个问题主要的矛盾是：浏览器早期定位于显示文章（文字和图像），类似 word 那样有基本的排版功能即可。但现在我们要在里边做复杂的东西，复杂到浏览器提供的标签和组件不够用 |
 |
3
gongcheng121 2018-12-25 16:40:31 +08:00
这个看下文档能用几秒钟，又不是每次都看，而且框架帮你省了的时间应该更多。
再说自身技术提升，这个要看你怎么做，就是复制过来用，那没啥提升，要是去想他怎么封装的，看看源码实现，不可能没有提升。 |
 |
4
geshansuiyue 2018-12-25 16:50:05 +08:00
自己写可能要写一堆的样式
|
 |
5
cstome OP @gongcheng121 #3
@geshansuiyue #4 我是引入了 Bootstrap，用他们的 class。 @kernel #1 我没说不能用框架，我是说没必要吧自带的标签重写，增加学习和使用成本。 |
 |
6
passerbytiny 2018-12-25 17:06:36 +08:00
我已经脱离前端很久了，只说下以前的想法，现在不一定适合。前端框架，要么像 Extjs 那样完全隐藏 HTML，以 Javascript 为主，用桌面应用的思想来开发（然而真的好难，我没学会）；要么像 AngularJS 1 那样完全隔离 HTML 跟 Javascript，HTML 只管界面，Javascript 只管数据。
如果现有功能不够用，可以新增自定义标签，例如新增一个<grid>来显示表格，但是不能入侵现有标签，<el-button>是个相当糟糕的标签。 |
|
7
kernel 2018-12-25 17:54:18 +08:00
@cstome 不重写怎么加功能啊？拿个 button 这种没功能的举例有什么意义？
即使是 button，比如我要加一个功能点下后文字变化，比如 <button busy-text="加载中...">点我</button> 这个 busy-text 属性不是原生有的，你不改标签直接用原生的 button+自造的属性? 更容易引起混乱。 |
 |
8
shintendo 2018-12-25 18:00:15 +08:00
@passerbytiny
不明白，比如我提供一个功能强化版的按钮，叫<el-button>不就是为了非侵入吗，这样不影响你在不需要它的地方继续用原生<button>，要是框架直接改造原生 button 往上面挂功能，那才是侵入吧 |
|
9
cstome OP @kernel #7
完全有替代的解决方法，就以你的例子： 你想实现这个功能肯定要绑定一个是否 busy 的数据，那么在 Vue 下就直接这样处理： ``` <button class="btn btn-primary"> {isBusy ? "加载中...":"OtherText"} </button> ``` 这样不是更直观更有语义化吗？ 重申一遍，我不反对组件化，反对的是重新 HTMl 本来就有的标签。 |
|
10
passerbytiny 2018-12-25 18:22:14 +08:00
|
|
11
kernel 2018-12-25 21:16:39 +08:00
@passerbytiny 搞笑，为什么一定要对应原生标签名?那没有对应的原生标签的组件呢？比如分页，直接用 div ？
|
 |
12
honeycomb 2018-12-25 21:52:14 +08:00 via Android
这样就意味着阿里的前段库统统上了黑名单
|
 |
13
ted94 2018-12-25 21:59:36 +08:00 via Android
因为组件不仅仅有样式，还具备属性，方法，事件等。如果仅仅只是更换样式，确实没必要用到组件。
|
 |
15
yimity 2018-12-26 10:16:25 +08:00
对于完全没有更多功能的自定义组件，真的不如用原生标签来得好。
当然了，如果需要更多功能，那为什么要自己写组件，而不用定义好的组件呢？ 所以上面很多人回答的，明白楼主的意思吗？ |
 |
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，就说明侵入了原有的标签了吗？ |
 |
17
redbuck 2019-01-16 11:17:27 +08:00
你用 Bootstrap 不是一样要学习成本.
|
Select Language