Jquery melaksanakan $.fn.extend dan $.extend functions

Jquery melaksanakan $.fn.extend dan $.extend functions_jquery

WBOY

Lepaskan： 2016-05-16 15:05:35

asal

1384 orang telah melayarinya

Kami telah mengembangkan kaedah bind dan fungsi sedia kali ini saya ingin bercakap tentang fungsi $.fn.extend dan $.extend.

Tidak banyak lagi yang perlu diperkatakan, mari terus kepada intipati!

Mari kita lihat dahulu perbezaan antara kedua-dua fungsi ini:

$.fn.extend ialah kaedah sambungan untuk objek nod yang ditanya dan merupakan kaedah berdasarkan sambungan prototaip $

$.extend ialah kaedah tetap sambungan dan kaedah statik $.

Lihat kod yang kami tulis sebelum ini: 　　

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

Salin selepas log masuk

Ini adalah kod badan utama.

Izinkan saya melanjutkan kaedah $.fn.extend dahulu:

Tujuan asal kaedah ini ialah selepas kita memanjangkannya, kita boleh menggunakan $("").newMetod() untuk mengaksesnya, sebenarnya, ia adalah untuk menambah kaedah lanjutan pada prototaip $. Fn di tengah sebenarnya serupa dengan peranan ruang nama dan tidak mempunyai kepentingan praktikal. Untuk membezakannya daripada $.extend.

Mereka yang biasa dengan prototaip akan tahu sepintas lalu: tidakkah cukup untuk membiarkan $.fn menunjuk kepada prototaip $?

Jadi kami mempunyai sekeping kod berikut: _$.fn = _$.prototaip;

Seterusnya kami akan menambah kaedah lanjutan:

  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];
        }

      }
    }

Salin selepas log masuk

Fungsi isObj dalam kod ini adalah untuk menentukan sama ada parameter masuk ialah objek objek _$.fn.extend Kaedah ini sebenarnya sama dengan _$.prototype.extend sama dengan kod sumber JQUERY Ia tidak sama, saya menulisnya mengikut kehendak saya sendiri.

Mari laksanakan kaedah $.extend Seperti yang dinyatakan sebentar tadi, kaedah ini sebenarnya menambah kaedah statik kepada $

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

Salin selepas log masuk

Anda akan mendapati bahawa kedua-dua kaedah adalah sama, tetapi jika anda memikirkannya dengan teliti, ia adalah berbeza:

_Ini dalam $.fn.extend sebenarnya mewakili $.prototaip, dan ini dalam $.extend mewakili $.

Kami telah melaksanakan dua kaedah ini, dan berikut ialah kod penuh:

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

Salin selepas log masuk

Kaedah penggunaan sebenarnya

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

Salin selepas log masuk

Kod ini berbeza daripada kod sumber Jquery. Saya berada di sini untuk memudahkan kaedah penulisan.