产品总监可能需要了解第一个技术知识点：后端人员为什么要用控件、组件、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 由 Twitter 的 Mark Otto 和 Jacob Thornton 开发。 它是 2011 年 8 月在 GitHub 上发布的开源产品，用于开发响应式布局和移动优先 WEB 项目。
优点是相同的代码可以快速有效地适配手机、平板、PC设备。
中文网站：
(2)元素UI
主要服务于PC界面的中后台产品，由饿了么后端团队开源，官网：#/zh-CN/theme
(3) 查看用户界面
原名iView，由TalkingData发布封装elementui按钮，主要服务于PC界面的中后台产品。 官方网站：
(4)蚂蚁设计
用于开发企业级中后台产品，官网：
(5) 凡特
Vant是有赞后端团队开源的移动组件库。 对内承载有赞所有核心业务，对外服务超过10万开发者。 是业界主流的移动组件库之一（也支持Momo小程序）。 一。
官网：#/zh-CN/
(6) iviewweapp
iview weapp是TalkingData发布的一个支持Momo小程序开发的组件库。 官方网站：
优秀的UI框架真的太多了。 还有WeUI，这是一套符合陌陌原有视觉体验的基础样式库。 由陌陌官方设计团队为陌陌内部网页和陌陌小程序量身定制。 ; layui：使用门槛极低、即用型、极简外观、闪亮组件等等。最后我不会一一举出其他框架的例子。
5.个人不成熟的建议
通常移动界面，无论是否使用UI框架，设计师都会产生设计稿。 至于后台界面，大多数公司和开发者也会使用基于UI框架开发的后台开源代码进行部署和二次开发。
在这种情况下，我们设计原型，通常不需要设计师出设计稿。 所以当你加入新公司的时候，建议你先了解一下后端人员都使用哪些UI框架，这样才能和他们达成共识。
例如，如果你负责后台业务和前端人员使用的Element UI框架，最好去其官网了解各个组件的功能和交互。 当你在进行功能原型设计时，你可以有意无意地参考官方的组件（有些组件确实很好用）封装elementui按钮，这样既能满足你自己的功能交互，又能让开发者立即使用。
但不能过多依赖组件进行自研或开发，因为功能场景多种多样。 有的后端人员会回避说不好做或者做不到，因为组件不具备产品所需的功能。 这个时候我们千万不要被他们误导，让他们放弃组件的使用，老老实实开发相应的功能。
本文内容的介绍就到此结束，欢迎留言交流！
