js-AOP编程的个人理解

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的一个使用。后续如果碰到其他典型案例会继续更新该博文。

如果有更方便的写法欢迎来讨论，让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力