24 jQuery——对象的封装闭包匿名自调用函数

Posted scorpicat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了24 jQuery——对象的封装闭包匿名自调用函数相关的知识,希望对你有一定的参考价值。

对象的封装

有使用我们引入的js文件中的对象非常非常多,js一旦变量名重复就会覆盖。为了解决这一问题,我们使用对象封装。

我们引入的js工具(代码)不会覆盖我们自己写的对象。这是因为它使用了封装与闭包。

就好像java中引入的工具,虽然方法名和我们自己写的方法名重复,但并不会覆盖,因为我们在使用引入的方法时,通常在前面类名点方法名的形式。

js也一样。js使用闭包封装好工具,只返回一个函数名,我们使用函数名.对象的方式调用提供的方法即可。

闭包

简单的理解为:函数里面有函数,返回函数中的函数对象。

如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function getKnife(){
				var knife={}
				knife.kan = function(){
					alert("我砍")
				}
				knife.ci = function(){
					alert("我刺!")
				}
				return knife
			}
		</script>
		<input type="button" value="砍它" onclick="getKnife().kan()"/>
		<input type="button" value="刺它" onclick="getKnife().ci()"/>
	</body>
</html>

  

好了其它代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 声明js代码域 -->
		<script type="text/javascript">
			function test(){
				alert("我是test")
			}
		</script>
		<script type="text/javascript" src="my.js">	</script>
	</head>
	<body>
		<h3>jQUery的封装原理</h3>
		<hr>
		<input type="button" onclick="test()" value="测试test">
		<ul>
			<li>1.js的全局代码区只有一个:无论是引入的还是html中写的多个js代码块,都会合成一个js文件到内存中</li>
			<li>所以同名变量(函数等)会覆盖。</li>
			<li><input type="button" onclick="xiaohei.test()" value="测试">
			2.使用对象封装,将代码封装到对象中(查看my.js文件中对象:xiaohei),但对象也可以被覆盖,内容全部失效。为了解决这个问题,查看3</li>
			<li><input type="button" onclick="getXiaohei().test()" value="测试">
			3.使用工厂模式,将需要用的东西写到一个函数中(查看my.js文件。但问题并没有完全解决)</li>
			<li>
			4.将封装的函数名去除,引出新问题:	函数没有办法调用,解决方法看5
			</li>
			<li>5.使用匿名自调用,可以再页面加载的时候调用一次,但不能重复调用,解决方法看6</li>
			<li><input type="button" onclick="test()" value="测试">
			6.使用闭包</li>
		</ul>
	</body>
</html>

  

my.js

//声明对象
var xiaohei={}
xiaohei.test = function(){
	alert("我是外部js文件的test函数")
}
//使用工厂模式
function getXiaohei(){
	var xiaohei={}
	xiaohei.test = function(){
		alert("工厂模式的test函数")
	}
	return xiaohei;
}	
// 匿名自调用:只能存在一个匿名自调用
(function(){
	alert("匿名自调用")
	return "你好";
})()

//使用闭包
// (function(obj){
// 	obj.test = function(){
// 		alert("我是闭包创建的test");
// 	}
// }
// )(window)
//传window对象,当这个匿名函数执行时,window获得一个test对象

  

以上是关于24 jQuery——对象的封装闭包匿名自调用函数的主要内容,如果未能解决你的问题,请参考以下文章

自调用匿名函数(匿名闭包)解析与调用

自调用匿名函数(匿名闭包)解析与调用

浅析PHP中的闭包和匿名函数

PHP匿名函数和闭包

PHP中的闭包和匿名函数

php的闭包