【前言】

　　在大型项目的开发中，插件化是一种趋势，将相似的多次使用的东西封装成公共的插件，以提高开发效率。其他开发人员在调用插件的时候，只需简单的一两行代码就可以实现非常复杂的内容或者效果。

　　在这一节里面我就跟大家分享一下，我是如何封装一个输入框插件的。

【呈现分析】

（1）默认展示：边框为灰色，中间有输入提示信息

（2）获取焦点：边框为蓝色，无输入内容时中间有输入提示信息，有输入内容的时候中间显示输入内容

（3）失去焦点：输入正确边框变成浅绿色，并有个√；输入错误，边框变红，并有个×

【功能分析】

私有方法：不对外体现，插件内部自己调用；

公有方法：对外提供的接口，其他开发人员可以调用

（1）绘制DOM（私有方法）：根据呈现分析里面的html结构，使用jQuery动态的将其绘制出来。

（2）焦点事件（私有方法）：给输入框绑定移入移出等事件，不同的状态输入框应该做出不同的呈现。

（3）合法性检验（私有方法）：根据输入的内容，校验输入的合法性，并给出提示。

（4）长度校验（私有方法）：根据输入的内容，校验输入的长度，并给出提示。

（5）状态展现（私有方法）：根据校验的结果（正确，错误，失去焦点，获得焦点），展现不同的状态

（6）设置大小（公有方法）：其他开发人员根据需要，可以通过此方法改变输入框的大小

（7）置灰功能（公有方法）：有时候我们需要将输入框置灰，禁止用户对其值进行改变。

（8）值获取（公有方法）：输入框最重要的当然是里面的值啦，这个方法必须要提供给其他开发者调用啦。

（9）值重置（公有方法）：很多时候，我们需要将输入框的赋予初始值，比如刚进入页面的时候，所以这个方法也是必不可少啦。

（10）默认值（公有方法）：当其他开发者需要定制化输入框时候调用。

【开发步骤】

（1）绘制简单的DOM

　　在我们封装一个组件前，我们最好将其html结构写出来，这样有利于我们封装的时候快速的布局。根据上面的需求其DOM结构如下：