A few months ago, when I saw an article that was very simple, it was a picture of the relationship between the objects in jquery, and that was the most intuitive way I wanted to summarize jquery. In that article, there are a lot of people who are puzzled, said to see not understand. Here I also re-painted a picture, and explained. The attachment provides a file in Visio format. The following will be combined with the JQuery source code, each part of the explanation. In the figure, the circle number represents the location of the JQuery source code, where the circled numbers indicate that these places are from the same block.
- /**
- *① What is JQuery?
- *
- * window is an object, it has two attributes, jquery and $ respectively, and its value is a function, the name of this function is jquery. In the function
- * In the definition of entities, in fact, through the JQuery.fn.init function to construct the object, the INIT function is the real constructor. In other words,
- * What we get through ${...) is actually an example of jQuery.fn.init.
- */
- var jQuery = Window.jquery = window.$ = function (selector, context) {
- The JQuery object is actually just the Init constructor ' enhanced '
- return new JQuery.fn.init (selector, context);
- };
Copy Code
- /**
- *② 's so-called JQuery's physique
- *
- * The JQuery function has two properties, FN and prototype, respectively, and its value is an anonymous object (JSON object).
- */
- Jquery.fn = Jquery.prototype = {
- Init:function (Selector, context) {
- ...
- },
- jquery: "1.2.6",
- Get:function (num) {
- ...
- },
- ...
- }
Copy Code
- /**
- *③ give JQuery power.
- *
- * This code doesn't look like a word, it's short, isn't it? But this piece of code is very important.
- *
- * First, Init is just a function, constructed by JQuery.fn.init, just an instance of JQuery.fn.init,
- * Jquery.fn said before, it is an anonymous JSON object, including Init and so on, we want to let JQuery.fn.init construct
- * Prototype is one of the best ways to come out with a lot of behavior. Let's say we define a function, named Car.
- * Well, the way we use prototype to add behavior to it is familiar to us:
- * Function Car (owner) {
- * This.owner = owner;
- * }
- * Car.prototype = {
- * Go:function () {...}
- * Brake:function () {...}
- * }
- * In this way, objects constructed from new Car () have the go and brake behavior.
- *
- * Therefore, because of the following sentence, the object that was constructed by Init has all the behaviors defined by JQUERY.FN, so handsome!
- */
- Give the init function The JQuery prototype for later instantiation
- JQuery.fn.init.prototype = Jquery.fn;
Copy Code
- /**
- *④ give me the freedom to expand, okay?
- *
- * Admittedly, jQuery or Jquery.fn defined function you might not feel enough, it's okay, John Resig provided us with a
- * Expand the space. Both JQuery and Jquery.fn have a property named Extend, and the type of the property is a function,
- * This function itself has provided us with extended functionality.
- *
- * The function that the Extend attribute represents, but 50 lines of code, write too incisive, have time, we can step by step debugging,
- * See the magic of John Resig ~
- */
- Jquery.extend = JQuery.fn.extend = function () {
- ......
- }
Copy Code the core of the entire jQuery is the above four blocks of code, such as event handling code, you can find the shadow from the above four blocks of code. Enjoy jquery~ |
