对象的封装
有使用我们引入的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对象