Jquery implements $.fn.extend and $.extend functions_jquery

We expanded the bind method and ready function earlier. This time I want to talk about the $.fn.extend and $.extend functions.

Not much else to say, let’s get straight to the point!

Let’s first take a look at the difference between these two functions:

$.fn.extend is an extension method for the queried node object, and is a method based on the prototype extension of $

$.extend is an extension regular method and a static method of $.

Look at the code we wrote before: 　　

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

This is the code of the main body.

Let me extend the $.fn.extend method first:

The original intention of this method is that after we extend it, we can use $("").newMetod() to access it. In fact, it is to add an extend method to the $ prototype. The fn in the middle is actually similar to the role of a namespace and has no practical significance. To distinguish it from $.extend.

Those who are familiar with prototypes will know at a glance: wouldn’t it be enough to just let $.fn point to the prototype of $?

So we have the following piece of code: _$.fn = _$.prototype;

Next we will add the extend method:

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

      }
    }

The function of isObj in this code is to determine whether the incoming parameter is an object object. _$.fn.extend This method is actually the same as _$.prototype.extend. Take a look, this code may be the same as the JQUERY source code It’s not the same, I wrote it according to my own wishes.

Let’s implement the $.extend method. As mentioned just now, this method actually adds a static method to $. The code is as follows:

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

You will find that the two methods are the same, but if you think about it carefully, they are different:

_This in $.fn.extend actually represents $.prototype, and this in $.extend represents $.

We have implemented these two methods, and here is the full code:

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

The method of use is actually

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

The code is different from the Jquery source code. I am here to simplify the writing method. You mainly want to ponder the ideas inside. Thank you for reading.