安寧

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

關(guān)鍵詞：jQuery;ajax;web開發(fā);網(wǎng)絡(luò)應(yīng)用系統(tǒng)

1引言

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

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

2jQuery環(huán)境搭建

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

3網(wǎng)絡(luò)應(yīng)用系統(tǒng)基本架構(gòu)

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

在后臺服務(wù)器部分，傳統(tǒng)的網(wǎng)絡(luò)應(yīng)用系統(tǒng)將web服務(wù)、php-fpm服務(wù)、數(shù)據(jù)庫服務(wù)部署在同一節(jié)點(diǎn)當(dāng)中，雖然實(shí)現(xiàn)簡單，但健壯性較差，若服務(wù)器宕機(jī)則會出現(xiàn)單點(diǎn)故障問題。而采用分布式架構(gòu)的服務(wù)器集群，將單節(jié)點(diǎn)服務(wù)器擴(kuò)展成多節(jié)點(diǎn)的服務(wù)器集群，將網(wǎng)絡(luò)系統(tǒng)所依賴的服務(wù)分布式地部署在不同節(jié)點(diǎn)上，這樣可以讓各服務(wù)更大化的獨(dú)占系統(tǒng)資源，并且當(dāng)集群中某節(jié)點(diǎn)出現(xiàn)故障，不會影響其他節(jié)點(diǎn)的服務(wù)正常運(yùn)行，從一定程度上大大提高了系統(tǒng)的健壯性。

4網(wǎng)絡(luò)應(yīng)用系統(tǒng)功能模塊

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

5jQuery在網(wǎng)絡(luò)應(yīng)用系統(tǒng)當(dāng)中的應(yīng)用

（1）點(diǎn)擊事件

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

（2）樣式切換

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

（3）鼠標(biāo)懸停

當(dāng)鼠標(biāo)指向某些圖標(biāo)或菜單時，使用jquery當(dāng)中的hover（）方法，當(dāng)鼠標(biāo)選定與頁面元素上時會觸發(fā)mouseenter和mouseleave事件，執(zhí)行指定的函數(shù)實(shí)現(xiàn)不同的動態(tài)效果。鼠標(biāo)懸停實(shí)現(xiàn)動態(tài)效果部分代碼如下圖所示：

（4）與CSS的結(jié)合

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

6結(jié)束語

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

參考文獻(xiàn)：

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

[2]李艷鵬，楊彪.分布式服務(wù)架構(gòu)：原理、設(shè)計與實(shí)戰(zhàn)，2017，9787121315787