Mock.js
官網：鏈接地址
官方說明：
*前後端分離，讓前端工程師獨立於後端開發。
*增加單元測試的真實性，通過隨機數據，模擬各種場景。
*開發無侵入，不需要修改既有代碼，就可以攔截ajax請求，返回模擬的響應數據。
*用法簡單，符合直覺的接口。
*數據類型豐富，支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
*方便擴展，支持擴展更多數據類型，支持自定義函數和正則。
— 以上爲官網提供的說明。
最重要的是：
1.基於Html模版生成數據。
2.基於數據模版生成數據。
3.攔截ajax請求。
解決的問題：
1.數據太長了，將數據寫在js文件裏，完成後挨個改url。
2.某些邏輯複雜的代碼，加入或去除模擬數據時得小心翼翼。
3.想要儘可能還原真實的數據，要麼編寫更多代碼，要麼手動修改模擬數據。
4.特殊的格式，例如IP,隨機數，圖片，地址，需要去收集。
5.後端開發慢，調試麻煩。
等等這些，不優雅的前端都是不科學的開發方式
簡單上手指南
1.去官網安裝代碼 鏈接地址
2.開始動手寫模擬數據。
Mock.mock(‘http://g.cn‘, {
‘name’ : ‘@name()’,
‘age|1-100’: 100,
‘color’ : ‘@color’
});
3.發送請求。
ajax.post(“url”,data).then(function(){
do something….
});
4.查看返回結果。
以上就是簡單的上手指南，接下來就是更加合理的使用這個js工具來打到我們想要的效果。
使用gulp
使用gulp可以自動完成這些數據和後端接口的替換。
1.添加gulp的配置，使我們可以手動啓動開發環境或者測試環境。
gulp.task(“test”, function(cb) {
setConfig();
if (config.globel.env !== “dev”) {
config.globel.dev = false;
}
gulp.run(“clean”);
setTimeout(function() {
gulp.run(“run”);
}, 1000);
});
上面的代碼就是判斷一下當前是否在使用某個環境，這個東西可以是不同的任務，也可以是不同的配置，這樣就可以做到只需一行命令完美切換兩個不同的環境。
*開發階段使用mockjs提供假數據。
*測試調試階段使用接口提供的數據。
*所有代碼邏輯都不需要有任何改動，只要定義好接口，一切就跟預想的沒有差別。
偷偷的說一個以上版本的簡化版
在模塊化開發情況很合適！
1.在同等路徑的文件夾下建立一個interface.js。
2.把所有接口都寫在這個文件裏。
3.使用requirejs或者commonjs等插件來加載這個文件。
4.其餘邏輯不變，在沒有接口的情況下可以直接將假數據或者數據製造邏輯寫在這個文件裏。
5.只需單獨寫個debug開關，或者乾脆註釋掉這些就可以在接口和自定義數據之間切換。
這樣是不是也很簡單！