基于JQuery框架的web移動端快速開發(fā)技術(shù)研究與應(yīng)用

吳國辰

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

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

中圖分類號：TP393 文獻標(biāo)識碼：A 文章編號：1009-3044（2017）02-0089-02

1 概述

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

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

2 web應(yīng)用變化

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

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

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

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

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

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

3.1 JQuery的內(nèi)容

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

3.2 JQuery的特點

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

4 基于JQuery框架的web移動端優(yōu)勢

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

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

5 JQuery框架的web移動端開發(fā)

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

5.1 Ajax的異步請求

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

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

5.2 JQuery Mobile

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

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

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

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

（document）.one（"click"，

function（）{ $

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

e.stopPropagation（）； }）；

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

function（e）

{ e.stopPropagation（）； }）；

6 結(jié)語

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

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

參考文獻：

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

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

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