Jquery implémente les fonctions $.fn.extend et $.extend_jquery

Nous avons étendu la méthode bind et la fonction ready plus tôt. Cette fois, je veux parler des fonctions $.fn.extend et $.extend.

Pas grand chose d’autre à dire, allons droit au but !

Voyons d'abord la différence entre ces deux fonctions :

$.fn.extend est une méthode d'extension pour l'objet nœud interrogé et est une méthode basée sur l'extension prototype de $

$.extend est une méthode régulière d'extension et une méthode statique de $.

Regardez le code que nous avons écrit auparavant : 　　

   (function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {
  
        },
        each: function (callback) {
 
        }      
      }
      _$.prototype.Init.prototype = _$.prototype;       
      window.$ = window.JQuery = _$;
    })(window);

C'est le code du corps principal.

Permettez-moi d'abord d'étendre la méthode $.fn.extend :

L'intention initiale de cette méthode est qu'après l'avoir étendue, nous pouvons utiliser $("").newMetod() pour y accéder. En fait, il s'agit d'ajouter une méthode d'extension au prototype $. Le fn au milieu est en fait similaire au rôle d'un espace de noms et n'a aucune signification pratique. Pour le distinguer de $.extend.

Ceux qui sont familiers avec les prototypes le sauront d'un coup d'œil : ne suffirait-il pas de simplement laisser $.fn pointer vers le prototype de $ ?

Nous avons donc le bout de code suivant : _$.fn = _$.prototype;

Ensuite, nous ajouterons la méthode extend :

  var isObj = function (o) {
      return Object.prototype.toString.call(o) === "[object Object]";
    }
    _$.fn.extend = function (obj) {
      if (isObj(obj)) {
        for (var i in obj) {
          this[i] = obj[i];
        }

      }
    }

La fonction de isObj dans ce code est de déterminer si le paramètre entrant est un objet _$.fn.extend Cette méthode est en fait la même que _$.prototype.extend. Jetez un œil, ce code peut être. le même que le code source JQUERY Ce n'est pas pareil, je l'ai écrit selon mes propres souhaits.

Implémentons la méthode $.extend. Comme mentionné tout à l'heure, cette méthode ajoute en fait une méthode statique à $. Le code est le suivant :

    $.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }

Vous constaterez que les deux méthodes sont les mêmes, mais si vous y réfléchissez bien, elles sont différentes :

_Ceci dans $.fn.extend représente en fait $.prototype, et ceci dans $.extend représente $.

Nous avons implémenté ces deux méthodes, et voici le code complet :

 (function (win) {
      var _$ = function (selector, context) {
        return new _$.prototype.Init(selector, context);
      }
      _$.prototype = {
        Init: function (selector, context) {

        },
        each: function (callback) {

        }
      }
      _$.prototype.Init.prototype = _$.prototype;
      _$.fn = _$.prototype;
      var isObj = function (o) {
        return Object.prototype.toString.call(o) === "[object Object]";
      }
      _$.fn.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }
      _$.extend = function (obj) {
        if (isObj(obj)) {
          for (var i in obj) {
            this[i] = obj[i];
          }
        }
      }
      window.$ = window.JQuery = _$;
    })(window);

La méthode d'utilisation est en fait

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

Le code est différent du code source de Jquery. Je suis ici pour simplifier la méthode d'écriture. Vous devez principalement réfléchir aux idées à l'intérieur.