JavaScript中的"AOP"编程

最新推荐文章于 2025-04-01 17:59:31 发布

最新推荐文章于 2025-04-01 17:59:31 发布 · 120 阅读

文章标签：

#编程 #AOP #JavaScript #ViewUI

前台技术专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript模拟面向切面编程(AOP)的方法，通过重写onblur事件实现了对原有事件的增强。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近来需要对系统的页面录入部分进行优化，具体需要在每个录入框增加一个onblur事件，因为涉及的地方很多，并且有的录入框已经存在onblur事件，如果全部动态增加的话，存在一个无法控制两个onblur事件函数执行顺序的问题。如果JavaScript也有java中的AOP的话那所有的问题就迎刃而解，下面就模仿AOP的思想实现一个JavaScript中的"AOP"

代码如下

<input type="text" onBlur="alert('原先的事件函数');">

<script type="text/javascript">
   
    //处理所有，先判断是否为空
	function init(){
		var ls = document.getElementsByTagName("input");
		for(var i=0;i<ls.length;i++){
			//替换原来blur操作
			if(typeof(ls[i].onblur) =="function"){
				ls[i].oldBlurFn = ls[i].onblur;
				ls[i].onblur = myBlurHandler;
			}
		}
	}
	//自己的blur处理;
	function myBlurHandler(){
		if(event.srcElement.value=="")return;
		 before();
		event.srcElement.oldBlurFn.apply(event.srcElement,[event]);
		after();
	}
	function before(){
	   alert("在原事件前执行before函数");
	}
	function after(){
	   alert("在原事件后执行after函数");
	}
	window.attachEvent("onload",init);

</script>