Jquery implements $. fn. extend and $. extend functions, jquery. extend

Jquery implements $. fn. extend and $. extend functions, jquery. extend

We have extended the bind method and the ready function. This time I will talk about the $. fn. extend and $. extend functions.

Let's talk about other theme topics!

Let's take a look at the differences between the two functions:

$. Fn. extend is an extension method for the queried Node object. It is a $-based prototype extension method.

$. Extend is a general extension method and is a static method of $.

Let's take a look at the code we wrote earlier:

   (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 subject code.

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

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

If you are familiar with the prototype, you can see that it is not enough to let $. fn point to the prototype of $?

So we have the following 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];        }      }    }

In this Code, isObj is used to determine whether the input parameter is an object. fn. the extend method is actually used with _ $. prototype. the extend is the same. You can see that this Code may be different from the JQUERY source code. I wrote it according to my own meaning.

The following describes how to implement the $. extend method. As mentioned earlier, 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 them carefully, they are different:

_ $. Fn. this in extend actually represents $. prototype, and $. extend represents $.

We have implemented these two methods, providing all the 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 usage is actually

$.fn.extend({   method:function(){}})$.extend({   method:function(){}})

The code is different from the Jquery source code. I want to simplify the writing method. You need to consider the ideas in it. Thank you for reading.

Articles you may be interested in:

• How to Use extend and fn. extend of jquery
• JQuery. extend function details
• Detailed usage of jQuery. extend Functions
• Implementation methods and examples of jQuery. extend ()
• Two methods for developing plug-ins: jquery. fn. extend and jquery. extend
• Two Methods for jQuery plug-in development and $. fn. extend explanation
• Introduction to extend in JQuery
• Examples of jQuery. extend () and jQuery. fn. extend () extension methods
• JQuery $. extend () usage Summary
• Native js achieves copying objects, extension objects are similar to the extend () method in jquery