jQuery 的鏈式語法示範

 簡單的 Ajax 事件實作：

其中的.ajax()函式可以直接透過 Ajax 的方式，在背景執行其中指定的 XMLHttpRequest 方法，而 jQuery 定義的所有元素行為，預設也利用 Ajax 進行動態呈現。

 特效及過場動畫：

jQuery 在切換頁面，點選按鈕等事件時，都提供了過場動畫的呼叫選擇，

利用屬性或是程式碼的方式，即可做出不輸Flash 的動態切換效果。

而jQuery 也釋出了 jQuery mobile 函式庫，引用了原有的 jQuery 函式庫，並 針對行動裝置的特性做了一些擴充功能。

2.3.2 jQuery mobile

jQuery mobile 為基於 jQuery 函式庫實作而來的開發工具，其包含以下幾個特 點：

 針對行動裝置設計的介面：

jQuery mobile 採用仿 iOS 手機介面的設計風格及過場動畫，實作出各種 HTML 元件的風貌，官方網站上並釋出了 ThemeRoller 設計工具，提供各種

18

不同的配色設計，並匯出成.css 檔，可供網頁直接套用。

而jQuery mobile 也特別針對觸控介面作最佳化，並使不同平台瀏覽器的觸控 事件能達成一致的事件觸發。

 跨行動平台的相容性：

jQuery mobile 針對目前各種不同裝置上的瀏覽器，解決了版本之間的相容性 問題，使開發者在跨平台測試時，不需撰寫多餘的程式碼，來應付各種平台 上針對同一個功能產生的相異問題。

2.3.3 JSON

JSON(JavaScript Object Notation)是一種輕量級的資料交換定義格式，最初在 JavaScript Programming Language, Standard ECMA-262 3rd Edition 此書中定義為 JavaScript 中一個 object 的子集。JSON 的格式定義如下：

JSON object：以大括號包含起來的部分即為一個 JSON object。裡面包含一至 多組不等的key／value。

圖 6 JSON object 格式定義

19

JSON array：以中括號包含起來的部分即為一個 JSON array。裡面包含一至 多組不等的value。

圖 7 JSON array 格式定義

JSON value：任何稱為 value 的欄位皆可稱為 JSON value。其可以是字串

（string）、數字（number）、JSON object、JSON array、布林值或是空值（null）。

圖 8 JSON value 格式定義

以往的網頁傳輸標準格式，皆由XML 語言繼承而來，但由於 XML 為嚴謹定 義的巢狀格式語言，在解譯其標籤時，在驗證上往往須耗費較多的資源，於是 JSON 在定義出來之後，便成為網頁傳輸資料時更為適合的選擇，因其也具有巢

20

狀架構的特性，key／value 型態也很適合作為標籤語言的替代品，加上省略了許 多標籤定義，JSON 構成的字串，在傳輸量上遠小於一份 XML 文件。

由於JSON 的格式是由 JavaScript 物件定義而來，所以 JavaScript 可直接利用 eval()函式直接對 JSON 格式的字串進行轉換，而現今瀏覽器也都已實作了 JSON 物件，可以直接利用JSON.parse()函式，此函式實作了更具安全性的格式驗證轉 換功能。

第四節 node.js

JavaScript 其實是一個弱型別概念的物件導向語言，但由於環境的因素，

JavaScript 通常被放在瀏覽器底下執行，也因此被侷限而成為一個沒有整體物件導 向觀念的Script Language，因為瀏覽器的 JavaScript Engine 往往缺乏有效的記憶 體管理機制，即使是目前新興的瀏覽器（如Chrome/Firefox 等）背後的 JavaScript 引擎都已有效的實作了記憶體回收機制，雖然使JavaScript 能夠處理更為複雜的 資訊，但本質上仍然不是一個獨立的執行環境。

CommonJS 的架構概念是由 Kevin Dangoor 於 2009 年一月提出，此架構定義 了一套以JavaScript 語言為基礎架構的伺服器端應用開發模型，主要強調以下功 能的實作：

21

以回應如JavaScript 當中的 XmlHttpRequest 訊息要求。

node.js 便是以此架構所開發出來的一套執行環境，其開發者之一 Ryan Dahl 於2009 年開始在 Google 論壇（Google Group）提出此架構實作的理念，此套系 統使用Chrome 的 V8 Engine 作為 JavaScript 的解譯工具，使其成為一個和 python/ruby 一樣，成為可以獨立執行運作的伺服器架構。

node.js 的模組化功能性非常豐富，且已經有許多支援的模組可供下載，本研 究選用socket.io 作為 Web Socket 對應的伺服器開發。

2.4.1 socket.io

HTML5 在導入 Web Socket API 之後，使得一般網頁連線的機制有了一個新 的選擇，以往的JavaScript 網頁端程式大多使用 PostBack 機制，不但必須等待網 頁伺服器回應，而且開發者也必須在後端進行不少資料的暫存取出動作，無形中 增加了網頁伺服器的運算負擔，而且在使用者持續增加時，還必須承擔伺服器連 線數過高無法回應的風險。在Ajax 技術成熟後，網頁端改採非同步的機制，先在

22

背後對伺服器非同步的進行送出（Post），等待資訊回傳之後再更新網頁上的內容，

雖然看似增加了網頁端的回應速度，但因背後的運作仍然是以Post 作為傳遞資訊 的機制。

在HTML5 當中，訂定了一個 Web Socket API 的標準規範（目前仍在草稿階 段），允許開發者在使用者端，利用JavaScript 進行類似 Socket 的伺服器／客戶端 單一溝通介面。socket.io 是一個 node.js 的模組開發工具，藉以實作出 HTML5 協 定中支援的Web Socket 的伺服器端服務。

socket.io 其實不是一個真正的 Socket 機制，他是採非同步輪詢，當使用者送 出Web Socket 請求之後，由 node.js 引擎所啟動的服務，便會將該請求送入一個 堆疊機制，待服務進入堆疊處理時，才會依序回覆使用者傳遞來的訊息，而使用 者在開啟跟關閉服務時，便會由JavaScript 的回呼（callback）機制，產生出一個 類似Socket 接通（accept）及關閉（close）的訊息，通知伺服器是否接續處理客 戶端的資訊。

23

第三章 系統架構與設計

第一節 系統架構

本研究透過HTML5 當中所規範的幾個新增屬性，實作出地圖定位以及多方 談話功能，實作的功能計有：

 Web Storage：暫存使用者暱稱及定位資訊等

 Web Socket：實現多方談話

 Geolocation：取得使用者所在定位

在伺服器端，利用網頁伺服器負責存放本系統使用掌端的網頁以及JavaScript 原始碼，以提供使用者端存取。在Web Socket 的實作上，必須要有一個能夠支援 Web Socket 伺服器架構的應用服務，這裡使用的是 node.js 可擴充服務，並利用 擴充套件實作出一個簡易的HTTP 伺服器，而在 socket 支援上必須安裝 socket.io 擴充套件。實作上由node.js 啟動一份.js 文件，以提供多方談話，及多人定位兩 個服務。

24

圖 9 系統架構圖

第二節 Web Socket 架構

Web Socket 由於採用 HTTP 協定，通常並不會受到防火牆阻擋，在加上其輕 便快速的特性，在反應速度上的表現頗為亮眼。

node.js 提供了一個稱為 socket.io 的模組，用來架設符合 Web Socket 規範的 伺服器端應用服務，其溝通是透過JavaScript 定義的 XMLHttpRequest，作為伺服 器與客戶端兩者之間的要求方式，再透過回呼函式（callback）的方式達成回應，

讓整體行為看起來就像是一個Socket 行為。

socket.io 的 Schema 定義如下程式碼所示：

25