之前的做项目的时候,需要用到图形验证码。那时候的我刚写前端三四个月,遇到什么功能模块,首先都会想去网上找找插件,别人写好的拿来用。现在的我,首先会先考虑这个东西我自己能不能写出来,实在不行的话再去找找别人怎么做的,找方法。再不行的话,因为项目赶时间的问题,就先找找插件来先用着,以后有时间再做优化。
所以那时候我用的图形验证码也是网上找的插件,用的不顺手,不能做到自己想要的效果。
最近一直在看javascript原型的东西,就想着做点什么东西练练,试试去用面向对象的思维去写代码。就写个图形验证码吧。
接下来开始讲一下实现的过程:(对于下面一些理解是我目前作为一个从事前端工作半年的理解,可能有些地方的理解是错的,后面有更深的理解我会做修改,或者有大神帮忙指正一下)
首先定义一个立即执行函数,带两个参数:window和ducument
我的理解:定义立即执行函数,形成一个作用域,可以避免变量的冲突。也相当于是一个模块。传入的两个参数是后面在立即执行函数内需要用到的。前面的感叹号是因为javascript默认是不需要已;号结尾的,所以避免发生一些代码意外拼接的情况,也可以加 + 号,还有其他的。
定义一个对象:
初始化对象的属性:
判断传入的参数类型,如果传入的是对象类型,则修改默认的对象的属性:
因为图形验证码有字母,有数字,也有数字和字母混合的,所以定义两个数组:
再给对象添加两个方法,一个是初始化方法_init(),一个是刷新验证码refresh():
对象定义完成,接下来要写初始化方法、刷新验证码、验证验证码的方法
通过prototype给对象添加方法:
我的理解:prototype可以给对象添加属性或方法。
初始化:
我的理解:通过传入的容器(比如说div)的id,给div内添加一个canvas画布,并设置画布的宽高等属性,添加一个点击canvas刷新验证码的事件。
生成和刷新验证码的方法:
我的理解:调用canvas的属性和方法来生成canvas上面的验证码。
验证验证码的方法:
我的理解:通过传入参数--用户输入的验证码,来跟之前生成的验证码比对,并返回结果。
下面是定义的一些其他方法:
最后把这个对象对外开放接口,才可以调用:
调用方式:
效果图:
到这里结束了,很简单的一个小插件,为了熟悉一下js的面向对象编程,练练手。
下载地址:点击下载