本文将为关注织梦者的朋友提供的是的第五节：JQuery框架源码简析（1）相关教程，具体实例代码请看下文:
（转自老惠的博客）
JQuery是一个应用广泛、非常优秀的JavaScript框架，其代码简洁而优雅，有很多值得我们学习的地方。这里仅仅对其代码结构做一个简单的分析，方便大家的理解和学习。
我们进行分析、分解的基准版本是jQuery1.7.1。
开始之前，请准备好以下素材和工具：
jQuery源代码：jquery-1.7.1.js
文本编辑器：EditPlus，或者你喜欢的
参考书：《jQuery高级编程》、《jQuery技术内幕：深入解析jQuery架构设计与实现原理》、《JavaScript框架设计》
1、主体结构
jQuery的所有代码都在一个自调用匿名函数中，该函数构造一个jQuery对象，并初始化jQuery的各个模块，最后创建了$和jQuery命名空间，实现了框架代码和其他代码的隔离。
创建文件jquery.main.js，代码含义请看注释。
// 整体结构
(function(window,undefined){
var jQuery = (function(){
var jQuery = function(selector, context){
// 调用init方法创建jQuery对象
return new jQuery.prototype.init(selector, context,rootjQuery);
};
// 临时变量
var _$ = window.$;
var _jQuery = window.jQuery;
var rootjQuery;
var toString = Object.prototype.toString;
// 初始化jQuery对象
// 。。。
return jQuery;
})();
// 初始化jQuery各个模块
// 。。。
window.$ = window.jQuery = jQuery;
})(window);
创建测试文件jquery.test.html。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery.main.js"></script>
<title>jquery demo</title>
</head>
<body>
<script>
alert($);
</script>
</body>
</html>
执行结果：
说明jQuery的命名空间$，或者jQuery（alert(jQuery)）是个函数，该函数执行后，返回一个jQuery对象。现在我们执行测试代码$()：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery.main.js"></script>
<title>jquery demo</title>
</head>
<body>
<script>
$();
</script>
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
