基于jQuery框架的分布式視頻網絡應用系統

安寧

摘要：jQuery是一種基于JavaScript開發的框架，它將JavaScript常用的功能代碼進行二次封裝，使得原本需要利用JavaScript進行開發的應用系統開發效率更高、代碼更簡潔，實現“用更少的代碼做更多的事”。jquery優化了JavaScript開發中事件處理、動畫效果等方面的功能，語法簡潔清晰，具有靈活的css選擇器，并可以兼容目前市場各種主流的瀏覽器產品如firefox、IE、Chrome等。分布式架構的應用系統較傳統web服務器，運行效率更高，數據存儲更安全，更適應與高并發訪問的應用場景。

關鍵詞：jQuery;ajax;web開發;網絡應用系統

1引言

近年來，隨著前端技術的迅速發展，HTML、CSS、JavaScript等都有了質的飛躍。在JavaScript方面，出現了許多優秀的框架結構，jquery作為最早出現的一種架構，已成為目前使用最為廣泛的JavaScript開發框架。他將JavaScript開發中常用的功能代碼進行整合及封裝，提供了功能豐富的事件處理API接口，大大提高了程序員的開發效率，使得代碼更簡潔明了，可讀性更強，并可以兼容目前市場上種主流瀏覽器產品如firefox、IE、Chrom、Opera等，真正實現了“用更少的代碼做更多的事”，許多十分復雜的網頁動態效果例如滑動欄、拖拽、鼠標懸停等，在原生JavaScript的開發環境下，實現起來繁瑣、代碼量大、語法復雜，而使用jquery框架后，能夠快速獲取網頁元素，網頁動態效果變得十分豐富，語法簡潔清晰，是對開發者而言非常友好的一個開發框架結構。

本文介紹了一款基于jquery框架開發的視頻網絡應用系統，也就是我們通常所說的視頻網站。在該網絡應用系統中，網頁動態效果部分利用jquery中提供的API接口實現了界面輪播功能、菜單欄背景自動更換、鼠標懸停展示特效等模塊，網站用戶體驗良好，動態效果豐富，人性化的設計旨在為使用者獲得更好的用戶體驗。

2jQuery環境搭建

搭建jQuery環境通常有兩種方式。一種是本地安裝，即將jQuery 庫下載至本地，并在html文件當中進行引用。在jQuery的官網jquery.com/download/當中選擇下載所需版本的jquery庫，官網提供兩個版本的庫供使用者下載，一個是精簡壓縮版，以.min.js為后綴，通常用于實際網站開發使用。

3網絡應用系統基本架構

本文所介紹的視頻網絡應用系統是一個動態視頻網站，動態網站基本架構為“前端+后臺”的結構，前端部分負責進行界面展示，通過html+css的形式實現頁面的靜態顯示，通過JavaScript實現網頁的動態效果;后臺部分負責處理業務功能，接收前端提交的數據，在服務器端對數據進行處理，并將最終結果返回給前端予以給客戶展示。通常在后臺，除了處理邏輯業務的服務器，還有數據庫服務器提供數據庫服務，用以存儲數據，和web服務器一同為網絡應用系統提供服務。在前后臺交互的過程中，目前主流的一種方式是采用ajax技術進行數據的交換，能夠在不重新加載整個頁面的情況下，實現對網頁部分數據的更新。在jQuery當中，提供了多種與ajax有方法，使用GET和POST方法從遠程服務器上請求html數據、JSON數據等。在jquery出現之前，ajax的實現并非易事，對于不同的瀏覽器，ajax的實現方法也不盡相同，而在jquery中，我們只需要使用一行簡單的代碼就可以實現ajax功能。

在后臺服務器部分，傳統的網絡應用系統將web服務、php-fpm服務、數據庫服務部署在同一節點當中，雖然實現簡單，但健壯性較差，若服務器宕機則會出現單點故障問題。而采用分布式架構的服務器集群，將單節點服務器擴展成多節點的服務器集群，將網絡系統所依賴的服務分布式地部署在不同節點上，這樣可以讓各服務更大化的獨占系統資源，并且當集群中某節點出現故障，不會影響其他節點的服務正常運行，從一定程度上大大提高了系統的健壯性。

4網絡應用系統功能模塊

視頻網絡應用系統主要分為5個板塊，分別是網頁頭部（banner）、菜單欄、滑動欄推送板塊（slider）、動畫縮略展示部分。網頁頭部主要包括站點首頁、游戲中心、直播、周邊頁面入口，以及登錄和注冊界面入口;菜單板塊包括直播、連載等網站主要內容頁面入口，用戶可根據瀏覽需求選擇相應的入口進入子頁面;搜索欄用于搜索站點當中的內容;滑動欄推送板塊用于推送站點最新最熱門內容，并通過滑動效果循環進行展示，用戶可通過滑動縮略圖進入相應子頁面中;動畫縮略展示部分展示了最近更新視頻的縮略圖，鼠標指向后顯示視頻信息簡介。

5jQuery在網絡應用系統當中的應用

（1）點擊事件

在視頻網站中，大量使用了jquery中的click（）方法實現頁面的點擊事件。在原生的JavaScript中，需在頁面html元素中添加onclick事件，并在JavaScript文件中添加相應的事件代碼并將兩者進行綁定，而基于jquery框架的點擊事件，只需要在jquery代碼中引用頁面相應的元素，并為其聲明點擊時要執行的代碼段，就可以完成點擊事件的編寫了。在登錄界面中，當用戶輸入賬戶及密碼，并點擊登錄按鈕完成登錄時，會觸發點擊事件用來進行登陸檢測，包括賬戶和口令是否非空，進行密碼長度及復雜度檢測，根據瀏覽器內核的類型創建不同的http請求，根據將前臺用戶提交的賬戶及密碼通過POST方法提交給后臺php代碼進行數據的處理。

（2）樣式切換

網站的動態效果，例如每當點擊滑動欄切換標簽按鈕時，原本的圖標會切換為其他圖標突顯選中效果;在選擇菜單內容時，鼠標指向不同的菜單條目菜單背景會自動跟隨內容發生變化;當鼠標指向網頁中圖標時會有色彩變化以示選中效果。在原生的JavaScript中，如果要改變頁面元素的樣式，每一條語句代碼只能實現一種樣式的重新定義，而基于jquery框架的頁面，通常使用addClass（）/removeClass（）/ toggleClass（）等方法實現樣式的切換，可以靈活的實現樣式的添加移除和切換，代碼實現方式簡潔靈活。以滑動欄為例，樣式切換部分代碼如下圖所示：

（3）鼠標懸停

當鼠標指向某些圖標或菜單時，使用jquery當中的hover（）方法，當鼠標選定與頁面元素上時會觸發mouseenter和mouseleave事件，執行指定的函數實現不同的動態效果。鼠標懸停實現動態效果部分代碼如下圖所示：

（4）與CSS的結合

要使jquery在實現動態展示部分達到最優的效果，還要與CSS良好的結合。除了CSS1中支持的元素的樣式的模式：hover，在CSS3中還新添加了：checked、：not（selector）、：enabled等選擇器樣式模式，在實現同樣的動態效果時，可以基于更簡潔更高效的目標靈活選擇使用jquery或者樣式選擇器模式。例如，當實現鼠標懸停樣式切換時，如果使用jquery來實現，需要先用選擇器選取頁面相應元素，然后編寫懸停事件，在懸停事件中，需進行條件判斷，例如在樣式1與樣式2之間進行切換，若當前元素樣式為1，則需要先將樣式1移除再添加樣式2，反之亦然。而使用CSS，只需要使用：hover模式，就可以使用簡單的幾個樣式定義完成樣式切換。

6結束語

基于jQuery框架的分布式視頻網絡應用系統，利用了jQuery豐富的事件處理API接口，并與CSS的使用進行了良好結合，是整個系統在實現動態效果方面更加簡潔高效，代碼可讀性好，運行效率高，將傳統的原生JavaScript需要大段代碼才能實現的功能，僅需要一個接口和語句即可完成。此外，系統使用了分布式服務器集群架構，使整個系統在健壯性及運行效率方面都較傳統架構有所提升，提高了系統的并發訪問能力，后續可根據應用場景靈活進行資源及服務的擴充。

參考文獻：

[1]Jonathan Chaffer. jQuery基礎教程（第4版），2013，9787115330550

[2]李艷鵬，楊彪.分布式服務架構：原理、設計與實戰，2017，9787121315787