jQuery入口函数的实现机理

最新推荐文章于 2025-05-24 16:32:18 发布

敲出真谛

最新推荐文章于 2025-05-24 16:32:18 发布

阅读量513

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/qq_36818627/article/details/81676422

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个简单的示例解释了jQuery的入口函数是如何工作的，并提供了一个仿jQuery的实现方式，帮助读者理解页面加载完成后如何执行回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

据说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>

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