資訊專欄INFORMATION COLUMN
摘要：一簡介是一個在前端開發中用于服務端接口的模塊，輕量簡單，無需要在本地啟動也無需其它更多的資源，僅在瀏覽器中完成請求拉截，配合完整的路由系統輕而易舉的后端。
一、簡介
faked 是一個在前端開發中用于 mock 服務端接口的模塊，輕量簡單，無需要在本地啟動 Server 也無需其它更多的資源，僅在瀏覽器中完成「請求拉截」，配合完整的「路由系統」輕而易舉的 mock 后端 API。
GitHub Rep 地址：https://github.com/Houfeng/faked
二、安裝 faked有兩種可選安裝方式，你可以通過傳統的 sciprt 方式引入 faked，如果你采用了 CommonJs 或 ES6 Modules 模塊方案，也可通過安裝 NPM Pageage 的方式安裝依賴。
通過 script 引入：
通過 npm 安裝：
$ npm i faked --save-dev
CommonJs 方式引用
const faked = require("faked");
ES6 Modules 方式引用
import faked from "faked"三、基本使用
通過 faked.when 方法你幾乎就可以使用 faked 的所有功能了，盡管 faked 還提供了一組「快捷方法」，faked.when 方法說明如下：
//指定單一 Http Method faked.when(, , ); //指定多個 Http Method faked.when( , , );
示例，模擬一個獲取用戶信息的接口，參考如下代碼：
faked.when("get","/user/{id}", function(){
this.send({name:"Bob"});
});
每一個 handler 的 this 就是當前請求上下文對象，對象有如下主要成員:
this.send(data, status, headers) 方法，用于響應一個請求，status 默認為 200
this.params 路由參數對象，用于訪問路由模式中的「路由參數」，如上邊示例中的 id
this.query 解析查詢字符串對應的對象，比如 ?name=bob 可以通過 this.query.name 訪問
this.body 請求的主體內容，通常會是一個 json 對象，它取決于發起的請求。
除了使用 send 方法，還可以直接「返回」數據，參考如下代碼：
faked.when("get","/user/{id}", function(){
return {name:"Bob"};
});
當然，在有「異步處理」時你也可以返回一個 promise 對象或像上邊那樣用 send 方法。如果你只想 mock 數據，還可以使用簡化寫法，參考如下代碼：
faked.when("get","/user/{id}", {name:"bob"});
四、快捷方法
faked 還基于 when 方法提供了一組快捷方法，對應常用的 Http Methods，包括：
get, post, put, delete, options, patch, head, copy, link, unlink, lock, unlock, view
用 faked.get 寫一個示例：
faked.get("/user/{id}",function(){
this.send({name:"Bob"});
});
其它快捷方法和 faked.get 用法完全一致。
五、路由系統在編輯 Mock API 時， faked 提供了路由支持，如上邊看到的 /user/{id}，就是一個路由「匹配模式」，其中 {id} 是一個路由參數，當多個路由同時匹配請求的 URL 時，只會觸發第一個執行，不同的 Http Method 的 URL 匹配模式可以相同，并不會沖突。路由參數還可以加「限定表達式」，參考如下代碼：
// User Id 只能是數字
faked.get("/user/{id:d+}", {name:"test"});
六、模擬網絡延時
有時候，我們希望 Mock API 能延時響應數據，以模擬「網絡延時」，faked 目前支持固定的「延時設置」，參考如下代碼：
const faked = require("faked");
//所有的請求都將被延時 2 秒種再響應用 mock 數據
faked.delay = 2000;
當 delay 設置 0 時，將禁用延時。
七、設置超時時間faked 還可設置 Mock API 的最大響應時間，這項設置存在的意義還在于「所有 Mock API 的 Handler 默認都是異步的，如果忘記「返回或 Send」一個響應結果，請求將會被一直掛起，有了超時設置，超時時將會拋出一個錯誤，方便定位問題」，參考如下代碼：
const faked = require("faked");
//在超過 8 秒未響應數據時，將會打印一個錯誤消息
faked.timeout = 8000;
超時設置和延時設置并不會相互影響，超時計算是從延時結束后開始的。
八、JSONP 處理faked 除了能 mock 常規的 ajax 和 fetch 請求，還能 mock 常常用來處理跨域問題的 jsonp 請求，faked 有兩個參數用于配置 jsonp，參考如下代碼：
//指定服務端用于獲取「回調函數名」的 「QueryString 參數」 faked.jsonp.param = "callback"; //默認值為 callback 和 jQuery 一致 //有些 jsonp 服務可能是固定了「回調函數名」，可以這樣設定 faked.jsonp.callback = "your-callbak-name";九、注意事項
faked 是一個「輔助開發」的工具，除非有特殊需要，一般情況下它不應出現在你的生產代碼中，所以需要注意：
請勿將 faked 放到「生產環境」的應用或頁面中
找一個合適的你項目的方式決定什么時引用 faked
比如，在 webpak 中，可以根據環境變量決定入口文件，并只在 mock 的入口文件中引用 faked，示例:
webpack.config.js
module.exports = {
entry: {
//根據 NODE_ENV 決定是 index.js 還是 index.mock.js
bundle: `./src/index${NODE_ENV=="mock"?".mock":""}.js`
},
output: {
path: "./dist/",
filename: `./[name]${NODE_ENV == "prod"?".min":""}.js`
},
devtool: "source-map",
module: {
loaders: [...]
},
plugins: [...]
};
然后，在 index.mock.js 中這樣寫：
require("./mock")
require("./index");
用于存放的 mock 代碼的 mock.js 可能是這樣的：
const faked = require("faked");
faked.get("/user/{id}",function(){
this.send({name:"Bob"});
});
當然，你可以根據實際情況，安排你的文或目錄結構。
-- END --
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82173.html
摘要：沙箱，第一反應，但并不是。為避免誤解，下文中所有提到都是指這個工具，不是沙箱。做什么的，根據其官網上的描述可以理解為快速生成，即時部署，協作構建并集成了調試工具。對個人而言，強烈推薦給入門的人。 Sandbox--沙箱，第一反應，但sorry并不是。 sandbox 這個詞大家并不陌生，但貌似國內的技術share中很少看到有提到這個工具的。為避免誤解，下文中所有提到sandbox都是指...
摘要：框架本身可以很好地支持自下而上的單元測試。在中，這些原因可以分為性能真實的操作，依靠定時行為及網絡活動減慢了測試隔離單元測試應把重點放在小的一塊功能成為可能，并解耦不可靠的或低依賴使用對象是擁抱和的基本組成部分。 最近在慢慢深入Backbone，也試著寫一些測試，找一些合適的文檔來學習。于是就找到了一個系列的文章 : Testing Backbone applications with...
摘要：在工作中，我們的前端工作流一般開始于前后端協商好文檔之后，再針對這個文檔做模擬數據，然后用做好的進行開發，后端開發完畢之后再改一下數據的切換到正式進行聯調如下本文介紹的一個工具或者說方法，來將這個工作流優化一下，也是我平時工作正在用的方法， 在工作中，我們的前端工作流一般開始于前后端協商好Api文檔之后，再針對這個Api文檔做mock模擬數據，然后用做好的mock進行開發，后端開發完畢...
閱讀 2582·2021-09-30 09:48
閱讀 2573·2019-08-30 14:10
閱讀 2713·2019-08-29 11:22
閱讀 1843·2019-08-26 13:51
閱讀 2282·2019-08-26 12:02
閱讀 2421·2019-08-23 16:06
閱讀 3560·2019-08-23 14:06
閱讀 1097·2019-08-23 13:56
