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

@GuoYongfeng 2016-06-16 01:47:49发表于 iuap-design/blog

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

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

控件

控件是对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、图片等资源组成,是页面展现中某一个独立部分,组件可以抽象也可以直接使用,组件可以嵌套组合使用。

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