jQuery入口函数的实现机理

据说jQuery是一个22岁的 小伙子写的,听了不由得竖起大拇指。为什么jQuery可以如此的简化javascript代码呢,那么今天先从入口函数说起。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery入口函数实现机理</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
		<script>
//			$(document).ready(function(){});
//          jQuery(document).ready(function(){});
//          $(function(){});
			
			// 3.函数实现
			
			var JQuery = function (dom){
				var obj = {
					ready:function(func){
						  // 判断一下 docuemnt.onload 有没有被赋值(或者说有没有这个事件)
                    	// 1.有:接收一个旧的函数,然后呢,我先去调用新的函数,接着再调用旧的函数
                       // 2.没有:直接赋值个onload事件
						if(typeof dom.onload == "function"){
							var firstFun = dom.onload;
							dom.onload = function(){
								// 函数调用
								func();
								firstFun();
							}
						}else{
							dom.onload = func;
						}
					}
				};
				return obj;
			};
			// 1.仿jQuery写法
			JQuery(window).ready(function(){
				alert("Hello jQuery");
			});
			// 2.再写一遍
			JQuery(window).ready(function(){
				alert("锋利的jQuery");
			});
		</script>
	</head>
	<body>
	</body>
</html>

以上注释相当清楚了,我想对于机制的你来说,不在话下吧。如有不同看法或者好的想法可以留言交流。

猜你喜欢

转载自blog.csdn.net/qq_36818627/article/details/81676422