对前端开发中组件、插件、控件的理解

[GuoYongfeng]

一段时间内，大家都对这些概念含糊不清。而一般地，也很少去用一个很明确的界限来把三者分清。

这三个概念，不仅仅在前端有，在设计上、在其他开发语言中，都有对这几个概念的定义和区分。但这里我们仅限于前端开发领域。下面简单说一下我的想法。

控件

控件是对css样式的高度抽离，我对CSS控件的定义来自于UED的UI视觉设计规范，在一个大型项目中，优秀的UI规范总是能将页面的设计元素提炼出一套标准（比如颜色、字体字号、栅格等）。CSS控件化是从HTML页面结构提炼出的不可分割的最小标签单位。

例如一个icon图标（使用em标签表示）、一段文本（使用p标签）、一个标题（h标签）或者一个按钮（a标签），他们都是构成整个页面的最小结构单位，这就是控件；而控件化还需要控件是具备在整个项目中可复用性强的元素。因此在一个项目中我一般会提取如：btn.css、article.css、icon.css等这样的项目通用控件化模块文件，当然这些控件化模块还可以被分类继续拆分成更灵活的小模块。

每一个控件化模块都用SASS编写，使得属性值均可以变量化，便于UI规范修改我们前端做相应的批量修改。

插件

前端插件指由js封装的可独立提供使用的ui，实现某一类特定的功能和效果。从组成上来说，由js文件或是js和css共同构成，两种方式。

组件

组件由html、js、css、json、图片等资源组成，是页面展现中某一个独立部分，组件可以抽象也可以直接使用，组件可以嵌套组合使用。

基于组件可以封装聚合形成组件库，多个组件构成页面，组件库可以帮助快速开发页面.