jQuery 源码基本框架

时间:2022-01-23 16:17:52

抽丝剥茧, 7000+ 行的 jQuery 源码基本可以概括为以下的伪代码

(function (window, undefined) {
//将 document 封装成 jQuery 对象并缓存
var rootjQuery, //dom ready 事件的委托队列
readyList, //快速地识别 html 标记 如 <div> 或者 #id
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/, jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context, rootjQuery);
}; jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function (selector, context, rootjQuery) { // $(""), $(null), $(undefined), $(false)
if (!selector) {
return this;
} var match = rquickExpr.exec(selector); // $('<div></div>')
jQuery.parseHTML(match[1])
return this; // $(#id)
return document.getElementById(selector); // $('.class'), $('.class', context), $('#class', context)
// 其中 context 是jQuery元素
return (context || rootjQuery).find(selector); // $('.class', domElm)
return this.constructor(context).find(selector); // selector is function
return rootjQuery.ready(selector); return jQuery.makeArray(selector, this);
},
ready: function (fn) {
// Add the callback
jQuery.ready.promise().done(fn); return this;
}
} jQuery.init.prototype = jQuery.fn; jQuery.extend = jQuery.fn.extend = function () {
}; rootjQuery = jQuery(document); // Sizzle 代码
(function (window, undefined) { function Sizzle(selector, context, results, seed) {
if (support.qsa) {
return querySelectorAll(selector)
} return select(selector.replace(rtrim, "$1"), context, results, seed);
} function select(selector, context, results, seed) {
var match = tokenize(selector);
} function tokenize(selector, parseOnly) { } jQuery.find = Sizzle;
})(window); // 对 jQuery 对象的扩展
jQuery.extend({}); // 对 jQuery.fn 对象的扩展
jQuery.fn.extend({}); window.$ = window.jQuery = jquery; })(window);