The simple implementation principle of the jquery plug-in extension extend _jquery

believe that each front-end small partner to jquery are not unfamiliar with it, it is one of the greatest charm is a large number of plug-ins to help us to achieve a variety of features easier.

A few nights ago, free to do nothing, on their own to write a simple jquery plug-ins, the function is very simple, just let the selected elements highlighted, but some of the ideas, it is worth learning, you can poke here to see the code.

This article does not talk about how to write jquery plug-ins, we talk about how to implement the jquery plug-in extension function, extend is how to implement the plug-in we write to mount jquery. Daniel can go out and turn right ... ）

We can simulate creating a mini jquery.

var $ = {};

OK, it's so simple ...

Below we will mount a extend method on this object to allow developers to add features and methods to this object.

var $ = {
   Extend:function (ob) {
      /** temporarily whatever is written inside **/
   } 
 }

Now we have added a extend method to the $ object, which can be invoked externally by means of $.extend (obj).

Let's say we're going to add a method to $ above, that is, add a plugin, we just need to:

$.extend ({
   myfunction:function (obj) {
     //do something ...   
   }
 })

Now you only need $.myfunction (obj), and you can implement what you want to do within the method.

The crux of the problem comes, we obviously put the method on the $.extend, why can directly use $ to call? Here's a look at how the extend internally processed the incoming obj.

var $ = {
  Extend:function (obj) {for
    (var key in obj) {
      this.__proto__[key]=obj[key];
  }
}}

It turns out that extend the incoming obj and then hangs it on the $ __proto__ so that it can call the method on the prototype at any time.

Of course, in fact, the extend implementation of jquery is much more complicated than this, and here is just the basic idea of the implementation of the jquery plug-in, which is to mount the common method onto the object's prototype.

Specific plug-in writing can look at the beginning of the link to the article, I have written every detail of the plug-in to do a comment, we learn from each other!

The above is a small series for everyone to bring the jquery plug-in expansion extend the simple realization of the principle of all content, I hope that we support cloud Habitat Community ~