对象的封装
有使用我们引入的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对象
原文地址：https://www.cnblogs.com/Scorpicat/p/12248231.html
时间： 2024-11-09 07:09:34