[教育訓練紀錄] HTML5+JavaScript 設計模式：jQuery pattern
上週在北京舉辦「課程名稱HTML5 & 雲端整合: 深入MOBILE & CLOUD 設計模式」課程。這門課是從 HTML5 觀念到實作的第一門課（The 1st lesson from concepts to practice），這門課的重點在於「設計模式」(Design pattern)。
當天介紹了「jQuery pattern」。jQuery pattern就是開發jQuery插件(Plugin)的方式，所以技術上倒也沒有什麼學問。不過，jQuery pattern有很高深的哲學道理，意思是說，在軟體工程領域裡，它創造了一個獨特的觀念。這個觀念就是jQuery知名的”$”(Dollar sign)，也就是「Selector」。
以下的例子，就是jQuery pattern：
$(“div#news”).html(“<h2>News Today</h2>”);
從jQuery設計模式的角度思考，如果今天我們想要透過WebSocket與伺服器溝通，並且在一個”div”裡來顯示結果，應該怎麼設計呢？想法如下：
1. 將WebSocket的功能寫成一個function
2. 將JavaScript function封裝成module
3. 在jQuery裡擴充新的函數，簡單說，就是製作一個jQuery插件(Plugin)
以下是一段程式碼樣板：
(function($) {
$.fn.createWebSocket = function () {
if ("WebSocket" in window)
{
alert("WebSocket is supported by your Browser!");
var ws = new WebSocket("ws://<you-ip-adderess>:8888/start");
ws.onopen = function()
{
};
ws.onmessage = function (evt)
{
};
ws.onclose = function()
{
};
ws.onerror = function()
{
};
}
else
{
alert("WebSocket NOT supported by your Browser!");
}
};
})($);
上述的寫法，採用暱名模組來實作。接者，再將程式碼儲存為jquery.websocket.js。使用方法如下：
<!DOCTYPE html>
<head>
<script type='text/javascript' src="./jquery.min.js">
<script type='text/javascript' src="./jquery.websocket.js">
</head>
<body>
<div id="message"></div>
<script type="text/javascript">
$("#message").createWebSocket();
</script>
</body>
</html>
這種做法也可以良好地組織HTML5與JavaScript程式碼。此外，JavaScript的module具備「Closure」的特性，即封閉性，可以避免一些衍生問題。
由於HTML5+JavaScript的設計思想，和Natvie App的作法有很大的不同，所以了解HTML5+Javascript的應用程式「如何設計」，會是重要的一門課。了解設計模式，除了能有效組織HTML5+JavaScript程式碼外，也能做出正確的設計。