Web培训

热门话题:

什么是前端组件？前端组件类型

发布：Web前端培训
来源：Web前端基础
时间：2015-12-30 17:01

1.前端组件概念

首先我们来说说组件的概念：组件是对数据和方法简单的封装，组件拥有自己的属性和方法。属性是组件数据的简单访问，方法是组件简单可见的功能。这是比较官方的对组件概念的文字描述，但是怎么去理解呢?

接下来我们还是回到前端组件这个话题上来。在前端，我们可以分为前端重构和前端交互，首先我们先说说重构，顾名思义重构就是重新构建，是指我们将设计稿重新构建成计算机浏览器可编译、可认识的语言-HTML和CSS。HTML用于创建页面数据的展示结构，定义各种数据展示标签;CSS定义了数据的展示样式。在页面中，数据源于HTML结构中的文字、图片、链接、按钮、表单元素等;CSS则体现了动作和功能，比如选中、显示、隐藏等等。那么，到底什么才是组件呢?前端组件，就是组成页面内容的零件，它是HTML结构和CSS样式的综合体，组件本身并无交互效果。注意，不是任何一段HTML标签都可以叫做组件，它必须具备以下几个特性：

组件是页面中公共的、相对独立的最小单位

组件是由一个或多个HTML元素组成的集合

组件可以没有功能，但必须拥有数据，一个空标签集合不能称作有效的组件

2.前端组件分类

按照类型，前端组件可以分为两大类：基础组件和普通组件。在这两类的基础上，我们可以自由合理的相互组合，于是就有了复合组件;同样，我们也可以对其中某些组件进行扩展，像这样的组件叫做扩展组件。

基础组件是指常规的公共组件，什么是常规的公共组件呢?我们可以这样来理解：系统本身存在的，但是为了满足设计效果我们需要自行定制的组件，比如：弹出框、下拉框、单(复)选框、工具提示、按钮等这些本来系统中都自带的，我们为了满足需要而自定义结构和样式的组件，我们就可以叫做基础组件。另外，一些在系统中并不存在且通用性比较强的，如：表格、表单、消息提示、Banner切换、图片播放、导航菜单、选项卡、右键菜单、树形菜单等同样我们也可以叫做基础组件。

普通组件就是除了基础组件外的其他公共的、相对独立的HTML元素集合和CSS样式的数据展示综合体。比如：产品列表、SearchBox、图标、新闻列表、文章、头部、底部、面包屑、logo、广告等等。

复合组件可以由基础组件组成，也可以由普通组件组成，同样也可以由基础组件和普通组件共同组成。

扩展组件可以是基础组件扩展，也可以是普通组件扩展，同样也可以是复合组件的扩展。