Java Programmer's JavaScript Learning notes (7--jquery basic mechanism)

plan to complete this note in the following order:

2. Idea.
4. Property replication and inheritance.
6. This/call/apply.
8. Closed Packet/getter/setter.
10. Prototype
12. Object-oriented simulation.
14. The basic mechanism of jquery.
16. jquery selector.
18. jquery Tool method.
20. jquery-extends at the class level.
22. jquery-extends at the "object" level.
24. jquery-extension Selector.
26. JQuery UI.
28. Extend the jquery UI.

This is the 7th note, a chat about the basic mechanism of jquery, learning while we try to implement an abbreviated version of jquery, we call him JQ.

We believe that the reader is familiar with the use of jquery before reading this article.

The 7th to 9th is a unit in which we will delve inside jquery to fully learn the best design and programming practices of JavaScript.

First, warm up the grammar.
1. Preheating GrammarLook at the following code:
Code Snippet 1

(function () {    Console.log (' This was a function be called immediately. ')}) ();

The first pair of parentheses is a statement that returns a function and then invokes the function directly with the second pair of parentheses.
Run output: This is a function being called immediately.

parameters can be passed to this parameter, in JavaScript, $ and _ are valid variable names.

Code Snippet 2 (function (_) {    Console.log (_);  Output: Window, depending on the content of the browser output}) (this);

in the global context, this points to window.

The return value can be obtained by the following method.

Code snippet 3var f = (function (_) {    function func () {        console.log (' I am invoked by ' + this, ' arguments: ' + _);//Output : I am invoked by [object Window] arguments:param value    }    return func;}) (' param value '); F ();

You can also append a value or method that needs to be returned directly to the property of the window to the purpose of "return."

Code Snippet 4 (function () {    function func ($$) {        console.log (' I am invoked by ' + this);    }    Window.func = func; The equivalent of a direct definition of the global function, func    window.$$ = new Func (), or the equivalent of defining a global variable $$, in JavaScript, $$ is a valid variable name. }); func (); Console.log ($$.tostring ());//output: [Object Object]

2. Expected functionWe will implement a JS code framework, JQ, which is expected to implement the following functions:
2.1, through the JQ (' #id ') can be taken to the DOM object by ID.
2.2. For the JQ object (that is, the object returned through the JQ method), you can use the HTML () method to get its contents, and the syntax is as follows:
JQ (' #id '). html ();//return its contents
JQ (' #id '). HTML (' new content ');//Set its contents
2.3, can replace JQ with $$, the syntax is as follows:
$$ (' #id '). html ();

3. Realize3.1, based on the previous syntax basis, our view implementation of 2.1 proposed function.

Code Snippet 5

<! DOCTYPE html>

gets to the DOM object and returns directly. This approach is unworthy and needs to be encapsulated, preferably in the form of function object (function is the top-class citizen in JS, the most powerful) return. 
and you want the return value to be an instance of the JQ "class". 
Code Snippet 6 (function () {    var JQ = function (id) {        var ret = new JQ ();        Ret.innerdom = ' BlaBla ';        return ret;    }    Jq.prototype = {        innerdom:null    }    window.jq = JQ;}) (); Console.log (JQ (' #divTest '));

uncaught rangeerror:maximum Call stack size exceeded, dead loop. 
if the direct new is not available, then the factory method can be used. 
Code Snippet 7 (function () {    var JQ = function (id) {        var ret = jQ.prototype.getInstance (ID);        return ret;    }    Jq.prototype = {        innerdom:null,        getinstance:function (id) {            //todo:init innerdom by ID            return THIS;
   //caller, JQ        }    }    window.jq = JQ;}) (); Console.log (JQ (' #divTest ') ===jq (' #divTest1 ')); Output:  True

The last line of code above, the intention to build two different objects, the result is the same object returned, this is wrong. 
the corrected code is shown below. 
Code Snippet 8 (function () {    var JQ = function (id) {        var ret = new jQ.prototype.getInstance (ID);//Add New keyword        return ret ;    }    Jq.prototype = {        innerdom:null,        getinstance:function (id) {            //todo:init innerdom by ID            return This;
   //caller, JQ        }    }    window.jq = JQ;}) (); Console.log (JQ (' #divTest ') ===jq (' #divTest1 ')); Output:  false

based on the semantics of the New keyword:
var ret = new jQ.prototype.getInstance (ID);
equivalent to
var ret ={};
jQ.prototype.getInstance.apply (ret);//The GetInstance method is called via RET, the this binding in the GetInstance method is ret
ret.__proto__ = jq.prototype.getinstance.prototype;//Specifies that the prototype of RET is a prototype of getinstance, where there is a problem, Because GetInstance's prototype is an object (almost empty). 

to compensate for the new keyword's flaws, the fix code is as follows:
Code Snippet 9 (function () {    var JQ = function (id) {        var ret = new jQ.prototype.getInstance (ID);        return ret;    }    Jq.prototype = {        innerdom:null,        getinstance:function (id) {            //todo:umimpl init innerdom by ID            this.inn Erdom = ' dom by ' +id;            return this; This caller, the newly created object        },        html:function () {//todo:impl The            method            return this.innerdom;//this caller, The newly created object        }    }    JQ.prototype.getInstance.prototype = jq.prototype;//New Add code, because it is a reference, do not worry about circular reference problems    WINDOW.JQ = JQ;}) (); Console.log (JQ (' #divTest '). html ()); Output:dom by #divTestconsole. Log (JQ (' #divTest2 '). html ()); Output:dom by #divTest2
3.2, now add 2.2 description of the function: HTML method
Code Snippet 10<! DOCTYPE html>3.3. Reference by $$2.3 Description of the function is more simple, just in WINDOW.JQ = JQ, followed by a sentence:
window.$$ = JQ;
The invoked statement is modified to:
Console.log ($$ (' #divTest ', window). HTML ()); Output:blabla
$$ (' #divTest ', window). html (' BRAND NEW '); The page content changes
Console.log ($$ (' #divTest ', window). HTML ()); Output:brand NEW

Merit Perfection

Java Programmer's JavaScript Learning notes (7--jquery basic mechanism)