Today, an old friend just chatted about jQuery source code. He didn't know the source code. I explained the core implementation to him with the attitude of learning and communication. (it seems that I have been pigeoning for a long time.)
By the way, which CDN service provider can find a jQuery file to open. I use version 1.2.3 as an example. The latest version is similar, with only two or three changes https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js
Source code analysis
17-20 lines Pass in the selector and return the init method of its own new. I guess you haven't used it $() The second parameter is omitted here
var jQuery = window.jQuery = function(selector) {
return new jQuery.prototype.init(selector);
}
Lines 26-27 This is why it always starts with $and is mounted under the window object, which is a global variable
// Map the jQuery namespace to the '$' one
window.$ = jQuery;
Lines 36-547 Get rid of what we don't need, keep the core, stay init In this case, we ignore the internal method of jQuery
JQuery. FN = jQuery. Prototype = {init: function (selector) {var nodes = document. Queryselectorall (selector);
for (VaR I in nodes) {this [i] = nodes [i];
} return this;
}
/ / omit 100000 words
}}
549 lines In the previous paragraph, the jQuery prototype chain is passed to the init method prototype under the jQuery prototype. Looking back at the new code, it is very clear
jQuery.prototype.init.prototype = jQuery.prototype;
Complete implementation
If you continue to add functions to the jQuery prototype, it will be very close to the original version of jQuery. Here I will simply implement it text() method
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;
end
In fact, the core is not complicated at all. I like the implementation of plug-ins. I think most of their functions are implemented by plug-ins. The ingenious design of the tool itself and the convenience.
In the traditional page production, jQuery is very comfortable to use, but the emergence of MVVM has changed our way of thinking. We only need to pay attention to business logic, do not need to manually operate DOM, and do not need to pay attention to the synchronization of data status. It is much easier for project management.
JQuery can only be used in a simple way.
