产品经理可能需要了解第1个技术知识点：为什么前端人员要使用控件、组件、UI框架？使用的好处是什么？

1. 组件概念及其作用2. 控件介绍3. 前端UI框架介绍4. 主流前端UI框架介绍5. 个人不成熟的小建议1. 组件概念极其介绍

开发过程中有时候页面代码量太大，逻辑太多或者同一个功能在许多页面均有使用，维护起来相当复杂。这个时候，就需要将相似逻辑、功能的代码进行组件封装，已达到组件通用性，增强代码可读性，维护成本也能大大降低。

组件是对数据和方法简单的封装，拥有自己的属性和方法。在页面中，数据源于HTML结构中的文字、图片、链接、按钮、表单元素等；CSS体现页面布局和风格；JS则体现了动作和功能，比如选中、显示、隐藏等等。

(对于html、css、js不了解的同学，请移步此篇 "带你重新认识身边的前端工程狮" 查看)

前端组件就是组成页面内容的零件，它是HTML结构、CSS样式、JS功能的综**。注意，不是任何一段HTML标签都可以叫做组件。

前端开发经常用到组件有：按钮、表格、表单、消息提示、Banner切换、图片播放、导航菜单、选项卡、右键菜单、树形菜单等等。

(Element UI 按钮组件)

(Element UI 消息提示组件)

举个详细的例子，大家都知道图片轮播效果大致可分为：上下轮播、左右轮播、显示/隐藏等效果。前端开发可以将这三种轮播方式功能封装成一个公共组件。

等到用的时候直接调用轮播组件，分别传入不同参数代表不同的轮播方式；同一个页面允许存在多个相同组件，互不影响各自的交互效果。组件的特点如下所示：

(1) 组件具有交互性和独立性，同一个页面允许存在多个相同控件，且互不影响各自的交互效果(2) 组件的字段是可配置的，用户可根据自己需要自行定制。(3) 组件拥有自己的字段、属性、方法和事件。

第三点我们还是用上面轮播例子来做说明：轮播是否自动切换、自动切换的时间间隔等属于组件属性；点击左右箭头进行图片切换的动作就是组件的方法；轮播切换过程中，展示当前某一张图片时会触发事件，通过这个事件能拿到该图片的相关信息。

组件化很大程度上降低系统各个功能的耦合性，并且提高了功能内部的聚合性。这对前端工程化及降低代码的维护来说，是有很大的好处的，耦合性的降低，提高了系统的伸展性，降低了开发的复杂度，提升开发效率，降低开发成本。

2. 控件介绍

控件跟组件的概念基本一致，但是控件的层次会更高一点，它是提供或实现用户界面功能的组件。从某种意义上来说，控件是组件的实现，组件是控件的原型，控件是带有交互效果的。

我们可以说控件就是组件，但是反过来就不一定，控件只是组件中具有实际控制交互功能的部分。

3. 前端UI框架介绍

组件库基于组件可以封装聚合形成，当然前端工作者也可以自定义组件，形成自己的组件库。

直白来说，组件库就像平时家里的工具箱，里面有起子、锤子、锯子，我们可以通过这些工具箱来创造玩具，甚至我们可以自己创造一些工具，方便我们日后创造玩具。

前端UI框架：框架顾名思义就是一套架构，也是一套标准，会基于自身的特点向用户提供一套相当完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。

而库的控制权在使用者手中，其实框架和库关系还是很紧密的，他们以聚合的形式让前端人员在所要开发的应用中使用。

举个简单的例子，框架更像是我们玩的乐高，可以根据自己的需要想法，任意组装各式各样的模型。我们跟其他玩乐高的人，拿到手上的小模块都是一样的，我们很难自己去改变，相当于是一套使用标准。

4. 主流前端UI框架介绍

UI框架一般前端人员用的比较多，开发过程中合理使用UI框架，能大大的缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。

(1) Bootstrap

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，在2011 年8月在 GitHub 上发布的开源产品，用于开发响应式布局、移动设备优先的 WEB 项目。

好处是通过同一份代码快速、有效适配手机、平板、PC 设备。

中文网址：https://v3.bootcss.com/

(2)Element UI

主要服务于 PC 界面的中后台产品，由饿了么公司前端团队开源，官网：https://element.eleme.cn/#/zh-CN/theme

(3) View UI

原名iView，由是TalkingData发布，主要服务于 PC 界面的中后台产品，官网：https://www.iviewui.com/

(4) Ant Design

用于研发企业级中后台产品，官网：https://ant.design/index-cn

(5) Vant

Vant 是有赞前端团队开源的移动端组件库，其对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端(也支持微信小程序)组件库之一。

官网：https://vant-contrib.gitee.io/vant/#/zh-CN/

(6) iview weapp

iview weapp是TalkingData发布的一款支持于微信小程序开发的组件库。官网：https://weapp.iviewui.com/

优秀的UI框架真的是太多了，还有WeUI，是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计的；layui：使用门槛极低、拿来即用、外在极简、组件丰盈等等，最后就不在一一举例其他框架了。

5. 个人不成熟的小建议

通常移动端界面，不管用不用UI框架，设计师都会出设计稿的。而对于后台界面来说，大多数公司，开发人员都会采用基于UI框架开发的后台开源代码，进行部署、二次开发。

这种情况我们设计好原型图，通常是不需要设计师出设计稿的。所以当你入职一家新公司的时候，建议一定要先了解一下前端人员使用的是什么UI框架，这样才能和他们达成共识。

举个例子，比如你负责后台业务，前端人员使用的Element UI框架，这时候最好去其官网了解每一个组件功能和交互。你在做功能出原型的时候，可以有意或者无意参照官方组件(有些组件真的太好用了)，既能满足自己的功能交互，又能使开发人员拿来即用。

但是自己或者开发也不能过度依赖组件，因为功能场景各式各样，有些前端人员由于组件没有产品要求的功能，会搪塞说这不好做，做不了等等。这时候一定不能被他们忽悠过去，让他们放弃组件使用，老老实实的自己开发相应功能。

到此本篇内容介绍完毕，欢迎留言交流！

每周一个技术小知识点，点击下方【阅读原文】查看更多技术知识点。