前端开发系列073-JQuery篇之源码核心
本文介绍jQuery 源码的主体结构和关键细节。
jQuery是前端开发中绕不开的一个框架，在React和Vue等框架出现前，jQuery无疑是前端开发主流技术栈中不可或缺的框架。它为我们提供了强大的DOM操作、可靠的事件处理机制、简单的动画特效、完善的Ajax网络请求、好用的工具方法以及超前的链式调用等能力，阅读jQuery框架的源码是必要的。
总体来说，jQuery框架的源码并不复杂，主要几个版本的代码都保持在1W行左右的水准，下面列出jQuery框架最核心的结构。
/* 001-外层是闭包(立即执行函数) */
(function() {
"use strict"; /* 默认开启严格模式 */
let version = "1.0.0"; /* 设置当前框架的版本号 */
/* 002-声明jQuery工厂函数 */
let jQuery = function(selector) {
/* 构造函数：jQuery.fn.init */
/* 返回实例：jQuery.fn.init 构造函数创建出来的实例对象 */
return new jQuery.fn.init(selector);
}
/* 003-设置jQuery的原型对象 */
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function() {},
eq() {},
get() {},
first() {},
last() {},
toArray() {}
}
/* 004-设置原型对象共享(为了让init的实例对象可以访问jQuery原型成员) */
jQuery.fn.init.prototype = jQuery.fn;
/* 005-插件方法和插件机制 */
jQuery.fn.extend = jQuery.extend = function(o) {
for (let key in o) {
this[key] = o[key];
}
}
jQuery.extend({});
jQuery.fn.extend({});
/* 006-把jQuery和$暴露出去 */
window.jQuery = window.$ = jQuery;
})();
这里再给出jQuery框架中核心入口函数init方法实现的简单版本以及插件机制和核心方法的简单实现。
/* 001-外层是闭包(立即执行函数) */
(function() {
/* 002-默认开启严格模式 */
"use strict";
/* 003-设置当前框架的版本号 */
let version = "1.0.0";
/* 004-声明jQuery工厂函数 */
let jQuery = function(selector) {
/* 构造函数：jQuery.fn.init */
/* 返回：jQuery.fn.init构造函数创建出来的实例对象 */
return new jQuery.fn.init(selector);
}
/* 005-设置jQuery的原型对象 */
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function(selector) {
/* 如果参数为假 */
if (!selector) {
return this;
}
/* 如果参数是函数 */
if ($.isFunction(selector)) {
document.addEventListener("DOMContentLoaded", selector)
}
/* 如果参数是字符串 */
else if ($.isString(selector)) {
/* 标签字符串 "<div>测试</div>" "<a>"*/
if ($.isHTMLSting(selector)) {
let ele = document.createElement("div");
ele.innerHTML = selector;
[].push.apply(this, ele.children)
}
/* 选择器字符串 "div" ".box"*/
else {
[].push.apply(this, document.querySelectorAll(selector));
}
}
/* 如果参数是数组或者是伪数组 */
else if ($.isArray(selector) || $.isLikeArray(selector)) {
//把selector中所有的元素依次添加到this中并且更新length
[].push.apply(this, selector);
} else {
this[0] = selector;
this.length = 1;
}
},
eq(index) {
return $(this.get(index));
},
get(index) {
return index >= 0 ? this[index] : this[this.length + index];
},
first() {
return this.eq(0);
},
last() {
return this.eq(-1);
},
toArray() {
return [].slice.call(this);
}
}
/* 工具方法的处理 */
/* jQuery插件机制 */
jQuery.fn.extend = jQuery.extend = function(o) {
for (let key in o) {
this[key] = o[key];
}
}
jQuery.extend({
isString: function(str) {
return typeof str == "string";
},
isFunction: function(fn) {
return typeof fn == "function";
},
isObject: function(obj) {
return typeof obj == "object" && obj != null;
},
isHTMLSting: function(htmlStr) {
return htmlStr.charAt(0) == "<" && htmlStr.charAt(htmlStr.length - 1) == ">" && htmlStr.length >= 3
},
isArray: function(arr) {
if (Array.isArray) {
return Array.isArray(arr);
} else {
return Object.prototype.toString.call(arr) == "[object Array]";
}
},
isLikeArray: function(likeArr) {
return typeof $.isObject(likeArr) && "length" in likeArr && likeArr.length - 1 in likeArr;
}
});
jQuery.extend({
xxxx() {
console.log("----");
}
})
jQuery.fn.extend({
css: function() {},
text: function() {},
html: function() {}
});
jQuery.fn.extend({
on: function(type, handler) {
// $("button").on("click", function() {
// console.log("click", this);
// })
/* > 给所有选中的标签(this)都添加指定类型的事件，当事件触发的时候要执行事件处理函数 */
for (let i = 0, len = this.length; i < len; i++) {
this[i].addEventListener(type, handler);
}
},
click: function(handler) {
this.on("click", handler);
},
mouseenter: function(handler) {
this.on("mouseenter", handler);
},
mouseleave: function(handler) {
this.on("mouseleave", handler);
}
});
jQuery.fn.extend({
css() {},
attr() {},
addClass() {},
removeClass() {},
toggleClass() {},
append() {}
})
/* 006-设置原型对象共享(为了让init的实例对象可以访问jQuery原型成员) */
jQuery.fn.init.prototype = jQuery.fn;
/* 007-把jQuery和$暴露出去 */
window.jQuery = window.$ = jQuery;
})();
