JavaScript 是爛東西??

轉載自http://www.hsdc.com.tw/modules/newbb/viewtopic.php?viewmode=flat&type=&topic_id=28&forum=2

下午在某家公司討論架構設計的顧問服務時，與該公司主管會後的閒聊，其中一個話題，就是聊到 JavaScript，我又不假思維的回答：JavaScript 是爛東西。

啊！我亂說話的毛病又犯了... :-/

前兩年，也是在某家軟體公司所承接上億元的案子上，當時我是某家顧問團隊的 Member
之一。在與該公司數十位軟體開發人員的顧問輔導會議上，我也是直接就講出這句話，當然，我會去說明認為爛東西的理由。不過會後，我們團隊其中一位
member 很不高興，認為我不應該如此的批判，還有一個重點，當時，他是負責教授學員們 JavaScript
設計的講師，他說了，如果我對未來會上課的學員直接批判 JavaScript，那他如何教課呢？ 是滴～ 不過當年我
"年輕氣盛"，就與他說了，那麼，我們課程互換，他來教授高階設計，我來教授 JavaScript，然後，也允許他直接批判
JavaScript。;)

這是之前的往事了．．． 想起來還是蠻有趣的一段話題。

對 JavaScript 印象不好的原因，源自於 ASP/JSP 網頁設計的時期，其實，我也很清楚，程式語言本身，那有什麼爛不爛的，會爛的原因是... 程式設計師把它變成爛東西了。 :>>

這
怎麼說呢？ 我看到好幾位的程式設計師，因為非常不習慣於原來從傳統 Client/Server 的表單設計，因為潮流，公司需要把系統 Web
化，而往 Web 設計時，卻發現到，怎麼以往 Client/Server 的表單很好寫，為何轉到 Web
後，不僅開發工具的缺乏，以往很容易表達如 "Master/Detail"，卻怎麼在 Web 上如此難寫？

舉一個最簡單的例子，Client/Server 的表單設計，當操作人員輸入客戶ID 時，按【TAB】鍵移到下一欄位時，就會自動顯示出客戶姓名。嘿，當時若用 ASP/JSP 來寫這樣的作法，並不是一件容易的事呢。

為
什麼？ Web 的表單設計，是當操作者填完整個表單的資料後，才會按【Submit】送出至 Web Server
處理，處理後傳回結果，連線就中斷了。所以，Browser/Web Server 的溝通，是屬於 "Stateless(無狀態)"
的方式；相對於 Client/Server，因為表單一直是連線著資料庫，不管你有沒有在用，資料庫就是一直連線著，我把這稱之為
"佔著茅坑不拉屎"。:) 表單與資料庫的持續連線，稱之為 "Stateful"，也正因如此，所以表單要資料處理時，隨時就可以至資料庫
"撈資料"。

"Stateless" 是為了節省系統資源，因為 Web Server 所服務的 Client
是至少以百計以上，不可能讓每個 Client 都一直連線著；"Stateful" 會浪費系統資源，但是可以盡善盡美地來服務 Client，在
MIS 內部，操作者規模在 100 人以內，系統的負荷是不會有問題的，當然就可以這樣作。

結果，許多程式設計師，搞不懂
"Stateless" 與 "Stateful" 的原理，不僅是新手而已，也有很多算是老手級的了，以上剛我所舉的例子，為了能達成輸入客戶 ID
後，就能馬上秀出客戶姓名，竟然就乾脆一次把位於資料庫的客戶資料全部傳到 Browser 內，然後，用 JavaScript 寫個 For-Loop 的迴圈啊，來找出對應 ID 的客戶姓名。

離
譜吧？ 會犯這種低級錯誤的，還可真不少呢。 除了增加傳輸頻寬的負載外，根本就沒有基本安全性的防護，赤裸裸地將客戶資料全部儲存在 Browser
內。我在輔導 Web 化的專案時，絕對是嚴禁利用 JavaScript 作上述這種事情，甚至，也不容許企業邏輯寫在 JavaScript
內，例如，計算員工薪資，一定是在 Middleware 來負責處理的。

難道，JavaScript 真的是一無是處，是個爛東西？ 不然啦～ 我會用 "爛東西" 來凸顯，其實是要提醒，程式設計師，可千萬不能濫用。我們要為 JavaScript 來正名，瞭解它真正的角色與責任。

我最激賞的網頁設計技術，就是微軟所提出的 ASP.NET。在其技術裡，總算找到了為 JavaScript 定位的最好名稱了，就是 "間諜(Spy)"。

且聽我道來～

網
頁設計的技術，最大的挑戰，就是要能把 Stateless 的現實環境，"模擬" 成具 Stateful 的狀態。也就是說，Web
化的表單，即使還沒按下【Submit】之前，很有可能會根據某某欄位的資料，而即時送至 Web Server
處理，並傳回部分的結果，但請記得，因為表單還沒有完全送出，所以，表單的資料，是需要被保存其狀態的，ASP.NET，簡單的說，就是利用在 Web
Server 有個 "State Bag" 的機制來為 Client 儲存尚未【Submit】的表單資料。

那麼，是誰來負責傳送欄位的資料？ 當然就是 JavaScript 囉～
UI
的設計，除了 Style 的美感之外，在技術面，最為重要的，就是 UI
元件的狀態與事件(Event)的處理了。仍然舉上述的例子，當輸入客戶ID
後，操作者可能按下【TAB】鍵或是以滑鼠點選移至下一個欄位，這兩種動作，都會觸發了事件，此時，JavaScript 當作 UI
的事件處理者(Event Handler)，收到事件後，根據 UI 所設計條件邏輯，來決定是否後送至 Web Server
來處理，再把結果傳回，並秀出在 UI 上。整個後送的過程，操作者完全沒有感覺，可能就是畫面閃了一下，其實就是作一次 "Refresh"
的動作，JavaScript 已經偷偷地把資料後送至 Web Server 處理了。

Javascript 除了可以在 Browser 端，作一些動態的展示呈現效果外，在企業應用系統的 Web 化表單設計，就讓它回歸最單純的角色，UI 事件的處理者，簡單的說，就是 "間諜"。如此，就不會把 Web UI 的設計搞成複雜又糾纏不清，JavaScript 反而會變成 "好東西" 了。 ;)