jQuery源码的结构
(function( window, undefined) {
var jQuery = (function() {
// 构建jQuery对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
// jQuery对象原型
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function ( selector, context, rootjQuery ) {
}
};
// 合并内容到第一个参数中，后续大部分功能都通过该函数扩展
// 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数
jQuery.extend = jQuery.fn.extend = **function**() {};
// 在jQuery上扩展静态方法
jQuery.extend({
});
// 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
下面是模拟jQuery实现简单的获取元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="testText">
测试文本
</div>
</body>
<script>
(function (window, undefined) {
var rootjQuery = window.document;
var jQuery = (function () {
var jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context, rootjQuery);
}
jQuery.fn = jQuery.prototype = {
construct: jQuery,
init: function (selector, context, rootjQuery) {
var that = this;
that.ele = null;
that.value = '';
if (selector.charAt(0) === '#') {
console.log(selector);
that.ele = document.getElementById(selector.slice(1));
}
that.getValue = function () {
that.value = that.ele ? that.ele.innerHTML : 'No value';
return that;
};
that.showValue = function () {
return that.value;
};
}
};
jQuery.fn.init.prototype = jQuery.fn;
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
//测试
var testText = $('#testText').getValue().showValue(); //
alert(testText);
</script>
</html>
结论
所以，JQuery 其实就是在一个匿名自调用函数内来实现把JQuery 作为 window 对象的方法，这样，当我们想使用 JQuery 的时候，就可以通过 window.JQuery() 或 window.$() 来使用，因为 window 对象的属性和方法都是全局的，所以也可以简写为 JQuery() 或 $()。
网友评论