August 2019

JQuery just to understand the core of the exchange of his friends today. (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 Method, the internal judge of jQuery instance and selector is made. Here we ignore and simplify

 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.

If there are simple requirements on a single page, jQuery still has a place to use, MVVM can only be added to the trouble.