吳國(guó)辰

摘要：隨著我國(guó)科技的不斷提高，智能設(shè)備也在迅速普及，傳統(tǒng)的信息類(lèi)和電子類(lèi)都已經(jīng)逐漸向移動(dòng)端轉(zhuǎn)移和擴(kuò)展，移動(dòng)端已經(jīng)開(kāi)始成為主流市場(chǎng)。因此，web移動(dòng)端的技術(shù)成為了大眾所關(guān)注的焦點(diǎn)。該文就以web移動(dòng)端的開(kāi)發(fā)技術(shù)為主，著重探討了基于JQuery框架下的web移動(dòng)端快速開(kāi)發(fā)技術(shù)的應(yīng)用。

關(guān)鍵詞：JQuery框架；web移動(dòng)端；快速開(kāi)發(fā)技術(shù)；研究和應(yīng)用

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）02-0089-02

1 概述

常規(guī)的Web應(yīng)用主要是把所有的操作都集中在服務(wù)器端口進(jìn)行，而客戶(hù)端只是做一些簡(jiǎn)單的顯示網(wǎng)頁(yè)服務(wù)。這樣導(dǎo)致了服務(wù)器承擔(dān)任務(wù)過(guò)重、加載過(guò)慢等現(xiàn)象。而Ajax的出現(xiàn)恰好改變了之前的web的操作方式和開(kāi)發(fā)模式，它把之前具有單一性和簡(jiǎn)單化的網(wǎng)頁(yè)變得更加靈活性和交互性，并且通過(guò)異步數(shù)據(jù)傳輸，達(dá)到了web移動(dòng)端的獨(dú)立性和有效性的成果。但是，Ajax技術(shù)下的web移動(dòng)端程序開(kāi)發(fā)和應(yīng)用的劣勢(shì)也較為明顯。首先，Ajax要使用傳統(tǒng)的XML技術(shù)對(duì)數(shù)據(jù)進(jìn)行傳播與運(yùn)行，這樣會(huì)造成數(shù)據(jù)冗余；其次，數(shù)據(jù)會(huì)容易出現(xiàn)無(wú)法解析現(xiàn)象，造成數(shù)據(jù)停滯；最后，對(duì)瀏覽器的兼容性與包容性過(guò)差，導(dǎo)致瀏覽效果不佳。為了避免以上現(xiàn)象的發(fā)生，我國(guó)工作人員用JSON來(lái)替代了XML的傳輸方式，使JSON成為新的數(shù)據(jù)傳輸格式。并且以JQuery作為框架，來(lái)解析JOSN的數(shù)據(jù)包和格式，并達(dá)到Ajax與JOSN的異步請(qǐng)求，形成最佳適合web移動(dòng)端的活動(dòng)。

不僅如此，JQuery也是一個(gè)靈活與優(yōu)秀的框架，是對(duì)Javascript的一種延伸與擴(kuò)展，不僅可以擴(kuò)展常規(guī)的web的開(kāi)發(fā)模式，實(shí)現(xiàn)異步請(qǐng)求，還可以兼容各種主流的瀏覽器、CSS3等設(shè)備，使其按照使用者的需求進(jìn)行資源加載處理。因此，JQuery框架真正地實(shí)現(xiàn)了web移動(dòng)端的快速開(kāi)發(fā)，也優(yōu)化了用戶(hù)體驗(yàn)，形成了良好效益。

2 web應(yīng)用變化

2.1 傳統(tǒng)的Web開(kāi)發(fā)模式

一般來(lái)說(shuō)，傳統(tǒng)的web的應(yīng)用主要是按照請(qǐng)求、刷新和顯示的模式進(jìn)行開(kāi)發(fā)與研究的。這種模式簡(jiǎn)單來(lái)說(shuō)就是用戶(hù)在鏈接某件事件或者單機(jī)按鈕時(shí)，都會(huì)向服務(wù)器的終端發(fā)出一個(gè)請(qǐng)求命令，這些請(qǐng)求都是由服務(wù)器進(jìn)行處理與完成，當(dāng)處理結(jié)束后，就會(huì)返回到瀏覽器頁(yè)面上，顯示最終結(jié)果。其實(shí)就是web的服務(wù)器要完成多種處理，而瀏覽器只做簡(jiǎn)單的頁(yè)面顯示服務(wù)，甚至導(dǎo)致了傳統(tǒng)web應(yīng)用等待時(shí)間過(guò)長(zhǎng)，客戶(hù)喪失耐心，還有可能出現(xiàn)瀏覽器可能始終顯示的都是LOADING畫(huà)面，最后會(huì)出現(xiàn)空白頁(yè)面或者無(wú)法顯示。可是有時(shí)候，客戶(hù)可能只是想知道某件商品價(jià)格、圖案等，一個(gè)微小的請(qǐng)求就要整個(gè)服務(wù)器進(jìn)行操作與運(yùn)行，甚至頁(yè)面中其他的數(shù)據(jù)都要重新加載。這樣的情況不僅會(huì)給服務(wù)器帶來(lái)一定的運(yùn)算負(fù)擔(dān)和處理麻煩，會(huì)給用戶(hù)帶來(lái)不愉快和不舒服的體驗(yàn)與方式，甚至還會(huì)無(wú)故增加了客戶(hù)的流量數(shù)據(jù)。

2.2 Ajax下的web應(yīng)用

傳統(tǒng)的web應(yīng)用還具備網(wǎng)頁(yè)自動(dòng)刷新功能，為了幫助用戶(hù)獲得即時(shí)的新聞、股票等信息，但是頻繁的自動(dòng)刷新會(huì)使用戶(hù)產(chǎn)生煩躁心理。因此，Ajax技術(shù)的出現(xiàn)打破了自動(dòng)刷新功能，使頁(yè)面開(kāi)始不再頻繁的自動(dòng)刷新，并且替代了傳統(tǒng)web應(yīng)用的模式與方式。Ajax技術(shù)的真正被認(rèn)可是因?yàn)榘褌鹘y(tǒng)的web應(yīng)用的交互模式改變?yōu)榱水惒教峤?，并用隱藏的框架完成，沒(méi)有用到服務(wù)器。其中，Ajax技術(shù)主要是通過(guò)XML進(jìn)行數(shù)據(jù)異步讀取后，在利用XSTL與XML進(jìn)行交換處理數(shù)據(jù)，最終用DOM來(lái)實(shí)現(xiàn)頁(yè)面的顯示，這樣不僅減輕了處理器的負(fù)擔(dān)，也給用戶(hù)帶來(lái)了更加快速的頁(yè)面顯示，形成良好的用戶(hù)體驗(yàn)。

與此同時(shí)，工作人員也可以在任意一個(gè)地方進(jìn)行初始化的請(qǐng)求，并利用GUI的異步傳輸與web的移動(dòng)端鏈接，形成了服務(wù)器的數(shù)據(jù)交換使用，達(dá)到了頁(yè)面與數(shù)據(jù)分離的局面。但是，Ajax并不是萬(wàn)能的，它只有在服務(wù)器確定交換后，引擎才可以向服務(wù)器提出異步請(qǐng)求。如果出現(xiàn)數(shù)據(jù)沒(méi)有交換，這樣舊的數(shù)據(jù)就會(huì)冗余，導(dǎo)致瀏覽器兼容效果差，并且加大了資金的投入。

3 JQuery框架的應(yīng)用

3.1 JQuery的內(nèi)容

JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript框架。JQuery數(shù)據(jù)壓縮后只有21k，屬于輕量級(jí)的JS庫(kù)，同時(shí)具備兼容功能，可以兼容各種瀏覽器（Opera9.0+、FF1.5+、IE6.0+）和CSS3系統(tǒng)，不僅可以使用戶(hù)更加方便地處理events和HTML系統(tǒng)，還可以提供網(wǎng)站交換，幫助Ajax更好地配合web的應(yīng)用，實(shí)現(xiàn)移動(dòng)端的運(yùn)轉(zhuǎn)與工作。JQuery框架的使用大大促進(jìn)了web移動(dòng)端的開(kāi)發(fā)，幫助了內(nèi)容分離和異步請(qǐng)求的實(shí)現(xiàn)。與此同時(shí)，JQuery的文檔說(shuō)明非常詳細(xì)，可以使用戶(hù)對(duì)其中的使用清晰明了，保證了許多插件的選擇與使用。JQuery還可以使html的頁(yè)面保持完整的源代碼，并和html的內(nèi)容進(jìn)行分離，也就是說(shuō)，用戶(hù)既不用擔(dān)心等待時(shí)間過(guò)長(zhǎng)，還可以直接用ID進(jìn)行服務(wù)器調(diào)動(dòng)，不再需要從html中尋找JS了。所以，根據(jù)JQuery的特點(diǎn)，非常適合作為框架模式，來(lái)為web移動(dòng)端的快速與便捷開(kāi)發(fā)做出貢獻(xiàn)。

3.2 JQuery的特點(diǎn)

JQuery使用的是MIT許可協(xié)議，保持著免費(fèi)與開(kāi)源原則，并且是一個(gè)兼容多個(gè)瀏覽器的Javascript庫(kù)。JQuery的一個(gè)比較突出的特點(diǎn)就是語(yǔ)法設(shè)計(jì)。JQuery的語(yǔ)法設(shè)計(jì)可以使用戶(hù)更加方便，體現(xiàn)在事件處理、制作動(dòng)畫(huà)、Ajax的使用、選擇DOM元素等多個(gè)方面上。另外，JQuery還提供了插件編寫(xiě)程序，就是API。這樣不僅可以幫助開(kāi)發(fā)者更加容易的掌控模塊化， 還可以實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)的交互處理。與此同時(shí)，JQuery可以利用插件的修改，完成Tab導(dǎo)航、表格排序、圖像特效等功能，并且還自帶了特效，包括顯示和隱藏功能。

4 基于JQuery框架的web移動(dòng)端優(yōu)勢(shì)

現(xiàn)今，JQuey越來(lái)越受到廣大用戶(hù)的追捧與使用，主要是因?yàn)榉奖闩c快捷。特別是對(duì)選擇器、事件處理器、封裝設(shè)置和鏈?zhǔn)讲僮魃?，是其他的Javascript都望塵莫及的，它可以很輕松的把數(shù)據(jù)和內(nèi)容進(jìn)行分離處理，還可以很好的完成交互作用。尤其是在頁(yè)面中，做到了只定義結(jié)構(gòu)，而里面沒(méi)有任何聯(lián)系和邏輯，使交互只作用在腳本上，形成了前段部位分層。舉個(gè)例子，如果在網(wǎng)站的基礎(chǔ)上做一個(gè)移動(dòng)web的app，筆者針對(duì)目前的兩種市面上常見(jiàn)的Sencha Touch和JQuery Mobile 做個(gè)比較簡(jiǎn)單比較。簡(jiǎn)單來(lái)說(shuō)，JQuery Mobile要比Sencha Touch簡(jiǎn)單很多，用JQuery Mobile開(kāi)發(fā)效率也比Sencha Touch高，可是缺點(diǎn)就在于沒(méi)有模塊化、過(guò)于自由等問(wèn)題不利于項(xiàng)目的后期維護(hù)。如果你是一個(gè)大型的網(wǎng)站項(xiàng)目，有著一支強(qiáng)大的技術(shù)團(tuán)隊(duì)支持，那Sencha Touch是首選無(wú)異；如果你只是一個(gè)人小打小鬧地玩一下，那用JQuery Mobile會(huì)更方便。所以，拿JQuery作為web應(yīng)用的框架也更為普遍和常見(jiàn)。 JQuery的另一個(gè)優(yōu)點(diǎn)就是兼容性。JQuery在開(kāi)發(fā)過(guò)程中盡可能地兼容了各種主流瀏覽器，雖然無(wú)法做到百分之百，但是基本已經(jīng)算是比較完美的框架結(jié)構(gòu)了。值得注意的，JQuery主要兼容的是主流瀏覽器，而一些小型、雜亂的瀏覽器就不一定可以兼容。

目前，國(guó)內(nèi)瀏覽器主要以Trident（IE引擎）和chromium為主，并且作為內(nèi)核進(jìn)行轉(zhuǎn)動(dòng)，但是各大運(yùn)營(yíng)在JS引擎上會(huì)做出稍微的變動(dòng)。比如360瀏覽器，雖然還是以IE引擎為主要內(nèi)核，但是JS的代碼發(fā)生改變，以至于很多用戶(hù)會(huì)覺(jué)得JQuery框架會(huì)產(chǎn)生不兼容的現(xiàn)象，這一點(diǎn)是JQuery需要不斷改善與創(chuàng)新的。而使用chromium作為核心的瀏覽器（多數(shù)為標(biāo)榜高速的雙核瀏覽器，比如獵豹、360極速版、遨游等）則存在另一個(gè)問(wèn)題，由于chrome開(kāi)發(fā)周期極短，版本更迭快，國(guó)內(nèi)的瀏覽器內(nèi)核更新往往跟不上chromium的更新速度，導(dǎo)致各家瀏覽器在兼容性問(wèn)題上存在差異。不過(guò)這方面問(wèn)題尚在JQuery的可控范圍內(nèi)，畢竟瀏覽器版本更新的改動(dòng)并不會(huì)太大幅度，而且這都在JQuery開(kāi)發(fā)團(tuán)隊(duì)的考慮范圍內(nèi)，存在兼容性問(wèn)題的幾率極低。總的來(lái)說(shuō)，相比較其他的框架程序，以 JQuery為框架，做web的移動(dòng)端更加合適與方便。

5 JQuery框架的web移動(dòng)端開(kāi)發(fā)

隨著智能設(shè)備的普及，移動(dòng)web也受到很多的關(guān)注，很多傳統(tǒng)的信息和電子開(kāi)始走向移動(dòng)端轉(zhuǎn)型。筆者結(jié)合多年工作經(jīng)驗(yàn)與經(jīng)典案例，主要說(shuō)以下兩個(gè)方面：

5.1 Ajax的異步請(qǐng)求

Ajax的異步請(qǐng)求是JQuery框架設(shè)計(jì)的重要點(diǎn)，也是web移動(dòng)端開(kāi)發(fā)的首要任務(wù)。一般來(lái)說(shuō)，總體設(shè)計(jì)包含了前臺(tái)邏輯設(shè)計(jì)、業(yè)務(wù)邏輯和數(shù)據(jù)管理設(shè)計(jì)，并且運(yùn)用動(dòng)態(tài)生成業(yè)務(wù)表單和功能按鈕，其中每個(gè)層次和動(dòng)態(tài)功能都是獨(dú)立存在的。頁(yè)面設(shè)計(jì)除了包含了標(biāo)準(zhǔn)的移動(dòng)web的XHTML和CSS外，還結(jié)合了bootstrap的布局，把層疊樣式和響應(yīng)相融合，使JQuery成為底層對(duì)象，完成與DOM的交互和密封工作。這樣一來(lái)，不僅JQuery實(shí)現(xiàn)了頁(yè)面動(dòng)態(tài)顯示，web移動(dòng)端也開(kāi)始正常運(yùn)行，還形成數(shù)據(jù)存取功能，讓數(shù)據(jù)庫(kù)設(shè)計(jì)使用了最底層的SQL，業(yè)務(wù)邏輯使用了python。與此同時(shí)，在異步應(yīng)用程序的發(fā)送和接受的過(guò)程中，JSON和XML成為了主要數(shù)據(jù)的交換模式，甚至容許了XML通過(guò)自定義進(jìn)行數(shù)據(jù)分析和處理工作，形成擴(kuò)展標(biāo)記語(yǔ)言化，實(shí)現(xiàn)服務(wù)器與客戶(hù)端之間的傳輸交流，幫助web移動(dòng)端的完成。但是，Ajax的框架上開(kāi)始出現(xiàn)了一些問(wèn)題，并且影響到了web移動(dòng)端的生產(chǎn)與開(kāi)發(fā)，主要是安全和效率兩方面。所以，為了解決這些問(wèn)題，筆者建議使用JSON來(lái)替代傳統(tǒng)的XML，這樣會(huì)產(chǎn)生新的數(shù)據(jù)格式，可以有效避免一些問(wèn)題的發(fā)生。尤其是JSON還是一個(gè)輕量的數(shù)據(jù)格式交換中心，無(wú)論是何種框架，都可以很快的解析與，使之形成一個(gè)完整數(shù)據(jù)格式。

與此同時(shí)，完整的數(shù)據(jù)可以在內(nèi)存中與其他數(shù)據(jù)進(jìn)行轉(zhuǎn)換，并且獨(dú)立于程序所存在，這樣有利于格式支架呢雙向轉(zhuǎn)換。值得一提的是，很多用戶(hù)還喜歡采用Ajax來(lái)加載數(shù)據(jù)，這個(gè)時(shí)候就會(huì)出現(xiàn)數(shù)據(jù)來(lái)自同一個(gè)域名或者無(wú)法加載現(xiàn)象，解決辦法有兩個(gè)。第一，在瀏覽器中不能直接來(lái)跨域訪問(wèn)，而在服務(wù)器端沒(méi)有跨域安全限制，可以使用服務(wù)器作為代理。第二，腳本訪問(wèn)可以跨區(qū)域，同源策略不能阻止腳本的插入，因此，腳本訪問(wèn)也可以解決這個(gè)問(wèn)題。使用JQuery這一輕量級(jí)的JavaScript不僅可以有效提高頁(yè)面加載內(nèi)容，還可以異步請(qǐng)求，提高用戶(hù)使用感，增大經(jīng)濟(jì)效益。同時(shí)，也改善了傳統(tǒng)中的不足，確保了移動(dòng)web的開(kāi)發(fā)的成功，給用戶(hù)帶來(lái)了快捷與方便。

5.2 JQuery Mobile

目前，web移動(dòng)端開(kāi)發(fā)主要使用的框架就是JQuery Mobile。所以，JQuery Mobile就是針對(duì)web移動(dòng)端而研發(fā)，也成為移動(dòng)web的重要主流框架。同時(shí)，JQuery Mobile也是運(yùn)行在平板與手機(jī)上的版本，并且為主流平臺(tái)提供了核心庫(kù)，形成了一套完整的運(yùn)行運(yùn)行模式，最終形成以JQuery為一體的UI用戶(hù)，也留住了電腦的web瀏覽器上的用戶(hù)。現(xiàn)今，把JQuery Mobile分為了好、一般和基本三個(gè)檔次，也對(duì)Apple IOS、Android、Windows Phone、Blackberry、Palm WebOS、Firefox Mobile、Meego、Samsung Bada、Opera Mobile都提供了不同程度的服務(wù)，并達(dá)到了好的標(biāo)準(zhǔn)。對(duì)于web的移動(dòng)端開(kāi)發(fā)來(lái)說(shuō)，jQuery Mobile能最大程度上支持各種主流平臺(tái)，具備良好的兼容性，因此， 提供了一個(gè)統(tǒng)一的jQuery 移動(dòng) UI 框架，工作人員可以利用這個(gè)框架保證了移動(dòng)web程序可以不同的瀏覽器上工作與運(yùn)行，開(kāi)發(fā)人員也可以輕松地研究出web移動(dòng)端的技術(shù)。只要掌握了表單元素、API、工具欄、按鈕、頁(yè)面、對(duì)話框等，就可以輕松制作出移動(dòng)web頁(yè)面。

另外，JQuery Mobile的頁(yè)面模式基本固定，可以進(jìn)行套用，所以非常方便與簡(jiǎn)單。 并且web移動(dòng)頁(yè)面的結(jié)構(gòu)會(huì)自動(dòng)調(diào)整為最大優(yōu)化，甚至可以支持頁(yè)面嵌入，這種模式也被稱(chēng)為最適合創(chuàng)建移動(dòng)web頁(yè)面模式。這種模式不需要任何的特殊配置，知識(shí)普通鏈接，就能創(chuàng)造出豐富的多媒體圖像，甚至可以使用HTML5的特性。其中，筆者認(rèn)為比較好的一點(diǎn)就是隱藏功能，非常實(shí)用和方便，這也是JQuery Mobile一大特點(diǎn)，可以套用以下代碼：

$（"#a"）.on（"click"， function（e）

{ $（"#menu"）.show（）； $

（document）.one（"click"，

function（）{ $

（"#menu"）.hide（）； }）；

e.stopPropagation（）； }）；

$（"#menu"）.on（"click"，

function（e）

{ e.stopPropagation（）； }）；

6 結(jié)語(yǔ)

綜上所述，目前我國(guó)基于JQuery框架的web移動(dòng)端快速開(kāi)發(fā)技術(shù)還有待提高。當(dāng)然，此項(xiàng)技術(shù)要得到大幅度全面提高要經(jīng)過(guò)一個(gè)漫長(zhǎng)且極其復(fù)雜的工作過(guò)程要涉及到很多方面和元素。冰凍三尺非一日之寒，基于JQuery框架的web移動(dòng)端快速開(kāi)發(fā)技術(shù)方面存在的問(wèn)題也不是一朝一夕就能解決的。但是，面對(duì)問(wèn)題，我們也不能夠坐視不管或者是坐以待斃，基于JQuery框架的web移動(dòng)端快速開(kāi)發(fā)技術(shù)管理工作關(guān)系到整個(gè)網(wǎng)絡(luò)的質(zhì)量和相關(guān)企業(yè)的經(jīng)濟(jì)利益，在目前市場(chǎng)經(jīng)濟(jì)競(jìng)爭(zhēng)如此激烈的趨勢(shì)下，我們各方都必須做出努力共同促進(jìn)基于JQuery框架的web移動(dòng)端快速開(kāi)發(fā)技術(shù)的健康發(fā)展，促進(jìn)技術(shù)的提高。另一方面，基于JQuery框架的web移動(dòng)端快速開(kāi)發(fā)技術(shù)的發(fā)展也能做到提高企業(yè)競(jìng)爭(zhēng)力，做到產(chǎn)業(yè)可持續(xù)發(fā)展并且?guī)?dòng)整個(gè)經(jīng)濟(jì)鏈的發(fā)展。當(dāng)然，該項(xiàng)目技術(shù)的提高受益的還是我們每一個(gè)人。

因此，提高基于JQuery框架的web移動(dòng)端快速開(kāi)發(fā)技術(shù)勢(shì)在必行。而且就目前形勢(shì)來(lái)看，JQuery還是web移動(dòng)端的快速開(kāi)發(fā)的首選。它不僅僅能過(guò)簡(jiǎn)單的制作web移動(dòng)頁(yè)面，還可以發(fā)展為web移動(dòng)app，并且在技術(shù)得到提高后將來(lái)會(huì)完成更加大規(guī)模、高難度、復(fù)雜結(jié)構(gòu)和多重系統(tǒng)的網(wǎng)絡(luò)工程，在完成越來(lái)越高要求的工程中必定會(huì)在過(guò)程中出現(xiàn)一些技術(shù)問(wèn)題，而實(shí)施真正有效的應(yīng)對(duì)策略才能幫助其在技術(shù)上度過(guò)難關(guān)，減少各種問(wèn)題的出現(xiàn)，不僅可能成為web移動(dòng)端UI設(shè)計(jì)中的主流，更給用戶(hù)帶來(lái)了便利與快捷，促進(jìn)了web和經(jīng)濟(jì)的共同增長(zhǎng)與提高。

參考文獻(xiàn)：

[1] 宋金華. 基于SSH整合框架和jQuery Mobile頁(yè)面腳本框架的移動(dòng)學(xué)習(xí)平臺(tái)設(shè)計(jì)和開(kāi)發(fā)——以江蘇開(kāi)放大學(xué)為例[J]. 江蘇教育研究， 2014（3）： 42-46.

[2] 仰燕蘭，金曉雪，葉樺.ASP.NET.ATAX框架研究及其在web開(kāi)發(fā)中的應(yīng)用[J]. 計(jì)算機(jī)應(yīng)用與軟件，2011， 28（6）：195-198.

[3] 黃競(jìng). 基于jQuery框架的Web前端系統(tǒng)構(gòu)建方法的研究與應(yīng)用[D]. 北京郵電大學(xué)， 2013.