• 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对象
    

      

  • 相关阅读:
    arthas Java诊断工具
    tomcat结构 请求处理过程 和 常见参数
    Dubbo 测试用例 获取注册中心的其他服务
    Vue3 父子组件传值,defineProps,defineEmits,以及父组件调用子组件的方法 defineExpose
    Snowflake
    js中Array和Object的keys(),values()和entries()方法
    深度拷贝
    deepin系统解决增删改文件没有变化
    文献的类别与引用方式
    读万卷书不如行万里路
  • 原文地址:https://www.cnblogs.com/Scorpicat/p/12248231.html
Copyright © 2020-2023  润新知