Learn JavaScript (ii) _jquery through the jquery source code

Ingenious 1: function

Functions are a rare talent in JavaScript code.
♥ It can decorating code snippets and encapsulate relatively independent functionality.
♥ It can also implement classes and inject oop ideas.
jquery is a function, you can also think of it as a class (hehe, itself is a class).

Copy Code code as follows:

(function () {
var jQuery = function () {
function body
}
Window.jquery = window.$ = JQuery;
})();
Console.log (JQuery);

The empty function above is called a constructor, and the constructor is a basic method of class in object-oriented language.

Ingenious 2: Expanding prototypes

What is a prototype object? I'll give you a blog post and you can get to know http://www.jb51.net/article/32857.htm.

JavaScript binds a prototype property to all functions, and this property points to a prototype object. We define the inheritance properties and methods of the class in the prototype object.

A prototype object is the basic mechanism by which JavaScript implements inheritance.

Copy Code code as follows:

(function () {
var jQuery = function () {
function body
}
Jquery.fn = Jquery.prototype = {
Extending a prototype object
jquery: "1.8.3",
Test:function () {
Console.log (' Test ');
}
}
Window.jquery = window.$ = JQuery;
})();

(New JQuery ()). Test ();

Clever 3: Use the Factory method to create an instance

The above method must use the following method to make the call, which can result in many objects, thus wasting memory consumption.

(New JQuery ()). Test ();
The jquery source code uses the very soft method, also is everybody more familiar factory method, makes the call.

Copy Code code as follows:

(function () {
var jQuery = function () {
function body
return JQuery.fn.init ();
}
Jquery.fn = Jquery.prototype = {
Extending a prototype object
jquery: "1.8.3",
Init:function () {
return this;
},
Test:function () {
Console.log (' Test ');
}
}
Window.jquery = window.$ = JQuery;
})();
JQuery (). Test ();

Scenario 1: Let the jquery function body return directly to the object--I use this

Copy Code code as follows:

(function () {
var jQuery = function () {
return this;
}
Jquery.fn = Jquery.prototype = {
Extending a prototype object
jquery: "1.8.3",
Test:function () {
Console.log (' Test ');
}
}
Window.jquery = window.$ = JQuery;
})();
Console.log (JQuery ());

Output results

Find this here to point to the Window object.
Scenario 2: Let the jquery function body directly return an instance of the class.

Copy Code code as follows:

(function () {
var jQuery = function () {
return new JQuery ();
}
Jquery.fn = Jquery.prototype = {
Extending a prototype object
jquery: "1.8.3",
Test:function () {
Console.log (' Test ');
}
}
Window.jquery = window.$ = JQuery;
})();
Console.log (JQuery ());

Output results

Found above is a recursive dead loop, there is memory overflow.

Ingenious 4: dividing scopes

Think about what this scope is returned by the 1:init () method.

Copy Code code as follows:

(function () {
var jQuery = function () {
function body
return JQuery.fn.init ();
}
Jquery.fn = Jquery.prototype = {
Extending a prototype object
jquery: "1.8.3",
Init:function () {
This.init_jquery = ' 2.0 ';
return this;
}
}
Window.jquery = window.$ = JQuery;
})();
Console.log (jquery (). jquery);
Console.log (JQuery (). Init_jquery);

Output results


The this scope in the Init () method refers to the object in which the Init () function scope is located, while also having access to the function of the object Jquery.fn object at the top level. This idea destroys the independence of the scope and is likely to have a negative impact on the jquery framework.

Think 2: How do I separate this from the Jquery.fn object in init ()? --Instantiates the Init initialization type.

Copy Code code as follows:

(function () {
var jQuery = function () {
function body
return new JQuery.fn.init ();
}
Jquery.fn = Jquery.prototype = {
Extending a prototype object
jquery: "1.8.3",
Init:function () {
This.init_jquery = ' 2.0 ';
return this;
}
}
Window.jquery = window.$ = JQuery;
})();
Console.log (jquery (). jquery);
Console.log (JQuery (). Init_jquery);

Output results

By instantiating the init () initialization type, the this in the Init () method is qualified and is only active within the init () function, so that it does not go out of scope.

Ingenious 5: Prototype delivery

Think 1: In clever 4, we separate this from the Jquery.fn object in Init (). So how can we ensure that we can access the jquery prototype object on the basis of "Ingenious 4"? --prototype delivery.

Let jquery's prototype object overwrite the prototype object of the Init () constructor.

Copy Code code as follows:

JQuery.fn.init.prototype = Jquery.fn;

All code:

Copy Code code as follows:

(function () {
var jQuery = function () {
function body
return new JQuery.fn.init ();
}
Jquery.fn = Jquery.prototype = {
Extending a prototype object
jquery: "1.8.3",
Init:function () {
This.init_jquery = ' 2.0 ';
return this;
}
}
JQuery.fn.init.prototype = Jquery.fn;
Window.jquery = window.$ = JQuery;
})();
Console.log (jquery (). jquery);
Console.log (JQuery (). Init_jquery);

Output results

Wonderful chess

Point the Init () object's prototype pointer to Jquery.fn. The This in Init () inherits the methods and properties defined by the Jquery.fn prototype object.

Summary

Thank Bo Friends of the message, especially Puni, introduced me to a good book. If you could just add it up, that would be great.