js mock有什么優(yōu)點(diǎn)

本篇內(nèi)容主要講解“js mock有什么優(yōu)點(diǎn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“js mock有什么優(yōu)點(diǎn)”吧!

　　mock解決的問題，開發(fā)時(shí)，后端還沒完成數(shù)據(jù)輸出，前端只好寫靜態(tài)模擬數(shù)據(jù)。數(shù)據(jù)太長(zhǎng)了，將數(shù)據(jù)寫在js文件里，完成后挨個(gè)改url。某些邏輯復(fù)雜的代碼，加入或去除模擬數(shù)據(jù)時(shí)得小心翼翼。想要盡可能還原真實(shí)的數(shù)據(jù)，要么編寫更多代碼，要么手動(dòng)修改模擬數(shù)據(jù)。特殊的格式，例如IP,隨機(jī)數(shù)，圖片，地址，需要去收集。

　　mock優(yōu)點(diǎn)

　　1、前后端分離

　　讓前端工程師獨(dú)立于后端進(jìn)行開發(fā)。

　　2、增加測(cè)試的真實(shí)性

　　通過隨機(jī)數(shù)據(jù)，模擬各種場(chǎng)景。

　　3、開發(fā)無侵入

　　不需要修改既有代碼，就可以攔截Ajax請(qǐng)求，返回模擬的響應(yīng)數(shù)據(jù)。

　　4、用法簡(jiǎn)單

　　符合直覺的接口。

　　5、數(shù)據(jù)類型豐富

　　支持生成隨機(jī)的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等。

　　6、方便擴(kuò)展

　　支持支持?jǐn)U展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則。

　　7、在已有接口文檔的情況下，我們可以直接按照接口文檔來開發(fā)，將相應(yīng)的字段寫好，在接口完成之后，只需要改變url地址即可。

　　8、不涉及跨域問題，

　　mock案例demo

　　1.首先需要下載安裝mockjs模塊

　　cnpminstallmockjs-S

　　2.然后可以在scr下創(chuàng)建一個(gè)文件夾，用于存放模擬的數(shù)據(jù)的文件例如/src/mock/index.js,在這個(gè)文件中

　　復(fù)制代碼

　　constMock=require("mockjs");

　　letdata=Mock.mock({

　　"data|100":[//生成100條數(shù)據(jù)數(shù)組

　　{

　　"shopId|+1":1,//生成商品id，自增1

　　"shopMsg":"@ctitle(10)",//生成商品信息，長(zhǎng)度為10個(gè)漢字

　　"shopName":"@cname",//生成商品名，都是中國(guó)人的名字

　　"shopTel":/^1(5|3|7|8)[0-9]{9}$/,//生成隨機(jī)電話號(hào)

　　"shopAddress":"@county(true)",//隨機(jī)生成地址

到此，相信大家對(duì)“js mock有什么優(yōu)點(diǎn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！