Jquery は $.fn.extend および $.extend 関数を実装します

Jquery は $.fn.extend および $.extend 関数を実装します_jquery

WBOY

リリース： 2016-05-16 15:05:35

オリジナル

1385 人が閲覧しました

先ほど bind メソッドと read 関数を拡張しました。今回は $.fn.extend 関数と $.extend 関数について説明したいと思います。

他に言うことはあまりありません。早速本題に入りましょう。

まず、これら 2 つの関数の違いを見てみましょう:

$.fn.extend はクエリ対象のノードオブジェクトの拡張メソッドであり、$

のプロトタイプ拡張をベースにしたメソッドです。

$.extend は拡張の通常メソッドであり、$ の静的メソッドです。

前に書いたコードを見てください:

   (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);

ログイン後にコピー

本体のコードです。

まず $.fn.extend メソッドを拡張しましょう:

このメソッドの本来の目的は、拡張した後に $("").newMetod() を使用してアクセスできるようにすることです。実際には、$ プロトタイプに extend メソッドを追加することです。真ん中の fn は、実際には名前空間の役割に似ており、実際的な意味はありません。 $.extend と区別するため。

プロトタイプに詳しい人なら一目でわかるでしょう: $.fn に $ のプロトタイプを指すだけで十分ではないでしょうか?

次のコード部分があります: _$.fn = _$.prototype;

次に、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];
        }

      }
    }

ログイン後にコピー

このコードの isObj の機能は、受信パラメータが object オブジェクトであるかどうかを判断することです。このメソッドは実際には _$.prototype.extend と同じです。 JQUERYのソースコードと同じです同じではありません、勝手に書きました。

$.extend メソッドを実装しましょう。先ほど述べたように、このメソッドは実際に $ に静的メソッドを追加します。

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

ログイン後にコピー

2 つの方法は同じであることがわかりますが、よく考えてみると異なります。

_$.fn.extend の This は実際には $.prototype を表し、$.extend の this は $ を表します。

これら 2 つのメソッドを実装しました。完全なコードは次のとおりです:

 (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);

ログイン後にコピー

実際の使用方法は

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

ログイン後にコピー

コードは Jquery のソースコードとは異なります。ここでは主に記述方法を簡略化するために説明します。読んでいただきありがとうございます。