Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 15:05:35
Original
1371 people have browsed it

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

Copy after login

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

      }
    }

Copy after login

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

Copy after login

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

Copy after login

The method of use is actually

$.fn.extend(

{

   method:function(){

}

})

$.extend(

{

   method:function(){

}

})

Copy after login

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.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template