Maison >interface Web >js tutoriel >Analyse approfondie des fonctions principales de jquery
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 exemplevar 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 exemplevar 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; };jQuery.extend({…}) Analyse
Regardez comment c'est écrit
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() : Lève 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)
});
jQuery.ready.promise = function(){}; Surveillance du fonctionnement asynchrone du DOM (interne)
function isArraylike(){} Jugement de type tableau ( interne)
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!