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

Source: Internet
Author: User
This article mainly introduces Jquery implementation $. fn. extend and $. for more information about extend functions, see the bind method and ready function. fn. extend and $. extend function.

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.