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 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

JQuery is very close to the original version, and I continue to add functions here 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.

label: Goo Goo Goo , jquery

There have been five comments

  1. Jvquery and jvquery have been popular for many years, but I still like jvreact

  2. Non technical passing by.

  3. Vue, I can't read a few pages of basic course I'd better continue with JQ

    1. Vue is very simple to start with. The simple single page application is very good. If you use jQuery to do it, it will test the project planning ability

Add a new comment