李琳

摘要：該文簡單介紹了基于移動端的應(yīng)用程序前端開發(fā)現(xiàn)狀，闡述了移動前端的良好發(fā)展態(tài)勢，對比了基于移動端的前端開發(fā)與Web前端開發(fā)的區(qū)別，介紹了幾種常見的移動前端開發(fā)框架，開發(fā)人員在實際工作中要不斷完善和優(yōu)化移動前端開發(fā)技術(shù)，保證基于移動端的應(yīng)用程序前端開發(fā)能夠高效運行，并期望移動前端開發(fā)向自動化、智能化發(fā)展。

關(guān)鍵詞：移動前端開發(fā);前端開發(fā)框架;前端開發(fā)技術(shù)

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2020）14-0097-02

1基于移動端的應(yīng)用程序前端開發(fā)現(xiàn)狀

自從互聯(lián)網(wǎng)進入了Web2.0時代，大量的Web應(yīng)用涌入了人們的視野，頁面也變得更加美觀、生動，與用戶的交互也極大地增強了其使用體驗。隨著HTML5、CSS3、JavaScript以及各種框架技術(shù)的應(yīng)用，人們越來越重視頁面的形象設(shè)計和交互性設(shè)計，并將前端開發(fā)從軟件開發(fā)中逐漸剝離出來。而移動互聯(lián)網(wǎng)的興起以及其帶來的大量高性能的移動終端設(shè)備以及快速的無線網(wǎng)絡(luò)，讓移動端應(yīng)用程序前端開發(fā)的前景十分廣闊，許多開發(fā)人員紛紛投入到移動端應(yīng)用程序的前端開發(fā)中。

在傳統(tǒng)的移動端開發(fā)過程中，要先確定需求和產(chǎn)品、設(shè)計uI，然后再進行架構(gòu)設(shè)計，并進行數(shù)據(jù)庫、接口和前端開發(fā)，經(jīng)過測試后進行產(chǎn)品運營，這種流程下的移動端應(yīng)用程序千篇一律，前后端界限不明確，難以滿足用戶越來越精細的用戶體驗需求?，F(xiàn)在越來越多的企業(yè)采用雙層架構(gòu)模式進行移動端應(yīng)用程序開發(fā)，即前端工程師開發(fā)H5、Android或IOS頁面，后端工程師設(shè)計數(shù)據(jù)庫，開發(fā)接口、后臺，管理服務(wù)器或后端云平臺，將前后端有效的區(qū)分開來，讓專業(yè)的人做專業(yè)的事情，不僅可以提高效率，還可以更好地滿足用戶的個性化需求。

2基于移動端的應(yīng)用程序前端開發(fā)與Web前端開發(fā)的區(qū)別

2.1應(yīng)用場景不同

基于移動端的應(yīng)用程序前端頁面是面向手機、平板電腦等移動設(shè)備的，頁面小巧、使用靈活，但是要求頁面要能夠充分適應(yīng)各種屏幕尺寸的手機并進行最大程度的利用，因此主要適用于瀏覽多、操作簡捷的應(yīng)用程序;而Web前端頁面主要面向臺式機、PC機等設(shè)備，頁面較大、觀看更舒適，適用于需要大量操作的應(yīng)用程序和用戶。

2.2應(yīng)用頁面性能不同

移動端設(shè)備連接的網(wǎng)絡(luò)與Web前端相比較為復(fù)雜，Web端主要是通過網(wǎng)線連接網(wǎng)絡(luò)，穩(wěn)定性強，而移動端接入的是無線網(wǎng)絡(luò)，如Wi-Fi、4G等，如果遇到網(wǎng)絡(luò)不穩(wěn)定的情況，還會在不同網(wǎng)絡(luò)中進行切換，對頁面性能無疑是一個巨大的挑戰(zhàn)，這就要求移動端的頁面資源不能過大，否則在惡劣網(wǎng)絡(luò)情況下時，頁面將會無法訪問，嚴重影響用戶體驗。

2.3技術(shù)框架使用不同

由于在移動端主要以webkit內(nèi)核為主，對HTML5、CSS3等新技術(shù)支持的更好，所以可以更大范圍地使用新技術(shù);而Web端由于要兼容不同版本的瀏覽器，在一些情況下限制了其對新技術(shù)的使用。此外，在移動端頁面框架的選擇方面，由于移動端網(wǎng)絡(luò)情況不穩(wěn)定，一般只考慮體積小而功能強大的框架，能滿足一般業(yè)務(wù)的需要;而Web端相對選擇的范圍比較大，可以根據(jù)項目的實際需求加以考慮，不必因為顧慮體積問題而降低其功能性。

3常見的基于移動端的應(yīng)用程序前端開發(fā)框架

基于移動端的應(yīng)用程序隨著移動終端智能化的發(fā)展而受到越來越多人的關(guān)注，相較于Web端，它的運行更快、隨時隨地，而且有更好的用戶體驗。隨著前端開發(fā)技術(shù)的不斷發(fā)展，移動前端開發(fā)框架也在不斷更新、完善，前端開發(fā)人員可以通過選擇合適、高質(zhì)量的移動框架來滿足不同應(yīng)用程序的性能需求。下面介紹幾種常見的基于移動端的應(yīng)用程序前端開發(fā)框架。

3.1 jQuery Mobile框架

iQuery Mobile是iQuery主要面向移動端Web程序前端開發(fā)的框架，能夠幫助開發(fā)人員快速開發(fā)出支持多種移動設(shè)備的Mobile應(yīng)用用戶界面。jQueryMobile繼承了jQuery的優(yōu)勢，給主流移動平臺帶來了功能強大的ljQuery核心庫，并且給主流平臺提供了豐富的適合移動端Web應(yīng)用的uI組件，還有很多的第三方擴展，幾乎適用于所有流行的智能手機和平板電腦。

iQuery Mobile使用HTML5和CSS3通過盡可能少的腳本來對頁面進行布局，其最新版本是1.4.0，主要側(cè)重于在性能和控件方面的改進。除了全新的默認主題和SVG圖標，還新增了開關(guān)控件、通用過濾器、箭頭彈出框、滑動提示框等一系列功能，更是集成了jQueryuI的Tab部件，給開發(fā)人員帶來了極大的便利。

3.2 Sencha Touch框架

Sencha Touch框架是最早的基于HTML5的移動端Web程序框架，它提倡組件化編程，是面向?qū)ο蠹夹g(shù)的發(fā)展延伸，類的概念仍然是Sencha Touch框架中的一個基礎(chǔ)概念，但其更核心的概念是接口。Sencha Touch框架包含的豐富的用戶界面組件和數(shù)據(jù)管理全部都是基于最新的HTML 5和CSS3的Web標準，能夠全面兼容Android和iOS設(shè)備。

3.3阿里系的KISSY框架

KISSY是由阿里巴巴集團的前端工程師們發(fā)起創(chuàng)建的一個開源JavaScript框架。它具有跨終端、模塊化、高擴展性、組件齊全和使用簡單等優(yōu)點。除了完備的工具集合諸如DOM、Event、Ajax、Anim等，KISSY還面向團隊協(xié)作做了獨特設(shè)計，提供了經(jīng)典的面向?qū)ο蟆討B(tài)加載、性能優(yōu)化等解決方案。作為一款全終端支持的JavaScript框架，KISSY為移動終端做了大量適配和優(yōu)化，應(yīng)用場景十分廣泛。KISSY Mobile是一套面向移動端的功能特性集合，能夠?qū)崿F(xiàn)靈活配置的轉(zhuǎn)場動畫和View的解耦。目前KISSY 5.0已經(jīng)全面支持移動端。

3.4騰訊系的Frozen UI框架

Frozen uI框架是騰訊的社交用戶體驗設(shè)計團隊根據(jù)最新的手機QQ設(shè)計規(guī)范制作的移動端Web框架，是一套基于移動端的uI庫。Frozen uI框架非常輕量、精美，提供了包含表單、對話框、列表、CSS基礎(chǔ)樣式、JavaScript基礎(chǔ)組件和一些動畫效果的庫。此外，F(xiàn)rozenUI還可以提供文字截斷、lpx邊框、rem、兩端留白等常用場景的解決方案。

4小結(jié)

綜上所述，基于移動端的前端開發(fā)無論從應(yīng)用場景還是框架技術(shù)上，都區(qū)別于傳統(tǒng)的Web前端開發(fā)，相信隨著IT技術(shù)的不斷發(fā)展，前端技術(shù)的不斷更新，必將給移動端應(yīng)用程序前端開發(fā)帶來新的前景與機會，催生新的產(chǎn)業(yè)鏈條，打破固有開發(fā)模式，顛覆人們的工作和生活習(xí)慣，給用戶帶來全新的體驗。