[教育訓練紀錄] HTML5+JavaScript 設計模式：jQuery pattern

jollen 發表於 June 18, 2012 12:23 PM

上週在北京舉辦「課程名稱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程式碼外，也能做出正確的設計。

主選單

近期文章

我的工作

[教育訓練紀錄] HTML5+JavaScript 設計模式：jQuery pattern