[JavaScript] 類似Adapter Pattern的改寫方法

[JavaScript] 類似Adapter Pattern的改寫方法

假設有一個查詢結果,其中有一段是:
<td>
    <input type="hidden" name="hidData" value = "1234"/>
    <input type="text" name="txtData"  value = "1234" onBlur="verifyTxtData(<%=rowIndex%>)"/>
</td
 
當txtData輸入空值時,會以hidData的資料進行還原。
 
有一種寫法是
Image(12)
 
在此說明一下:
getCount()是取得資料的長度
我們可以看到4~7和10~13幾乎一樣,邏輯有重覆到,差別只在於有沒有使用陣列。如果資料只有一筆就不使用,否則就使用。
這寫法問題是,如果邏輯要變動,或者改tag的名稱,都會要改多個地方,很可能會出錯,在維護性上不是太好
 
如果採用另一種寫法,將資料的設定部份抽出來的話:
Image(13)
 
 
整個流程可以分成兩塊
2~4:資料設定
5~8:處理邏輯,實際tag名稱以及是否使用陣列都不影響此段的程式碼
如果邏輯或對應的tag欄位名稱要變動,要改的地方會比較少。語法也比較簡短。
有興趣的人可以嘗試看看,雖然做的事情一樣,但改變一下寫法,會變得更好維護。
 
當初會寫這篇文是有看到有人使用第一種寫法,但因為自己要撰寫的網頁使用的javascript並不少,如果全部套用那種寫法會使得維護上很麻煩,因為我本身就會追求較好的程式寫法,於是我就用第二種方式來改寫,改寫的感想是:
花了我不少的時間(量有點多),不過覺得還不錯,在測試上也比較容易(邏輯部分只要測一次就好,不需要再建個只有一筆的查詢結果測一次)。
 
補充一下:
新的寫法其實對測試上也比較好
資料的部分要做兩個測試(單筆跟多筆)
邏輯的部分要做兩個測試(空白跟有值)
以範例來說兩種寫法是一樣的
第一種寫法2*2=4
第二種寫法2+2=4

但如果邏輯部分變得更複雜呢?
例如邏輯部分需要做三個以上的測試
第一種寫法2*3=6
第二種寫法2+3=5

以此類推...新的寫法在越複雜的情況下越是比較好

最後強調一個觀念:
沒有銀彈
不要認為一種寫法就能通用全部,我認為視情況選擇適當的寫法才是正確的做法