jQuery如何封装输入框插件如何封装输入框插件
主要介绍了jQuer输入框插件封装方法,这样可以提高程序员的开发效率,非常不错,具有参考借鉴价值,需要
的朋友可以参考下
【前言】【前言】
在大型项目的开发中,插件化是一种趋势,将相似的多次使用的东西封装成公共的插件,以提高开发效率。其他开发人员
在调用插件的时候,只需简单的一两行代码就可以实现非常复杂的内容或者效果。
在这一节里面我就跟大家分享一下,我是如何封装一个输入框插件的。
【呈现分析】【呈现分析】
(1)默认展示:边框为灰色,中间有输入提示信息
(2)获取焦点:边框为蓝色,无输入内容时中间有输入提示信息,有输入内容的时候中间显示输入内容
(3)失去焦点:输入正确边框变成浅绿色,并有个√;输入错误,边框变红,并有个×
【功能分析】【功能分析】
私有方法:不对外体现,插件内部自己调用;
公有方法:对外提供的接口,其他开发人员可以调用
(1)绘制DOM(私有方法):根据呈现分析里面的html结构,使用jQuery动态的将其绘制出来。
(2)焦点事件(私有方法):给输入框绑定移入移出等事件,不同的状态输入框应该做出不同的呈现。
(3)合法性检验(私有方法):根据输入的内容,校验输入的合法性,并给出提示。
(4)长度校验(私有方法):根据输入的内容,校验输入的长度,并给出提示。
(5)状态展现(私有方法):根据校验的结果(正确,错误,失去焦点,获得焦点),展现不同的状态
(6)设置大小(公有方法):其他开发人员根据需要,可以通过此方法改变输入框的大小
(7)置灰功能(公有方法):有时候我们需要将输入框置灰,禁止用户对其值进行改变。
(8)值获取(公有方法):输入框最重要的当然是里面的值啦,这个方法必须要提供给其他开发者调用啦。
(9)值重置(公有方法):很多时候,我们需要将输入框的赋予初始值,比如刚进入页面的时候,所以这个方法也是必不可
少啦。
(10)默认值(公有方法):当其他开发者需要定制化输入框时候调用。
【开发步骤】【开发步骤】
(1)绘制简单的DOM
在我们封装一个组件前,我们最好将其html结构写出来,这样有利于我们封装的时候快速的布局。根据上面的需求其
DOM结构如下:
<div class="input_container">
<input type="text" class="input_text input_text_blur" placeholder="">
<div class="input_result"></div>
</div>
(2)初始化插件:将常用值存储起来,同时调用绘制输入框DOM结构的函数
// 初始化插件
init: function() {
// 常用值存储
var _this = this;
_this.type = _this.settings.type;
_this.spec = _this.settings.spec;