蔡 兵，王嘯楠

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

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

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

1 前端工程化的必要性

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

2 前端工程化的特點

2.1 模塊化

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

2.2 組件化

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

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

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

2.3 規(guī)范化

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

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

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

(2)編碼規(guī)范

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

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

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

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

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

(3)部署規(guī)范

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

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

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

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

編譯：在前端項目的編譯包括CSS預處理器(如Stylus、Less、Sass)、ES6及以上版本，許多低版本的瀏覽器無法直接運行，需要通過特定的工具編譯成標準的CSS、JavaScript語法.

3 Web應用的工程化實現(xiàn)

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

3.1 腳手架工具

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

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

3.2 項目開發(fā)構(gòu)建

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

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

devServer: {

contentBase: './dist',

port: 9000,

open: false

}

3.3 項目測試

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

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

npm install --save-dev jest

然后在package.json配置符合Jest支持的文件格式，即可編寫測試代碼進行單元測試：

"jest": {

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

}

3.4 部署上線

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

4 移動Web應用的技術(shù)探究

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

4.1 頁面布局的實現(xiàn)

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

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

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

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

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

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

5 結(jié)束語

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