[教育訓練紀錄] 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程式碼外,也能做出正確的設計。

讀者留言 (0)

留言功能維護中。將於近日重新開放。

連絡作者

Jollen Chen,Moko365(仕橙3G教室)講師,熱愛研究 Linux 與 Android 技術。曾為 Motorola、HTC、Foxconn、LG、OPPO、騰迅、廣達電腦、緯創、仁寶等超過 50 家企業講授課程。目前在 MokoVersity 擔任軟體工程師,撰寫 Node.js 程式,也在幾家科技廠兼任 Android Framework 研發顧問。您可透過電子郵件 <jollen (at) jollen (dot) org> 或這裡與我連絡。