AOP面向切片编程,第一次看到这个的时候我看到最多的就是java里怎么怎么用、python里怎么怎么用,很少有前端js里怎么怎么用。感情这东西我们前端用不起?
我就各方面查询了下这个AOP到底是想完成什么效果。给我的感觉就是执行某个方法前执行个啥啥啥,执行某个方法后执行个啥啥啥。
那我们就开始干。我的初步预想的场景是:
let username = "置酒天晴"
提交事件(){
if(username==""){
console.log("请输入用户名")
return false
}
axios.get('url',{
params:{
name:username
}
}).then(res=>{
this.username=""
console.log("完成任务!下班!")
}).catch(err=>{
console.log("我的代码不可能有问题,都是后端的问题")
})
}
提交事件()
如果能把冗长的判空校验都放到别的地方岂不是美滋滋?开搞
let username = "置酒天晴"
提交事件(){
axios.get('url',{
params:{
name:username
}
}).then(res=>{
this.username=""
console.log("完成任务!下班!")
}).catch(err=>{
console.log("我的代码不可能有问题,都是后端的问题")
})
}
function aop(originFun, before) {
return function() {
before.apply(this, arguments);
originFun.apply(this, arguments);
}
}
提交事件 = aop(提交事件,function(){
if(this.username==""){
console.log("请输入用户名")
throw "stop"
}
})
提交事件()
好像可以哈,但是写的麻烦了。一个提交搞得跟小作文似得……丢人。
处世未深的我选择了最后的挣扎:
let username = "置酒天晴"
提交事件(){
const _this=this;
axios.get('url',{
params:{
name:username
}
}).then(res=>{
_this._after()
console.log("完成任务!下班!")
}).catch(err=>{
console.log("我的代码不可能有问题,都是后端的问题")
})
}
提交事件._before = function() {//判空 判字段值合法性等
if (username == "") {
console.log("用户名为空")
throw "stop"//终端执行
}
this()
}
提交事件._after = function() {//方法执行完后清空或暂存表单数据等
username = 0
}
提交事件._before()
因为没有太多的在项目上使用AOP形式的函数规划,所以摸索到的方便开发的场景还未涉及太多。以上就是我在前端领域AOP的一个使用。后续如果碰到其他典型案例会继续更新该博文。
如果有更方便的写法欢迎来讨论,让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注,您的赞与关注将是我源源不断的前进动力