之前的做項目的時候，需要用到圖形驗證碼。那時候的我剛寫前端三四個月，遇到什么功能模塊，首先都會想去網(wǎng)上找找插件，別人寫好的拿來用?，F(xiàn)在的我，首先會先考慮這個東西我自己能不能寫出來，實在不行的話再去找找別人怎么做的，找方法。再不行的話，因為項目趕時間的問題，就先找找插件來先用著，以后有時間再做優(yōu)化。
所以那時候我用的圖形驗證碼也是網(wǎng)上找的插件，用的不順手，不能做到自己想要的效果。
最近一直在看javascript原型的東西，就想著做點什么東西練練，試試去用面向?qū)ο蟮乃季S去寫代碼。就寫個圖形驗證碼吧。
接下來開始講一下實現(xiàn)的過程：(對于下面一些理解是我目前作為一個從事前端工作半年的理解，可能有些地方的理解是錯的，后面有更深的理解我會做修改，或者有大神幫忙指正一下)
首先定義一個立即執(zhí)行函數(shù)，帶兩個參數(shù)：window和ducument
我的理解：定義立即執(zhí)行函數(shù)，形成一個作用域，可以避免變量的沖突。也相當(dāng)于是一個模塊。傳入的兩個參數(shù)是后面在立即執(zhí)行函數(shù)內(nèi)需要用到的。前面的感嘆號是因為javascript默認是不需要已;號結(jié)尾的，所以避免發(fā)生一些代碼意外拼接的情況，也可以加 ?+ 號，還有其他的。
定義一個對象：
初始化對象的屬性：
判斷傳入的參數(shù)類型，如果傳入的是對象類型，則修改默認的對象的屬性：
因為圖形驗證碼有字母，有數(shù)字，也有數(shù)字和字母混合的，所以定義兩個數(shù)組：
再給對象添加兩個方法，一個是初始化方法_init(),一個是刷新驗證碼refresh()：
對象定義完成，接下來要寫初始化方法、刷新驗證碼、驗證驗證碼的方法
通過prototype給對象添加方法：
我的理解：prototype可以給對象添加屬性或方法。
初始化：
我的理解：通過傳入的容器（比如說div）的id，給div內(nèi)添加一個canvas畫布，并設(shè)置畫布的寬高等屬性，添加一個點擊canvas刷新驗證碼的事件。
生成和刷新驗證碼的方法：
我的理解：調(diào)用canvas的屬性和方法來生成canvas上面的驗證碼。
驗證驗證碼的方法：
我的理解：通過傳入?yún)?shù)--用戶輸入的驗證碼，來跟之前生成的驗證碼比對，并返回結(jié)果。
下面是定義的一些其他方法：
最后把這個對象對外開放接口，才可以調(diào)用：
調(diào)用方式：
效果圖：
到這里結(jié)束了，很簡單的一個小插件，為了熟悉一下js的面向?qū)ο缶幊?，練練手?/p>
下載地址：點擊下載
