由表單提交引伸的對JS設計模式的思考

表單提交是業務當中在普通不過的場景了，以qq登陸頁面為例，在註冊乙個qq賬號的話，如果不能填寫必填字段，是不會發起http請求的，於是乎我們有了這樣一段js**。

class
loginctrl 
login() )}}

可以看到，在這段**中存在乙個問題，即在login這個函式當中，存在兩個功能，乙個是校驗是否填寫了使用者名稱，密碼等資訊，另乙個是傳送http請求，請求登陸。這樣做存在明顯的弊端，在編寫**中，乙個函式物件最好是純淨的，專一的，簡單來講就是乙個函式只做一件事。於是乎，我們把這段驗證**抽離出去。

class
loginctrl ;
}validate() 
if (!this.param.psw) 
return
true
}login() )}}

於是在第一版的基礎上，我們很容易的將驗證這段**抽離出去，進步的地方是，在修改驗證函式時，不會直接修改login，但這樣依舊沒有改掉第一版的詬病，login函式當中依舊引入了驗證的函式，本質上是沒有變化的，驗證與傳送http請求依舊耦合著，可能需要多加一段函式將他徹底分離出去。

class loginctrl ;
this.login = this.prehand(this.login, this.validate);
}prehand(fn, beforefn) }}
validate() 
if (!this.param.psw) 
return
true
}login() )}}

在這一版當中，我們加入了prehand這個函式，這個函式幫助我們分離了驗證與傳送http請求這兩個函式，在進入loginctrl這個類之後，首先就是重新定義login這個函式，使得login函式執行之前，首先去跑validate這個函式，通過後，再去跑login本身的函式，這樣的做法，使得login函式本身不再引用依賴validate函式。但這樣的做法還是不夠完善，因為登陸這個操作，本身比較簡單，如果換成註冊呢。

可以看到，此時，需要驗證的專案多了很多，而之前的validate函式明顯不夠用了，所以，為了使得**能夠復用，還要修改。

這裡將validate函式改為

validate() ,
]for (let a of this.arr) 不能為空`)
return
false;}}
return
true;
}

通過這次表達提交，總結一下，在js設計當中，需要遵循的幾個原則。

單一職責原則，英文名叫做srp.即,single responsibility principle 。在js中，函式永遠是一等公民，乙個函式僅完成乙個功能，最後編織我們的js程式。在本例中，乙個簡單的登陸，可以拆分為校驗表單和傳送請求。

最少知識原則要求我們在設計程式時，應當減少物件之間的互動。如果兩個物件之間不必彼此直接通訊，那麼這兩個物件就不要發生直接的相互聯絡。常見的做法是引入乙個第三者物件，來承擔這些物件之間的通訊作用。在本例中，prehand函式擔任了校驗與傳送請求的中介者。

設計的時候，時刻要考慮，盡量讓這個函式足夠好，寫好了就不要去修改了，如果新需求來，我們增加乙個函式就完事了，原來的**能不動則不動。在本例中，如果還有新的需求，進盡量去寫新的函式，然後想法設法讓他們之間聯絡起來，而不是直接去修改login或者validate。

以上。

由表單提交引伸的對JS設計模式的思考

js 表單提交的方法

js表單提交和submit提交的區別

js提交表單奇怪的錯

由表單提交引伸的對JS設計模式的思考

js 表單提交的方法

js表單提交和submit提交的區別

js提交表單奇怪的錯

相關推薦