JQuery Source Understanding (1)

When you look at the JQuery source code, you can use StackOverFlow to search for answers to related questions and often find satisfactory answers quickly.

1. Extend JQuery to a global object

Extend JQuery to a global object so that you can use $directly in your js code to represent JQuery.

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

2. JQuery prototype object

jQuery.fn = jQuery.prototype = {ยทยทยท}
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

When init() is used as a constructor, after the object is instantiated, the instantiated object inherits JQuery's ptototype, so the instance can call all JQuery's methods

Plug-in extensions and namespace extensions for JQuery

A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. As established, whenever you call jQuery() you're creating a new jQuery object, with all of jQuery's methods inherited.

A JQuery plug-in is actually a method that inherits the JQuery prototype object. By inheriting the prototype object, all JQuery objects inherit the method that we add. Almost all existing methods in JQuery are written in the source code like this.

  • jQuery.fn.extend: Extend the jQuery element set to provide new methods (usually used to make plug-ins).show, hide, toggle methods areJQuery.fn.extend(object) The property of the object within the method exists.

  • jQuery.extend(object): Extend the jQuery object itself.Used to add a new function to the jQuery namespace.
    The ajax method extends into the JQuery namespace as an attribute of the object.

''in JQuery Functions at the beginning

''in JQuery Functions that start with are functions used internally

// not intended for public consumption
_queueHooks: function( elem, type ) {

// For internal use only.
_data: function( elem, name, data ) {
    return jQuery.data( elem, name, data, true );
},

3. eq, first, last method source

eq: function( i ) {
    i = +i; //Convert the incoming parameter to a number
    return i === -1 ?
        this.slice( i ) :  //Returns the last element of the array
        this.slice( i, i + 1 );
}, 
first: function() {
    return this.eq( 0 );
},

last: function() {
    return this.eq( -1 );
},

4. show, hide, toggle method

show: function() {
    return showHide( this, true );
},
hide: function() {
    return showHide( this );
},
toggle: function( state, fn2 ) {
    var bool = typeof state === "boolean";

    if ( jQuery.isFunction( state ) && jQuery.isFunction( fn2 ) ) {
        return eventsToggle.apply( this, arguments );
    }

    return this.each(function() {
        if ( bool ? state : isHidden( this ) ) {
            jQuery( this ).show();
        } else {
            jQuery( this ).hide();
        }
    });
}

//showHide method
function showHide( elements, show ) {
var elem, display,
    values = [],
    index = 0,
    length = elements.length;

for ( ; index < length; index++ ) {
    elem = elements[ index ];
    if ( !elem.style ) {
        continue;
    }
    values[ index ] = jQuery._data( elem, "olddisplay" );
    if ( show ) {
        // Reset the inline display of this element to learn if it is
        // being hidden by cascaded rules or not
        if ( !values[ index ] && elem.style.display === "none" ) {
            elem.style.display = "";
        }

        // Set elements which have been overridden with display: none
        // in a stylesheet to whatever the default browser style is
        // for such an element
        if ( elem.style.display === "" && isHidden( elem ) ) {
            values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
        }
    } else {
        display = curCSS( elem, "display" );

        if ( !values[ index ] && display !== "none" ) {
            jQuery._data( elem, "olddisplay", display );
        }
    }
}

// Set the display of most of the elements in a second loop
// to avoid the constant reflow
for ( index = 0; index < length; index++ ) {
    elem = elements[ index ];
    if ( !elem.style ) {
        continue;
    }
    if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
        elem.style.display = show ? values[ index ] || "" : "none";
    }
}

return elements;//The element is always returned, so JQuery can use chain operations.
}

Tags: JQuery Attribute

Posted on Mon, 20 Jul 2020 10:47:48 -0400 by Sergeant