企業(yè)內(nèi)網(wǎng)環(huán)境中基于Mock.js的前端應(yīng)用獨(dú)立調(diào)試方法

秦子實(shí)

摘要：在企業(yè)內(nèi)網(wǎng)環(huán)境中，前端應(yīng)用與后端服務(wù)之間的聯(lián)合調(diào)試過程一直存在著過程煩瑣、效率較低等問題。因此，在企業(yè)內(nèi)網(wǎng)的開發(fā)環(huán)境中，需要一種能夠?qū)η岸藨?yīng)用進(jìn)行獨(dú)立開發(fā)、測(cè)試、調(diào)試的方法。該方法應(yīng)當(dāng)具備良好的可拓展性，能夠監(jiān)聽并選擇性攔截前端請(qǐng)求，并能夠返回自定義的響應(yīng)。該文將繞過傳統(tǒng)的搭建mock server的方式，通過直接將Mock.js集成在前端應(yīng)用中處理請(qǐng)求并返回響應(yīng)，給出一種能夠獨(dú)立調(diào)試前端應(yīng)用的方法及過程實(shí)踐。

關(guān)鍵詞：企業(yè)內(nèi)網(wǎng)；前端應(yīng)用；mockjs；Ajax

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）17-0054-03

1 概述

隨著React、Vue、Angular等前端框架的成熟，越來越多的B/S項(xiàng)目選擇使用此類基于前端框架作為前端應(yīng)用的核心，然而此類框架也帶來一個(gè)問題——復(fù)雜的包依賴關(guān)系。由于企業(yè)業(yè)務(wù)的多樣化，基于前端框架的應(yīng)用研發(fā)通常涉及如模型狀態(tài)管理、異步請(qǐng)求管理、前端組件管理、數(shù)據(jù)可視化繪制等功能，這些功能通常以npm包的形式通過Node包管理系統(tǒng)分發(fā)。在企業(yè)內(nèi)網(wǎng)環(huán)境下，這種帶有依賴關(guān)系的樹形結(jié)構(gòu)的安裝調(diào)試較為煩瑣，因此，應(yīng)當(dāng)在互聯(lián)網(wǎng)上完成整套前端代碼的開發(fā)與測(cè)試，再將測(cè)試完成的前端應(yīng)用一次性打包部署在企業(yè)內(nèi)網(wǎng)環(huán)境中。

該文介紹了將Mock.js直接集成在前端發(fā)環(huán)境中的方法，通過Mock.js模擬隔離內(nèi)網(wǎng)環(huán)境中的后端服務(wù)器，為前端應(yīng)用模擬自定義響應(yīng)數(shù)據(jù)。

2 Mock.js技術(shù)簡(jiǎn)介

Mock.js是一款在前端應(yīng)用研發(fā)中攔截Ajax請(qǐng)求并返回自定義隨機(jī)數(shù)據(jù)響應(yīng)的工具，可以用來模擬后端服務(wù)器的響應(yīng)。Mock.js與傳統(tǒng)的前端應(yīng)用研發(fā)時(shí)搭建mock server的方式有很大不同，傳統(tǒng)的mock server具有以下特點(diǎn)：

優(yōu)點(diǎn)：通常會(huì)采用一個(gè)簡(jiǎn)化的后端服務(wù)器，通過接收http請(qǐng)求，處理數(shù)據(jù)，最終返回響應(yīng)數(shù)據(jù)，因此能夠更加真實(shí)的模擬后端環(huán)境；

缺點(diǎn)：搭建后端服務(wù)器代價(jià)較大，對(duì)開發(fā)環(huán)境有較高要求，在企業(yè)內(nèi)網(wǎng)的隔離開發(fā)環(huán)境中難以實(shí)現(xiàn)，在遇到接口變更時(shí)需要重新編寫后端代碼；

在企業(yè)內(nèi)網(wǎng)的隔離環(huán)境中，mock server并不能有效地模擬真實(shí)環(huán)境的響應(yīng)數(shù)據(jù)，這直接降低了前端獨(dú)立開發(fā)的效率，并且進(jìn)一步提升了前、后端聯(lián)合調(diào)試的煩瑣程度。

而Mock.js通常直接集成在前端應(yīng)用中，攔截Ajax的請(qǐng)求，并通過預(yù)定義的模板生成隨機(jī)的響應(yīng)數(shù)據(jù)，整個(gè)“請(qǐng)求發(fā)送-數(shù)據(jù)處理-響應(yīng)接收”的過程均在瀏覽器端完成。由于Mock.js與前端均采用JavaScript，并且支持部署時(shí)一鍵切換為真實(shí)API的特性，這種非入侵式的輕量級(jí)后端服務(wù)器數(shù)據(jù)模擬技術(shù)能夠極大的提高前端應(yīng)用開發(fā)效率。

3 項(xiàng)目結(jié)構(gòu)

該文以基于React框架的Ant Design項(xiàng)目為例組織代碼，使用mock.js攔截并模擬響應(yīng)數(shù)據(jù)[1]：

3.1 Ant Design項(xiàng)目結(jié)構(gòu)

在Ant Design項(xiàng)目中，一個(gè)由用戶觸發(fā)的前端交互到服務(wù)端處理的完整流程為：

3.2 Mock.js環(huán)境準(zhǔn)備

在前端項(xiàng)目中使用Mock.js，首先需要使用npm在Node中安裝并保存：

接著在項(xiàng)目中引入Mock.js并測(cè)試當(dāng)前環(huán)境中的瀏覽器支持：

4 Mock.js的項(xiàng)目應(yīng)用

在Ant Design項(xiàng)目中使用Mock.js模擬后端服務(wù)器數(shù)據(jù)響應(yīng)有兩種常用方法：直接編寫mock函數(shù)、將mock函數(shù)組織為mock文件：

4.1 編寫mock函數(shù)

項(xiàng)目根目錄下的.roadhogrc.mock.js文件是項(xiàng)目mock服務(wù)的總?cè)肟?，?duì)于較小的項(xiàng)目，可以直接在此文件中編寫mock函數(shù)：

這種方法簡(jiǎn)單易行，可以在一個(gè)文件中將項(xiàng)目中的所有mock函數(shù)管都理起來。但對(duì)于大型項(xiàng)目而言，將過多的mock函數(shù)放在同一個(gè)文件中并不符合軟件工程的規(guī)范。

4.2 編寫mock文件

在大型前端項(xiàng)目中，通常涉及到多個(gè)場(chǎng)景、不同的業(yè)務(wù)模型、復(fù)雜的接口調(diào)用，在這種項(xiàng)目中，通常將.roadhogrc.mock.js作為入口函數(shù)，統(tǒng)一管理mock文件。而mock文件通常以業(yè)務(wù)模型為單位組織mock函數(shù)，所有mock文件均放在mock目錄下。

作為入口的.roadhogrc.mock.js中不再需要編寫mock函數(shù)，只需要在'./src/mock'文件夾中編寫所有包含mock函數(shù)的JavaScript文件。一般的，mock文件以模塊為單位組織，每個(gè)模塊對(duì)應(yīng)的mock文件與模塊同名，便于管理。如users模塊的mock文件為'./src/mock/users.js'。在mock文件中，可以編寫邏輯較為復(fù)雜的mock函數(shù)，以用戶模塊為例，一個(gè)包括用戶用戶登錄、用戶注銷、用戶信息修改功能的mock文件可以編寫為：

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

該文介紹了在企業(yè)內(nèi)網(wǎng)的隔離環(huán)境中，基于Mock.js庫(kù)的前端應(yīng)用獨(dú)立調(diào)試方法及實(shí)踐。該方法不需要額外的后端mock server配合，只需在前端項(xiàng)目中引入mockjs庫(kù)，便可以在瀏覽器中完成所有mock server的響應(yīng)模擬?；贛ock.js的前端獨(dú)立調(diào)試方法極大地提高了企業(yè)內(nèi)網(wǎng)環(huán)境中前端應(yīng)用的開發(fā)迭代效率，是一種易于實(shí)踐的開發(fā)調(diào)試技巧。