Que devez-vous savoir sur jQuery ?

J'ai récemment voulu jeter un œil au code source de jQuery et j'ai trouvé ce blog "10 choses apprises du code source de jQuery"

Cet article est basé sur ce blog vidéo et a affiné certains contenus à partager avec vous.

Remarque :
Cet article a été écrit en 2010. L'auteur a utilisé la version jQuery 1.4 dans la vidéo. Sur la base du contenu mentionné dans la vidéo, je correspond à la version 1.11 actuelle. Certains ajustements ont été apportés. été réalisé, certaines pages de contenu abandonnées ou supprimées ont été supprimées, et je tiens à remercier l'auteur original

Boîte noire/Boîte noire

Système de boîte noire Le concept est un système qui renvoie la sortie en fonction de l'entrée, et la boîte noire encapsule le processus de mise en œuvre. La boîte noire jQuery mentionnée ici sert à générer jQuery et $ pour la fenêtre de variable globale js, et le processus est encapsulé dans la boîte noire et n'interfère pas avec le monde extérieur.

La boîte noire de jQuery 1.4 utilise une fonction auto-exécutable similaire à la suivante

(function( window, undefined){})(window)

L'auteur a donné une méthode plus générale d'implémentation de la boîte noire

undefined = true;
(function(window, document, undefined){    
    if(foo == undefined) {
        }
})(this, document)

La boîte noire jQuery transmet un troisième paramètre formel appelé non défini, mais aucune valeur n'est transmise lors de la transmission des paramètres réels. Les paramètres formels sans valeurs transmises dans js seront définis sur non défini, garantissant l'exactitude de non défini à l'intérieur du. boîte noire. En js, undefined, en tant que attribut global, peut se voir attribuer une valeur, par exemple, undefined = true dans le code ci-dessus ;

Un autre avantage de l'implémentation de la boîte noire dans l'auto-. Le mode d'exécution de la fonction est qu'il Pour la compression, comme dans le cas ci-dessous, il suffit d'utiliser des variables simples à l'intérieur de la boîte noire.

(function(A, B, C)){
    B.getElementById('')
})(this, document)

L'auteur a donné de nombreux exemples de fonction anonyme d'auto-exécution, comme la suivante, qui met à jour (et exécute en continu) une certaine partie de la page

(function loop(){
    doStuff();
    $('#update').load('awesomething.php',function(){
        loop();
    })
    //setTimeout(loop, 100)
})()

La boîte noire de la version 1.11 de jQuery adopte une nouvelle méthode de fabrique. Cet article n'explorera pas l'implémentation de

noConflict

La différence de cette fonction n'est pas grande. Le code de la version 1.11 est le suivant

var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,
    // Map over the $ in case of overwrite
    _$ = window.$;
jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    return jQuery;
};

Nous pouvons voir que l'implémentation anti-conflit consiste d'abord à sauvegarder le JQuery et le $ précédents, puis à les renvoyer lorsque noConflict est appelé

Conversion avec dénomination d'attribut js natif

La version 1.4 utilise des objets props pour stocker la correspondance entre les opérations d'attribut de jquery et les opérations d'attribut js natif
La version réduite de la version 1.11 est comme ça

jQuery.extend({
    propFix: {
        "for": "htmlFor",
        "class": "className"
    },
    prop: function( elem, name, value ) {
        //...
        name = jQuery.propFix[ name ] || name;
    },
    propHooks: {
        //...
    }
});
jQuery.each([
    "tabIndex",
    "readOnly",
    "maxLength",
    "cellSpacing",
    "cellPadding",
    "rowSpan",
    "colSpan",
    "useMap",
    "frameBorder",
    "contentEditable"
], function() {
    jQuery.propFix[ this.toLowerCase() ] = this;
});

propFix this L'objet stocke la table de relations correspondante, telle que la conversion de la classe en className, et la fonction prop est responsable du traitement de cette table de relations.
Ce qui suit chacun est très intéressant, parcourt ces attributs dans le tableau , puis fait correspondre leur format minuscule à lui-même et le met dans propFix

Vitesse des effets spéciaux

Nous savons que pour certaines animations dans jQuery, nous pouvons définir directement la vitesse de mise en œuvre par normale, rapide et lente. Ceci est défini dans le code source comme ceci

jQuery.fx.speeds = {
    slow: 600,
    fast: 200,
    // Default speed
    _default: 400
};

Le vilain auteur original a fait quelque chose comme. ceci :

var isIE 
//...
jQuery.fx.speeds._default = isIE ? 800 : 400
jQuery.fx.speeds.veryfast = 200;
$('...').fadeIn('veryfast')

La première consiste à faire un jugement conditionnel sur l'attribut par défaut, et il existe également une vitesse personnalisée, telle que "très rapide"

.ready

fonction prête 1.11 Il y a un gros écart entre la version et la version 1.4. Je ne comprends pas beaucoup de choses dans la nouvelle version. Sortons simplement le noyau et jetons un œil

jQuery.ready.promise = function( obj ) {    //...省略若干        } else if ( document.addEventListener ) {            // 使用addEventListener "DOMContentLoaded" 监听ready事件            document.addEventListener( "DOMContentLoaded", completed, false );            // 备选方案 "load"            window.addEventListener( "load", completed, false );        //如果IE        } else {            // Ensure firing before onload, maybe late but safe also for iframes                        //IE下 attachEvent 的"onreadystatechange"            document.attachEvent( "onreadystatechange", completed );            // A fallback to window.onload, that will always work                        //备选方案onload            window.attachEvent( "onload", completed );            // If IE and not a frame            // continually check to see if the document is ready            var top = false;            try {                top = window.frameElement == null && document.documentElement;            } catch(e) {}            if ( top && top.doScroll ) {                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                            // Use the trick by Diego Perini                            // http://javascript.nwbox.com/IEContentLoaded/                            top.doScroll("left");                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );                        }                        // detach all dom ready events                        detach();                        // and execute any waiting functions                        jQuery.ready();                    }                })();            }        }    }    return readyList.promise( obj );};
.ready 利用了下面的.promise去做确保载入完成的工作，重点是document.addEventListener( "DOMContentLoaded", completed, false );window.addEventListener( "load", completed, false );document.attachEvent( "onreadystatechange", completed );window.attachEvent( "onload", completed );

<.>Les quatre méthodes de vérification pour les considérations de compatibilité

En commençant par le haut, une chose que nous faisons est que sous IE, le nœud dom détermine s'il y a un défilement. Sous IE, si le dom a un défilement, le nœud dom détermine s'il y a un défilement. les éléments qui ne défilent pas auront un impact sur ready. Ici, je ne le comprends pas assez bien. Bref, jQuery utilise une technique appelée Diego Perini. Vous pouvez voir plus de contenu à l'adresse dans les commentaires.

Sélecteur

$('#id').find('tag.thing') --- plus rapide

$('#id tag.thing') - ------ en utilisant sizzle

L'auteur original a mentionné ici un problème d'efficacité de jquery. La méthode ci-dessus est plus rapide, tandis que la méthode suivante est légèrement plus lente, c'est simplement à cause de ce qui suit. La méthode appelle sizzle, qui est en fait converti dans le mode ci-dessus via sizzle, et l'appel de id se fait directement via jQuery.init.

Cela doit être développé. Jetons un coup d'œil à ce à quoi ressemble l'objet jQuery. comme dans la version 1.11

jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
}

L'objet jQuery renvoie en fait son propre

constructeur appelé init Jetons un coup d'œil à ce que fait init

// Initialize a jQuery object
    init = jQuery.fn.init = function( selector, context ) {
        var match, elem;
        // HANDLE: $(""), $(null), $(undefined), $(false)
            //超级省略...下略
        // Handle HTML strings
        // HANDLE: $(html) -> $(array)
        // HANDLE: $(html, props)
        // HANDLE: $(#id)
        // HANDLE: $(expr, $(...))
        // HANDLE: $(expr, context)
        // HANDLE: $(DOMElement)
        // HANDLE: $(function)
        return jQuery.makeArray( selector, this );
    };
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

D'en haut dans. les commentaires du code extrait, nous pouvons voir quelles situations sont gérées dans le propre constructeur de jq, y compris l'acquisition des noms et identifiants de balises html, ce qui signifie que ces deux acquisitions sont le niveau le plus bas, en plus d'autres traitements de $() Tous doivent passer par d'autres fonctions, qui ne sont pas aussi efficaces que le traitement ci-dessus.

En même temps, nous pouvons également voir que le prototype d'init est attribué à jQuery.fn. Les amis intéressés peuvent en savoir plus sur les objets jQuery.

Les sélecteurs de statut de jQ, tels que :not,:has,:eq, sont stockés dans

Sizzle.selectors.pseudos

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!