Analyser les instances de fonctions principales dans jquery-js tutoriel-php.cn

Analyser les instances de fonctions principales dans jquery

零下一度

Libérer： 2017-06-17 17:49:36

original

1059 Les gens l'ont consulté

Les fonctions de base incluent :

Comment jquery est défini, comment l'appeler et comment l'étendre. Maîtriser la manière dont les méthodes principales sont implémentées est la clé pour comprendre le code source de jQuery. Ici, tout est devenu soudain clair.

1, comment définir, c'est-à-dire l'entrée

// Définir une copie locale de jQuery

var jQuery = function( selector, context ) {

// L'objet jQuery est en fait juste le constructeur d'initialisation 'amélioré'

return new jQuery.fn.init( selector, context, rootjQuery ); // L'objet jQuery est en fait juste la fonction constructeur jQuery.prototype.init version améliorée

}

2, prototype jQuery et sa relation avec jQuery.fn.init

//Définissez la méthode objet, c'est-à-dire qu'elle ne peut être appelée que via $("xx").

jQuery.fn = jQuery.prototype = {

init:function( sélecteur, contexte, rootjQuery ) {

return jQuery.makeArray( sélecteur, this );

Il existe de nombreux autres attributs et méthodes,

Les attributs incluent : jquery, constructeur, sélecteur, longueur

Les méthodes incluent : toArray,get, pushStack,each, ready,slice, first,last,eq, map,end, push, sort, splice

…

}

// jQuery .prototype est attribué à jQuery.prototype.init.prototype pour une instanciation ultérieure

// Donner à la fonction init le prototype jQuery pour une instanciation ultérieure

jQuery.fn.init.prototype = jQuery.fn ;

Autrement dit, $("xx") a une méthode d'instance et peut être appelée. (Appelez la méthode définie sous jQuery.prototype)

Pourquoi jQuery renvoie-t-il l'objet jQuery.fn.init ?

jQuery = function( selector, context ) {

/ / L'objet jQuery n'est en fait que le constructeur d'initialisation 'amélioré'

return new jQuery.fn.init( selector, context, rootjQuery );

}

jQuery.fn = jQuery.prototype = {

…

}

jQuery.fn.init.prototype = jQuery.fn;

Trouver des questions similaires sur stackoverflow :

http://stackoverflow.com/questions/4754560/help-understanding-jquerys-jquery-fn-init-why-is-init-in-fn

Et ça

http://stackoverflow.com/questions/1856890/why-does-jquery-use-new-jquery-fn-init-for-creating-jquery-object-but-i-can/1858537#1858537

Je crois que le code est écrit de cette façon afin que le nouveau mot-clé ne soit pas requis à chaque fois que vous instanciez un nouvel objet jQuery et également pour déléguer la logique derrière la construction de l'objet au prototype. le nettoyeur de bibliothèque à utiliser et ce dernier pour conserver la logique d'initialisation proprement au même endroit et permettre à init d'être appelé de manière récursive pour construire et renvoyer un objet qui correspond correctement aux arguments passés.

3, étendre étendu méthode objet et principe de méthode statique

jQuery.extend = jQuery.fn.extend = function() {

var target = arguments[0] ||

return target;

}

Il est pratique d'utiliser extend, qui n'est rien de plus que $.extend({}); Si vous, ce serait formidable si vous pouviez comprendre et penser à jQuery.prototype lorsque vous voyez fn.

Regardez à nouveau cette portée :

$.extend -> ceci est $-> this.aa()

$.fn.extend-> ;this is $.fn-> this.aa()

Vous trouverez ci-joint les détails de l'implémentation de l'extension :

Scénarios d'utilisation :

1, étendez certaines fonctions

Un seul paramètre. Par exemple : $.extend({f1:function(){},f2:function(){},f3:function(){}})

2, fusionne plusieurs objets dans le premier objet

(1) Copie superficielle, le premier paramètre est l'objet cible. Par exemple

var a = {name:”hello”}

var b = {age:30}

$.extend(a,b);//a = {name:”hello”,age:30}

(2) Copie complète, le premier paramètre est VRAI et le deuxième paramètre est l'objet cible. Par exemple

var a = {name:{job:”it”}};

var b = {name:{age: 30 }};

// $ .extend(a,b);

$.extend(true,a,b);

console.log(a);

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // 是不是深复制  Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // 不是对象类型  Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // 扩展插件的情况  extend jQuery itself if only one argument is passed
    if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}})
        target = this;//this是$,或是$.fn
        --i;
    }

    for ( ; i < length; i++ ) {//可能有多个对象扩展到第一个对象上
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {//options是一个对象
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];  //src是target里已经存在的value（也可能不存在）
                copy = options[ name ];//copy是待合入的一个value

                // 防止循环引用  Prevent never-ending loop
                if ( target === copy ) {//例如：var a={};$.extend(a,{name:a});//可能导致循环引用
                    continue;
                }

                // if是深复制else是浅复制  Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // 亮了，直至剥离至最深一层非对象类型，而且是逐个。Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;//target[ name ] = options[ name ];
                }
            }
        }
    }

    // Return the modified object
    return target;
};

Copier après la connexion

jQuery.extend({…}) Analyse

Regardez comment c'est écrit

jQuery.extend({

prop:””

méthode : function(){}

});

On peut voir que ces méthodes sont des propriétés statiques et des méthodes de jQuery (c'est-à-dire des méthodes outils), qui peuvent être directement fournies aux utilisateurs à l’avenir. Peut également être utilisé en interne.

Les attributs et méthodes spécifiques des outils implémentés sont (également marqués ceux qui sont utilisés en interne)

jQuery.extend({

expando : Générer une chaîne JQ unique(interne)

noConflict() : Prévenir les conflits

isReady : Si le DOM est chargé (interne)

readyWait : Compteur du nombre de fichiers à attendre (interne)

holdReady() : Report du déclenchement du DOM

ready() : Préparez le déclenchement DOM

isFunction() : Si c'est une fonction

isArray() : Que ce soit un tableau

isWindow() : Que ce soit une fenêtre

isNumeric() : Is it Number

type() : Détermine le type de données de

isPlainObject() : S'il s'agit d'un argument d'objet

isEmptyObject() : S'il s'agit d'un objet vide

error() : Lance une exception

parseHTML() : Analyser le nœud

parseJSON() : Parse JSON

par seXML () : Parse XML

noop() : Fonction vide

globalEval() : Analyse globale JS

camelCase() : Convertir le cas de chameau

nodeName ( ) : S'il s'agit du nom de nœud spécifié (interne)

each() : Parcourir la collection

trim() : Supprimer les espaces de début et de fin

makeArray() : Convertir un tableau de type tableau en tableau réel

inArray() : Version du tableau indexOf

merge() : Fusionner les tableaux

grep() : Filtrer le nouveau tableau

map() : Mapper le nouveau tableau

guid : Identifiant unique (interne)

proxy() : Changez ceci pointer vers

access() : Opération de valeur multifonction (interne)

now() : Heure actuelle

swap() : CSS swap (interne)

});