移動Web應用的前端工程化實現

蔡 兵，王嘯楠

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

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

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

1 前端工程化的必要性

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

2 前端工程化的特點

2.1 模塊化

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

2.2 組件化

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

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

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

2.3 規范化

項目的運行效率和穩定可維護需要規范約束，相關要求包括結構配置、編碼和部署三個方面.

(1)結構配置規范

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

(2)編碼規范

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

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

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

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

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

(3)部署規范

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

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

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

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

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

3 Web應用的工程化實現

根據前端工程化的要求進行Web應用的開發，其工作流程從腳手架工具開始到上線發布運行，需要經歷開發、構建、測試等環節[4].前端工程化的簡化流程如圖2所示.

3.1 腳手架工具

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

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

3.2 項目開發構建

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

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

devServer: {

contentBase: './dist',

port: 9000,

open: false

}

3.3 項目測試

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

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

npm install --save-dev jest

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

"jest": {

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

}

3.4 部署上線

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

4 移動Web應用的技術探究

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

4.1 頁面布局的實現

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

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

1 rem = 屏幕寬度 / 設計圖寬度 × 100 px

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

4.2 常用功能實現

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

5 結束語

本文給出了Web前端工程化的規范特點和實現方式，結合當前流行的移動Web應用進行技術探究.相比傳統的前端開發方式，按照工程化的要求開發移動Web應用，能夠明顯提高項目質量，讓頁面加載速度更快，應用更穩定、安全，在技術層面上保證項目有序進行.