今天正好有个老朋友聊起来jquery源码,他对于源码不了解,我抱着学习交流的心态,给他讲解了核心实现。(好像自己也鸽了好长时间)
顺便在哪个cdn服务商找个jquery文件打开, 我这里用的1.2.3版本为例,最新版本也差不多,只有两三处变化https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js
源码分析
17-20行
传入选择器,返回自身new出来的init方法,估计你们也没用过$()
的第二个参数,这里省略掉
var jQuery = window.jQuery = function(selector) {
return new jQuery.prototype.init(selector);
}
26-27行
这就是为什么总是用$开头的原因,挂载到window对象下,属于全局变量
// Map the jQuery namespace to the '$' one
window.$ = jQuery;
36-547行
剔除我们不需要的保留核心,留下init
方法,内部做了jquery实例与选择器的判断,这里我们忽略掉,简化
jQuery.fn = jQuery.prototype = {
init: function(selector) {
var nodes = document.querySelectorAll(selector);
for (var i in nodes) {
this[i] = nodes[i];
}
return this;
}
//此处省略十万字
}
549行
来上一段这个,jquery原型链传递给jquery原型下init方法的原型,回头再看new时候的代码,很清楚明了
jQuery.prototype.init.prototype = jQuery.prototype;
完整实现
在jQuery的原型上继续增加功能就很接近初版jQuery了,这里我是简单实现了text()
方法
var jQuery= function (selector) {
return new jQuery.fn.init(selector);
}
jQuery.fn = jQuery.prototype = {
init: function (selector) {
var nodes = document.querySelectorAll(selector);
for (var i in nodes) {
this[i] = nodes[i];
}
return this;
},
element: function (callback) {
for (var i = 0; i < this.length; i++) {
callback(this[i]);
}
},
text: function (content) {
if (content == '' || content) {
this.element(function (node) {
node.innerHTML = content;
})
return content;
} else {
return this[0].innerHTML;
}
},
}
jQuery.prototype.init.prototype = jQuery.prototype;
window.$ = jQuery;
结束
核心其实一点不复杂,插件的实现我倒是很喜欢,自身的功能我看来大部分全是用插件实现的,工具自身的巧妙设计加上便利性。
在传统页面制作上jquery一把梭用的很舒服,但MVVM的出现改变了大家的思考方式,只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,对于项目管理轻松不少。
如果有简单需求的单页上,jquery还是有用武之地的,上MVVM只能是徒增麻烦。