职责链模式（Chain of Responsibility）
解决请求的发送者与请求的接受者之间的耦合，通过职责链上的多个对象对分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。
分解需求
把一个
半成品的需求分解为要基于那些功能模块去实现，各自负责各自的职责，提高实现需求的颗粒度
例如一个请求渲染的需求
分模块细化颗粒度
// data.json
{
"code": 200,
"data": {
"name": "Lee",
"age": 18
},
"msg": "ok"
}
第一站 —— 请求模块
/**
* 异步请求对象（简化版本）
* @param {string} url 请求地址
* @param {string} type 请求类型
* @param {object} data 请求数据
*/
const request = function (url, type, data) {
// XHR对象 简化版本 IE另行处理
var xhr = new XMLHttpRequest();
// 请求返回事件
xhr.onload = function (event) {
// 请求成功
if (xhr.status === 200) {
console.log(xhr);
success(xhr.response);
}
// 请求失败
else {
fail(xhr.statusText);
}
};
// 拼接请求字符串
url += '?';
for (let key in data) {
url += key + '=' + data[key] + '&';
}
// 发送异步请求
xhr.open(type, url, true);
xhr.send(null);
};
下一站 —— 响应数据适配模块
/**
* 成功的回调
* @param {object} res
*/
function success(res) {
let {
data } = JSON.parse(res);
render(data);
}
/**
* 失败的回调
* @param {string} err
*/
function fail(err) {
console.log(err);
}
终点站 —— 创建组件模块
/**
* 渲染数据 `<label>Lee: </label><span>18</span>`
* @param {object} data 响应数据
*/
function render(data) {
const label = document.createElement('label');
label.innerText = data.name + ': ';
const span = document.createElement('span');
span.innerText = data.age;
document.body.appendChild(label);
document.body.appendChild(span);
}
request('./data.json', 'GET', {
id: 'abc' });
单元测试
解决目前请求接口地址未提供问题
success(JSON.stringify({
"code": 200,
"data": {
"name": "Tom",
"age": 24
},
"msg": "ok"
}));
