最近回顧了下AOP——面向切面編程，剛好項目有需要用到终吼，就使用了一下镀赌，感覺效果不錯，代碼貼出來际跪，請拍磚商佛。
主要用到的就是裝飾器特性。
主要目的是在實例test.request方法調(diào)用后姆打，自動順序執(zhí)行components和log方法
export function after(...args) {
return (_target, name, descriptor) => {
// 獲取value良姆，其實就是request函數(shù)
const oldValue = descriptor.value;
// 將value重新賦值一個函數(shù)
descriptor.value = async function () {
// tslint:disable-next-line: no-console
console.log(`Calling ${name} with`, arguments);
// 將原本的函數(shù)執(zhí)行一下,apply改變this的指向
const val = await oldValue.apply(this, arguments)
let result = val;
for (const callback of args) {
result = (await callback(this, result, ...arguments)) || result
}
return result;
};
return descriptor;
}
}
export default class Test {
@after(components, log)
public async request(url, params) {
const res = _ajax(url,params); // 異步請求示例
return res
}
}
export function components(target: any, data: any, ...args){
// target 是 Test對應(yīng)實例對象
// data 是每次函數(shù)調(diào)用返回的結(jié)果，第一次接收的是 request 函數(shù)返回的值幔戏，默認(rèn)值
// args 是request函數(shù)的參數(shù)
}
export function log(target: any, data: any, ...args){
// 同上玛追，此處data理論上是components返回的值，若components無返回值闲延，則是request返回的默認(rèn)值
}
博客遷移新地址：點擊前往
大前端知識庫收集分享 www.190tech.site 壹玖零Tech
搜羅各種前后端奇淫技巧痊剖，花式編程思想韩玩，日日更新，速來圍觀吧...
