需求

實現一個表單驗證，用于驗證用戶名，郵箱，密碼等。

function checkName() {// 驗證用戶名 } function checkEmail() {// 驗證郵箱 } function checkPassword() {// 驗證密碼 } ... 復制代碼

通過上面我們書寫的函數實現了我們的需求。 但是我們寫完之后，會不會考慮一個問題，這些函數都是變量，而且是全局變量！

函數的另外一種形式

var checkName = function () {// 驗證用戶名 } var checkEmail = function () {// 驗證郵箱 } var checkPassword = function () {// 驗證密碼 } ... 復制代碼

兩種寫法其實是一致的，都是聲明了三個全部變量，功能上沒啥問題，但是在團隊開發中，我們寫代碼的時候就需要三思后行了，不能只考慮自己，也要考慮不影響到其他人，如果別人也定義了同樣的方法就會覆蓋掉原有的功能。如果我們定義了很多方法，這種互相覆蓋的問題是很不容易被發現的。

那么我們應該如何避免這種情況呢？

使用對象收編變量

對象都擁有屬性和方法，而如果我們要訪問他的屬性或者方法時，可通過點語法遍歷查詢得到。因此我們的代碼可以修改為：

var CheckObject = {checkName: function () {// 驗證用戶名},checkEmail: function () {// 驗證郵箱},checkPassword: function () {// 驗證密碼}... } 復制代碼

此時我們將搜有的方法都放在CheckObject這個對象里面，我們只聲明了一個變量，我們使用也非常簡單，比如檢測用戶名CheckObject.checkName()，這樣只是在我們之前使用函數式前面加了一個對象名稱。

當然還有另外一種形式。

對象的另外一種形式

在javascript中，函數也是對象的一種，所以我們可以這樣寫：

var CheckObject = function () {}; CheckObject.checkName = function () {// 驗證用戶名 } CheckObject.checkEmail = function () {// 驗證郵箱 } CheckObject.checkPassword = function () {// 驗證密碼 } ... 復制代碼

使用和前面的方式是一樣的，但是這樣寫雖然滿足了我們自己的需求，但當別人想用我們寫的方法時就有些麻煩了，因為我們寫的這個對象沒辦法進行復制，也就是通過new關鍵字創建的新的對象不會繼承這些方法。

真假對象

如果我們想簡單的進行復制一下，那么我們可以這么寫：

var CheckObject = function () {return {checkName: function () {// 驗證用戶名},checkEmail: function () {// 驗證郵箱},checkPassword: function () {// 驗證密碼}...} } 復制代碼

我們上面寫的代碼，看上去是復制了，當每次調用這個函數的時候，把我們之前寫的這個對象返回出來，當別人每次調用的時候都返回了一個新的對象，這樣執行過程中明面是CheckObject對象，可實際上是返回的新對象，這樣每個人在使用的時候就互不影響了。比如我們想要驗證郵箱：

var a = CheckObject(); a.checkEmail(); 復制代碼

類

雖然上面我們通過創建新對象的需求，但是這并不是一個真正意義上類的創建方式，并且創建的對象a和CheckObject沒有任何關系（返回出來的對象本身就和CheckObject對象無關），所以我們對代碼再次進行需改：

var CheckObject = function () {this.checkName = function () {// 驗證用戶名}this.checkEmail = function () {// 驗證郵箱}this.checkPassword = function () {// 驗證密碼} } 復制代碼

上面我們實現的CheckObject就可以看作是一個類，我們可以通過new 關鍵字來創建

var a = new CheckObject() a.checkName() 復制代碼

這樣每個使用者在使用CheckObject時，通過對CheckObject進行實例，那么每個人都會有屬于自己的方法，并且不相互影響。

更優化的方案

我們將所有的方法都放在了函數內部，通過this定義，所以每次通過new關鍵字創建對象的時候，新創建的對象都會對類的this上的屬性進行復制。所以這些創建的方法都會都自己的一套方法，然而有時候這么做造成的消耗是很奢侈的，我們需要處理一下：

var CheckObject = function () {} CheckObject.prototype.checkName = function () {// 驗證用戶名 } CheckObject.prototype.checkEmail = function () {// 驗證郵箱 } CheckObject.prototype.checkPassword = function () {// 驗證密碼 } ... 復制代碼

這樣創建對象實例的時候，創建出來的對象所擁有的方法就都是一個了，因為它們都依賴的prototype原型依次尋找，而找到的方法是同一個，它們都綁定在CheckObject對象的原型上。這種方式需要寫很多遍prototype，我們也可以這么寫：

var CheckObject = function () {} CheckObject.prototype = {checkName: function () {// 驗證用戶名},checkEmail: function () {// 驗證郵箱},checkPassword: function () {// 驗證密碼}... } 復制代碼

但是有一點需要記住，這兩種方式不能混合使用，如果混用的話，后面的對象的原型為對象賦值新對象的時候，它會將之前對prototype對象賦值的方法覆蓋掉！！

這里還有一點需要大家關注的是前者實例的constructor是? (){}后者指向的是? Object() { [native code] }

實現鏈式調用

我們上面寫的代碼在使用的時候：

var a = new CheckObject() a.checkName() a.checkEmail() a.checkPassword() 復制代碼

我們需要寫多遍a對象，如果我們在聲明的每個方法末尾將當前的對象返回，那么我們就可以進行鏈式調用了！

var CheckObject = function () {} CheckObject.prototype = {checkName: function () {// 驗證用戶名return this;},checkEmail: function () {// 驗證郵箱return this;},checkPassword: function () {// 驗證密碼return this;}... } 復制代碼

這樣我們在使用的時候就可以寫成：

CheckObject.checkName().checkEmail().checkPassword() 復制代碼

Prototype

有興趣的同學可以看一下這篇文章 原型與原型鏈

可能在上面的實現中，大家可能心里會有這種實現思路：

Function.prototype.checkName = functionn () {// 驗證用戶名 } var f = new Function() f.checkName() 復制代碼

這樣做其實是不可取的，因為這樣做污染了原聲對象Function，別人創建的函數也會被污染，造成不必要的開銷，其實我們可以這樣做：

Function.prototype.addMethod = function (name, fn) {this[name] = fn } 復制代碼

這樣的話， 我們想添加業務邏輯的時候就可以這樣做：

var methods = new Function() methods.addMethod('checkName', function () {// 驗證用戶名 }) methods.addMethod('checkEmail', function () {// 驗證郵箱 }) methods.checkName() methods.checkEmail() 復制代碼

當然我們還可以實現鏈式添加方法：

Function.prototype.addMethod = function (name, fn) {this[name] = fn;return this; }var methods = new Function() methods.addMethod('checkName', function () {//驗證用戶名return this; }).addMethod('checkEmail', function () {// 驗證郵箱return this; })// 調用 methods.checkName().checkEmail() 復制代碼

最后

JavaScript是一門靈活的語言，這因為這種靈活性，所以每個人都可能會寫出不同風格的代碼，這是JavaScript給予我們的財富，不過在團隊開發中我們謹慎發揮，盡量保持團隊開發代碼風格的一致性，這也是團隊代碼易開發、可維護以及代碼規范的必要條件！

文章同步更新在我的個人公眾號與我的個人博客

總結

以上是生活随笔為你收集整理的一个表单验证引发的深思！！！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。