javascript 闭包 -- 函数

最新推荐文章于 2023-01-17 12:27:21 发布

D_MIC

最新推荐文章于 2023-01-17 12:27:21 发布

阅读量578

点赞数

分类专栏： javascript 文章标签： javascript function button jsp null html

本文链接：https://blog.csdn.net/D_MIC/article/details/7715535

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

javascript初学者一般将dom函数的设置写成这个样子，随着技能的提高，代码越来越精炼

<html>
<head></head>
<body>
<script>
function test(va)
{
   alert(va);
}


</script>

<input type = 'button' onclick = test('jsp输出') value = 'aaa'>
</body>
</html>

后来 ------ （‘jsp输出’ 可能是特殊字符）

<html>
<head></head>
<body>
<script>
function test(va)
{
   alert(va.name);
}


</script>

<input type = 'button' onclick = test(this) value = 'aa' name = "jsp 输出">
</body>
</html>

再后来 ----- (javascrip 代码和 html 分离)

<html>
<head></head>
<body>



<input id = 'testid' type = 'button' value = 'aa' name = "jsp 输出">

<script>
function $(id)
{
   return document.getElementById(id)
}

$('testid').onclick = function()
{
    alert(this.name)
}

</script>
</body>
</html>

再后来

<html>
<head></head>
<body>



<input id = 'testid' type = 'button' value = 'aa' name = "jsp 输出">

<script>
function $(id)
{
   return document.getElementById(id)
}

$('testid').onclick = function()
{
    alert('this.name')
}

//添加部分
var f = $('testid').onclick

$('testid').onclick = function()
{
	alert('begin');
	f();
	alert('end');
}

</script>
</body>
</html>

再后来 ---------------- (公共代码处理)

<html>
<head></head>
<script>

</script>
<body>

<input id = 'testid' type = 'button' value = 'aa' name = "jsp 输出">

<script>
function InitJsp()
{
	var f = document.body.onload;
	
	document.body.onload = function()
	{
		if(f != null)
		{
			f();
		}
		if(loadjsp != null)
		{
			loadjsp();
		}
		
	}

}

InitJsp();

function $(id)
{
   return document.getElementById(id)
}

$('testid').onclick = function()
{
    alert('this.name')
}


function loadjsp()
{
	//添加部分
	var f = $('testid').onclick

	$('testid').onclick = function()
	{
		alert('begin');
		f();
		alert('end');
	}
}


</script>
</body>
</html>

在后来

<html>
<head></head>
//script 引用
//公共jsp引用  （调用InitJsp();）
<script>

</script>
<body>

<input id = 'testid' type = 'button' value = 'aa' name = "jsp 输出">

<script>

$('testid').onclick = function()
{
    alert('this.name')
}


function loadjsp()
{
	//添加部分
	var f = $('testid').onclick

	$('testid').onclick = function()
	{
		alert('begin');
		f();
		alert('end');
	}
}


</script>
</body>
</html>

上述javascript在运行中动态修改相应函数的方式，看似炫技，在必要的情况下却能发挥很强大的力量。

比如笔者曾经遇到这样非常常见的需求：

1.每个表单元素(如文本输入框，密码输入框等)在失去焦点事需要对其数据进行校验，如用户名是否长度超长，

是否有不允许存在的字符等。如果校验成功，则在表单元素后显示一个绿色的图片表示正确，如果校验不成功则在显示一个红色的图片。

2.在1的基础上，有些字段如果校验成功则需进一步进行ajax校验，如用户名。需要用ajax在数据库中校验是否存在相同的用户名，如果

校验成功，则在表单元素后显示一个绿色的图片表示正确，如果校验不成功则在显示一个红色的图片。

因为项目这样中用到表单提交的地方非常多，这样的校验需要写成通用的校验函数才能节省开发时间，否则一个小小的需求变动

会引发大面积的修改，怎样只增加一两行代码就能实现上述功能，而且后续的需求修改不会引发大面积的修改？

D_MIC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 闭包 -- 函数

javascript初学者一般将dom函数的设置写成这个样子，随着技能的提高，代码越来越精炼function test(va){ alert(va);}后来 ------ （‘jsp输出’ 可能是特殊字符）function test(va){ alert(va.name)
复制链接

扫一扫