需求

實(shí)現(xiàn)一個(gè)表單驗(yàn)證，用于驗(yàn)證用戶名，郵箱，密碼等。

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

通過(guò)上面我們書(shū)寫的函數(shù)實(shí)現(xiàn)了我們的需求。 但是我們寫完之后，會(huì)不會(huì)考慮一個(gè)問(wèn)題，這些函數(shù)都是變量，而且是全局變量！

函數(shù)的另外一種形式

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

兩種寫法其實(shí)是一致的，都是聲明了三個(gè)全部變量，功能上沒(méi)啥問(wèn)題，但是在團(tuán)隊(duì)開(kāi)發(fā)中，我們寫代碼的時(shí)候就需要三思后行了，不能只考慮自己，也要考慮不影響到其他人，如果別人也定義了同樣的方法就會(huì)覆蓋掉原有的功能。如果我們定義了很多方法，這種互相覆蓋的問(wèn)題是很不容易被發(fā)現(xiàn)的。

那么我們應(yīng)該如何避免這種情況呢？

使用對(duì)象收編變量

對(duì)象都擁有屬性和方法，而如果我們要訪問(wèn)他的屬性或者方法時(shí)，可通過(guò)點(diǎn)語(yǔ)法遍歷查詢得到。因此我們的代碼可以修改為：

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

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

當(dāng)然還有另外一種形式。

對(duì)象的另外一種形式

在javascript中，函數(shù)也是對(duì)象的一種，所以我們可以這樣寫：

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

使用和前面的方式是一樣的，但是這樣寫雖然滿足了我們自己的需求，但當(dāng)別人想用我們寫的方法時(shí)就有些麻煩了，因?yàn)槲覀儗懙倪@個(gè)對(duì)象沒(méi)辦法進(jìn)行復(fù)制，也就是通過(guò)new關(guān)鍵字創(chuàng)建的新的對(duì)象不會(huì)繼承這些方法。

真假對(duì)象

如果我們想簡(jiǎn)單的進(jìn)行復(fù)制一下，那么我們可以這么寫：

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

我們上面寫的代碼，看上去是復(fù)制了，當(dāng)每次調(diào)用這個(gè)函數(shù)的時(shí)候，把我們之前寫的這個(gè)對(duì)象返回出來(lái)，當(dāng)別人每次調(diào)用的時(shí)候都返回了一個(gè)新的對(duì)象，這樣執(zhí)行過(guò)程中明面是CheckObject對(duì)象，可實(shí)際上是返回的新對(duì)象，這樣每個(gè)人在使用的時(shí)候就互不影響了。比如我們想要驗(yàn)證郵箱：

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

類

雖然上面我們通過(guò)創(chuàng)建新對(duì)象的需求，但是這并不是一個(gè)真正意義上類的創(chuàng)建方式，并且創(chuàng)建的對(duì)象a和CheckObject沒(méi)有任何關(guān)系（返回出來(lái)的對(duì)象本身就和CheckObject對(duì)象無(wú)關(guān)），所以我們對(duì)代碼再次進(jìn)行需改：

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

上面我們實(shí)現(xiàn)的CheckObject就可以看作是一個(gè)類，我們可以通過(guò)new 關(guān)鍵字來(lái)創(chuàng)建

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

這樣每個(gè)使用者在使用CheckObject時(shí)，通過(guò)對(duì)CheckObject進(jìn)行實(shí)例，那么每個(gè)人都會(huì)有屬于自己的方法，并且不相互影響。

更優(yōu)化的方案

我們將所有的方法都放在了函數(shù)內(nèi)部，通過(guò)this定義，所以每次通過(guò)new關(guān)鍵字創(chuàng)建對(duì)象的時(shí)候，新創(chuàng)建的對(duì)象都會(huì)對(duì)類的this上的屬性進(jìn)行復(fù)制。所以這些創(chuàng)建的方法都會(huì)都自己的一套方法，然而有時(shí)候這么做造成的消耗是很奢侈的，我們需要處理一下：

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

這樣創(chuàng)建對(duì)象實(shí)例的時(shí)候，創(chuàng)建出來(lái)的對(duì)象所擁有的方法就都是一個(gè)了，因?yàn)樗鼈兌家蕾嚨膒rototype原型依次尋找，而找到的方法是同一個(gè)，它們都綁定在CheckObject對(duì)象的原型上。這種方式需要寫很多遍prototype，我們也可以這么寫：

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

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

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

實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用

我們上面寫的代碼在使用的時(shí)候：

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

我們需要寫多遍a對(duì)象，如果我們?cè)诼暶鞯拿總€(gè)方法末尾將當(dāng)前的對(duì)象返回，那么我們就可以進(jìn)行鏈?zhǔn)秸{(diào)用了！

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

這樣我們?cè)谑褂玫臅r(shí)候就可以寫成：

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

Prototype

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

可能在上面的實(shí)現(xiàn)中，大家可能心里會(huì)有這種實(shí)現(xiàn)思路：

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

這樣做其實(shí)是不可取的，因?yàn)檫@樣做污染了原聲對(duì)象Function，別人創(chuàng)建的函數(shù)也會(huì)被污染，造成不必要的開(kāi)銷，其實(shí)我們可以這樣做：

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

這樣的話， 我們想添加業(yè)務(wù)邏輯的時(shí)候就可以這樣做：

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

當(dāng)然我們還可以實(shí)現(xiàn)鏈?zhǔn)教砑臃椒?#xff1a;

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

最后

JavaScript是一門靈活的語(yǔ)言，這因?yàn)檫@種靈活性，所以每個(gè)人都可能會(huì)寫出不同風(fēng)格的代碼，這是JavaScript給予我們的財(cái)富，不過(guò)在團(tuán)隊(duì)開(kāi)發(fā)中我們謹(jǐn)慎發(fā)揮，盡量保持團(tuán)隊(duì)開(kāi)發(fā)代碼風(fēng)格的一致性，這也是團(tuán)隊(duì)代碼易開(kāi)發(fā)、可維護(hù)以及代碼規(guī)范的必要條件！

文章同步更新在我的個(gè)人公眾號(hào)與我的個(gè)人博客

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。