移動(dòng)Web應(yīng)用的前端工程化實(shí)現(xiàn)

蔡 兵，王嘯楠

(安徽信息工程學(xué)院計(jì)算機(jī)與軟件工程學(xué)院，安徽 蕪湖 241000)

隨著Web前端技術(shù)的發(fā)展，越來(lái)越多的移動(dòng)應(yīng)用傾向于使用HTML、CSS和JavaScript等技術(shù)開(kāi)發(fā).相對(duì)于原生Android、iOS應(yīng)用，移動(dòng)Web應(yīng)用的技術(shù)棧通用程度高、易于學(xué)習(xí)，可以跨平臺(tái)，有著更好的兼容性和便于推廣等特點(diǎn)，已經(jīng)成為中小型團(tuán)隊(duì)開(kāi)發(fā)首選，得到了開(kāi)發(fā)者的普遍青睞.

2014年9月，HTML5的發(fā)布為Web前端領(lǐng)域帶來(lái)了新生[1]，該標(biāo)準(zhǔn)提供了移動(dòng)應(yīng)用所需的特性，如手勢(shì)拖拽、地理定位、音視頻、本地存儲(chǔ)等，使得移動(dòng)Web應(yīng)用替代原生應(yīng)用成為可能.2015年6月，ECMA Script 6.0發(fā)布，讓 JavaScript 語(yǔ)言具備了企業(yè)級(jí)應(yīng)用的開(kāi)發(fā)能力，可以編寫(xiě)復(fù)雜的大型應(yīng)用程序[2].由于移動(dòng)Web應(yīng)用廣闊的應(yīng)用場(chǎng)景和生命力，前端框架和技術(shù)規(guī)范層出不窮，如Web pack、Grunt、Gulp、AMD、CMD等,它們?yōu)榍岸隧?xiàng)目的開(kāi)發(fā)提供了更多選擇，但也面臨著如何快速穩(wěn)定地構(gòu)建移動(dòng)Web應(yīng)用的問(wèn)題.

1 前端工程化的必要性

前端項(xiàng)目主要包括SPA項(xiàng)目、HTML模板項(xiàng)目、大前端項(xiàng)目三種形式[3].當(dāng)前Web開(kāi)發(fā)中采取的主要方式是前后端分離，前端項(xiàng)目作為獨(dú)立結(jié)構(gòu)，會(huì)經(jīng)歷開(kāi)發(fā)、測(cè)試、部署等階段.根據(jù)用戶的習(xí)慣，比如商城、資訊、社交類等應(yīng)用，移動(dòng)Web端的使用頻次已經(jīng)遠(yuǎn)超PC端.移動(dòng)端的項(xiàng)目要求更高，需要界面交互友好、功能豐富、體驗(yàn)流暢才能吸引用戶.另外，在項(xiàng)目開(kāi)發(fā)中會(huì)面臨需求經(jīng)常變化、時(shí)間要求緊急的情況，隨著第三方插件引入和團(tuán)隊(duì)多人協(xié)作的進(jìn)行，項(xiàng)目越來(lái)越復(fù)雜，難以維護(hù).為了有效應(yīng)對(duì)這些問(wèn)題、保證項(xiàng)目有序展開(kāi)，前端工程化以提升開(kāi)發(fā)效率、提高產(chǎn)品質(zhì)量、增強(qiáng)項(xiàng)目的可維護(hù)性為目標(biāo)，規(guī)范了項(xiàng)目的開(kāi)發(fā)方式，在行業(yè)內(nèi)逐漸形成了一套行之有效的技術(shù)體系.

2 前端工程化的特點(diǎn)

2.1 模塊化

模塊化思想是將大型項(xiàng)目按照功能拆分成獨(dú)立的模塊[4].每個(gè)模塊作為功能較為單一的部分，開(kāi)發(fā)難度明顯降低；拆分模塊具有高內(nèi)聚、低耦合的特點(diǎn)，能夠在項(xiàng)目中實(shí)現(xiàn)復(fù)用.模塊整合和管理通過(guò)版本控制工具(如Git)完成，因此可以讓多個(gè)研發(fā)人員并行開(kāi)發(fā)，縮短項(xiàng)目研發(fā)時(shí)間，提升開(kāi)發(fā)效率和軟件質(zhì)量.在后期的產(chǎn)品迭代中，由于模塊相對(duì)獨(dú)立，便于快速定位問(wèn)題，找出缺陷代碼，做到風(fēng)險(xiǎn)可控.

2.2 組件化

組件化與模塊化的差異主要體現(xiàn)在顆粒度上.組件相對(duì)于模塊的劃分更窄一些，它是一種特定的對(duì)象集合，并不能直接實(shí)現(xiàn)某項(xiàng)功能.

在Web前端項(xiàng)目中，組件化將頁(yè)面視為一個(gè)容器.通常頁(yè)面的組成包括Header頭部、導(dǎo)航欄、Banner欄、內(nèi)容區(qū)域、側(cè)邊欄、Footer底部等，這些部分獨(dú)立完成后拼接成完整的頁(yè)面，如圖1所示.

由于組件獨(dú)立性的特點(diǎn)，它可以是一個(gè)單獨(dú)的文件.對(duì)于內(nèi)容較為復(fù)雜的組件，還可以對(duì)應(yīng)一個(gè)工程目錄，為方便維護(hù)，其所需的資源都放在這個(gè)目錄中.在使用上，組件可以自由組合，如圖1中內(nèi)容區(qū)域部分，實(shí)際開(kāi)發(fā)中會(huì)由多條內(nèi)容子項(xiàng)(Item)組合而成.當(dāng)頁(yè)面需要修改或者維護(hù)時(shí)，組件結(jié)構(gòu)能夠極大地提升操作效率，直接刪除或替換對(duì)應(yīng)文件即可完成.

2.3 規(guī)范化

項(xiàng)目的運(yùn)行效率和穩(wěn)定可維護(hù)需要規(guī)范約束，相關(guān)要求包括結(jié)構(gòu)配置、編碼和部署三個(gè)方面.

(1)結(jié)構(gòu)配置規(guī)范

正式的前端項(xiàng)目中除了自身編寫(xiě)的代碼外，需要引入許多資源和第三方庫(kù)文件.為了有效管理和組織各種代碼、資源、文件，項(xiàng)目要制定清晰的目錄結(jié)構(gòu)；同時(shí)依賴的插件通過(guò)包管理其管理，并使用配置文件記錄，便于使用與移除.為了使目錄結(jié)構(gòu)與配置的規(guī)范順利執(zhí)行，項(xiàng)目研發(fā)中可以借助與開(kāi)發(fā)環(huán)境配套的工具執(zhí)行.

(2)編碼規(guī)范

編碼規(guī)范主要體現(xiàn)在命名規(guī)范和內(nèi)容格式規(guī)范，要求HTML、CSS、JavaScript等Web前端語(yǔ)言合理組織、使用，通常各項(xiàng)目團(tuán)隊(duì)會(huì)存在細(xì)微的差異，此處列舉約定俗成的編碼規(guī)范要求：

第一，文件(夾)的命名均不允許包含空格.

第二，所有文件，包括 .html、.css、 .js 文件，全部使用 無(wú)BOM頭 的 UTF-8 編碼.

第三，項(xiàng)目中所有源碼使用同樣的縮進(jìn)，使用 4 或者 2個(gè) spaces 視項(xiàng)目成員而定，但是必須都保持一致，推薦使用2個(gè)spaces.

ESLint是JavaScript代碼中識(shí)別和報(bào)告模式匹配的工具，應(yīng)用在項(xiàng)目中可以保證編碼規(guī)范的嚴(yán)格執(zhí)行.安裝ESLint后使用配置文件設(shè)定規(guī)則的等級(jí)，修改.eslintignore文件過(guò)濾不需要規(guī)范驗(yàn)證的文件，設(shè)置較為靈活.

(3)部署規(guī)范

在Web前端項(xiàng)目部署前，需要對(duì)源代碼進(jìn)行一系列處理，使得發(fā)布的代碼體積和數(shù)量減少，提高頁(yè)面的加載速度和安全性，具體的操作如下.

精簡(jiǎn)：刪掉代碼注釋、空白內(nèi)容，縮短語(yǔ)句，從而減少代碼體積，讓頁(yè)面的加載速度加快，在一定程度上提升用戶體驗(yàn).

混淆：針對(duì)邏輯操作代碼(如JavaScript)，將變量和函數(shù)名替換無(wú)意義的標(biāo)識(shí)(如a、b)，降低代碼的可讀性，防止通過(guò)代碼邏輯窺視系統(tǒng)結(jié)構(gòu).

壓縮：base64編碼是常用代碼壓縮方式，可以減少50%的代碼體積.服務(wù)器的gzip也能對(duì)代碼有效壓縮.

編譯：在前端項(xiàng)目的編譯包括CSS預(yù)處理器(如Stylus、Less、Sass)、ES6及以上版本，許多低版本的瀏覽器無(wú)法直接運(yùn)行，需要通過(guò)特定的工具編譯成標(biāo)準(zhǔn)的CSS、JavaScript語(yǔ)法.

3 Web應(yīng)用的工程化實(shí)現(xiàn)

根據(jù)前端工程化的要求進(jìn)行Web應(yīng)用的開(kāi)發(fā)，其工作流程從腳手架工具開(kāi)始到上線發(fā)布運(yùn)行，需要經(jīng)歷開(kāi)發(fā)、構(gòu)建、測(cè)試等環(huán)節(jié)[4].前端工程化的簡(jiǎn)化流程如圖2所示.

3.1 腳手架工具

腳手架是一種項(xiàng)目搭建工具，可以集成配置項(xiàng)目所需的ES6、Stylus等開(kāi)發(fā)環(huán)境，用來(lái)減少重復(fù)性工作.在項(xiàng)目研發(fā)中，開(kāi)發(fā)人員主要關(guān)注的是業(yè)務(wù)邏輯，而對(duì)插件或工具的配置使用可以通過(guò)“傻瓜式”的腳手架完成.

腳手架通常是基于Node.js環(huán)境，需要依賴npm工具進(jìn)行包管理，其中典型的是Vue CLI(Vue.js框架的命令行工具).使用Vue CLI創(chuàng)建項(xiàng)目時(shí)，開(kāi)發(fā)人員根據(jù)命令行的提示選擇模板、啟動(dòng)ESLint規(guī)則驗(yàn)證、使用本地服務(wù)器等操作，從而避免了webpack復(fù)雜配置，降低學(xué)習(xí)成本，極大地提升了開(kāi)發(fā)效率.

3.2 項(xiàng)目開(kāi)發(fā)構(gòu)建

在編寫(xiě)源代碼的過(guò)程中，為了驗(yàn)證功能效果是否達(dá)標(biāo)，需要通過(guò)瀏覽器調(diào)試檢驗(yàn).引入工程化方式編寫(xiě)前端代碼，其代碼源文件(如ES6、Stylus等)常常無(wú)法直接在瀏覽器運(yùn)行，需要編譯(構(gòu)建)成符合運(yùn)行標(biāo)準(zhǔn)的JavaScript、CSS形式.如果每修改一次代碼，都要手動(dòng)編譯執(zhí)行，顯然非常影響工作效率.因此，在實(shí)際的項(xiàng)目中，會(huì)使用本地服務(wù)器與構(gòu)建系統(tǒng)結(jié)合，監(jiān)聽(tīng)源代碼的修改并動(dòng)態(tài)構(gòu)建，同時(shí)控制瀏覽器刷新加載，從而幫助開(kāi)發(fā)人員流暢地調(diào)試.

在Node.js環(huán)境下，標(biāo)準(zhǔn)的本地服務(wù)器使用webpack-dev-server搭建，它提供了動(dòng)態(tài)構(gòu)建(編譯)、模塊熱替換(HMR)等功能.webpack-dev-server編譯后的文件不會(huì)寫(xiě)入磁盤(pán)，它能夠像真實(shí)文件一樣掛載到服務(wù)器的根路徑，從而加載到內(nèi)存中，加快調(diào)試效率.在webpack的配置文件中可以定義本地服務(wù)器加載的目錄、端口號(hào)、編譯完成后自動(dòng)打開(kāi)瀏覽器等，以下是典型的devServer的配置：

devServer: {

contentBase: './dist',

port: 9000,

open: false

}

3.3 項(xiàng)目測(cè)試

測(cè)試是軟件研發(fā)必不可少的一環(huán)，它能夠運(yùn)用各種技術(shù)手段，充分覆蓋用戶使用的場(chǎng)景，盡可能多地找出軟件缺陷，從而保證項(xiàng)目上線后穩(wěn)定運(yùn)行.Web前端的測(cè)試方法種類繁多，包括UI測(cè)試、功能測(cè)試、兼容性測(cè)試等等，這里僅探究與開(kāi)發(fā)人員結(jié)合較為緊密的單元測(cè)試.

單元測(cè)試(Unit Testing)是指通過(guò)編寫(xiě)程序測(cè)試源代碼的最小可測(cè)試單元，一次檢查一個(gè)獨(dú)立、明確的功能是否正常.當(dāng)前廣泛使用的前端單元測(cè)試框架是Jest，它包含斷言、Mock工具集、生成覆蓋率報(bào)告等測(cè)試工具，可支持Vue、React等框架的前端項(xiàng)目測(cè)試.通過(guò)npm命令可以安裝Jest到項(xiàng)目中：

npm install --save-dev jest

然后在package.json配置符合Jest支持的文件格式，即可編寫(xiě)測(cè)試代碼進(jìn)行單元測(cè)試：

"jest": {

"testRegex": "/test/.*.test.jsx?$"

}

3.4 部署上線

項(xiàng)目開(kāi)發(fā)完成后需要將編譯可運(yùn)行的代碼部署到指定的位置，會(huì)根據(jù)實(shí)際情況選擇不同的策略.對(duì)于單人負(fù)責(zé)的小規(guī)模項(xiàng)目，在指定服務(wù)器上搭建項(xiàng)目運(yùn)行環(huán)境后，使用FTP文件傳輸?shù)姆绞?，直接將代碼復(fù)制到服務(wù)器對(duì)應(yīng)文件目錄.多人協(xié)作的項(xiàng)目中，開(kāi)發(fā)人員使用代碼管理工具(如Git)在dev分支上編碼，功能完成后合并代碼，并由專人進(jìn)行代碼審查及部署.在功能復(fù)雜或安全性要求高的項(xiàng)目中，還需要使用權(quán)限控制的方式，對(duì)開(kāi)發(fā)人員和審查人員分工，避免開(kāi)發(fā)人員隨意修改服務(wù)器上的代碼導(dǎo)致的環(huán)境崩潰問(wèn)題.

4 移動(dòng)Web應(yīng)用的技術(shù)探究

移動(dòng)Web應(yīng)用除了遵循上述工程化規(guī)范和要求外，還要根據(jù)用戶習(xí)慣進(jìn)行布局和功能的適配操作，保證在移動(dòng)端有較好的體驗(yàn).

4.1 頁(yè)面布局的實(shí)現(xiàn)

由于手機(jī)屏幕的分辨率不同，前端代碼需要采用響應(yīng)式布局方式，讓各種屏幕下顯示效果與設(shè)計(jì)稿一致.通常在移動(dòng)端頁(yè)面中使用Viewport屬性，使其不可縮放，頁(yè)面的寬度與瀏覽器寬度相同、比例保持固定.設(shè)置代碼如下：

頁(yè)面元素單位推薦使用rem，替代原始的px.rem是一種相對(duì)長(zhǎng)度單位，參考基準(zhǔn)是font-size，能根據(jù)屏幕大小成比例地調(diào)整成實(shí)際的像素，讓內(nèi)容元素在不同的設(shè)備上效果一致.rem與px的換算公式為：

1 rem = 屏幕寬度 / 設(shè)計(jì)圖寬度 × 100 px

為了提升開(kāi)發(fā)效率，項(xiàng)目中常常會(huì)選用成熟UI框架進(jìn)行移動(dòng)端的布局，如ElementUI、Ant Design等.它們能提供統(tǒng)一且美觀的樣式，包括按鈕、圖標(biāo)、字體等，以及功能豐富的組件，如上拉刷新、下拉加載、對(duì)話框等.

4.2 常用功能實(shí)現(xiàn)

移動(dòng)端常用功能包括地理定位、拍照、多媒體等基礎(chǔ)功能，以及內(nèi)容分享、支付等高級(jí)功能.基礎(chǔ)功能的實(shí)現(xiàn)可以使用HTML5技術(shù)，如Geolocation API的etCurrentPosition(用于獲取用戶的位置信息，得到經(jīng)緯度值)，還能用于百度地圖等地圖軟件可視化展示.高級(jí)功能需要第三方庫(kù)或接口的支持，如在應(yīng)用中使用微信支付，需要調(diào)用對(duì)應(yīng)的接口，按照其業(yè)務(wù)流程操作.

5 結(jié)束語(yǔ)

本文給出了Web前端工程化的規(guī)范特點(diǎn)和實(shí)現(xiàn)方式，結(jié)合當(dāng)前流行的移動(dòng)Web應(yīng)用進(jìn)行技術(shù)探究.相比傳統(tǒng)的前端開(kāi)發(fā)方式，按照工程化的要求開(kāi)發(fā)移動(dòng)Web應(yīng)用，能夠明顯提高項(xiàng)目質(zhì)量，讓頁(yè)面加載速度更快，應(yīng)用更穩(wěn)定、安全，在技術(shù)層面上保證項(xiàng)目有序進(jìn)行.