组件，控件，插件

组件的概念 包含 控件、插件

根据功能分，可以分为 控件（UI组件） 和 工具

根据实现方式分，可以分为 基础 和 插件

demo: https://github.com/saoraozhe3hao/BackboneDemo

控件（UI组件）：

 树：ztree

表格 ：DataTables

滚动条：jquery.scrollbar

图表：Chart.js 、 highchart.js

工具：

时间：moment.js

SVG：raphael.js

Cookie: jQuery Cookie

库：bootstrap，arale

插件库：plugins.jquery.com，jquery ui，EasyUI

代码仓库：github  关键词搜索，选择标星最多的项目。例如日历 bootstrap-datepicker  /   校验 validator.js

表单校验提示（规则提示、错误提示）：

1、聚焦时不校验提示（规则提示）：表单中每个控件都有相同的class，控件后面隐藏个相同class的span。根据class绑定一个事件处理函数。在事件处理函数中通过evt.currentTarget.parent()找到span，控制span的显示和隐藏。

2、提交时校验提示（错误提示）：提交按钮绑定事件处理函数。从上往下校验，校验不通过时，调用一个错误提示函数。这个函数可以alert一个错误提示；也可以传入一个位置信息，显示这个位置隐藏的一个错误提示span；也可以同时传入位置信息和提示内容，构造一个提示信息DOM结构。

3、失焦时校验提示（错误提示）：统一绑定，获取位置，根据位置做不同的校验，根据位置显示错误提示。

组件的标准化：Web Components

选择UI组件库
特定的框架需要使用特定形式的UI组件

UI组件基础形式：

1、插件形式，选取元素 生成 组件，形如：$('#id').scrollbar();  例如：http://www.jq22.com/

2、构造形式，元素传入组件构造函数，形如：new Scrollbar('#id');  例如：https://github.com/aralejs

基础形式可以封装成特定形式，例如AMD模块，CMD模块，angularJS 的 directive，reactJS 的 component

非单页：使用基础组件

MVC：根据使用的模块方案封装基础组件

MVVP:  现成的特定组件库 或者 基础组件经过特殊封装。例如：angularJS（http://ngmodules.org/），reactJS（http://react-components.com/）