We recommend that you create 10 jQuery plug-ins and 10 jquery plug-ins.

We recommend that you create 10 jQuery plug-ins and 10 jquery plug-ins.

After many jQuery plug-ins have been developed, I have developed a set of relatively standard structures and modes for developing jQuery plug-ins. In this way, I can copy and paste most of the code structure, as long as I focus on the most important logic code. Using the same design pattern and architecture makes fixing bugs or secondary development easier. A verified architecture ensures that my plug-ins do not have major problems, whether simple or complex. I will share 10 of my experiences here.

1. Put all your code in the closure

This is the most widely used one. But sometimes Methods outside the closure cannot be called.

However, your plug-in code only serves your own plug-in, so this problem does not exist. You can put all the code in the closure.

Methods may be placed inside the Prototype method ,.

123	(function($)  {      //code here  })(jQuery);

2. provide default options for plug-ins

Your plug-in should have some options that developers can set, so it is necessary to provide the default options for restoring. You can use the extend function of jQuery to set these options:

12345

var defaultSettings = {      mode            : 'Pencil',                                  lineWidthMin    : '0',                                  lineWidthMax    : '10',                                   lineWidth       : '2' };   settings = $.extend({}, defaultSettings, settings || {});

3. Return an element

A good feature of JavaScript/jQuery is that it can perform method cascade. Therefore, we should not destroy this feature and always return an element in the method. I followed this line in each of my jQuery plug-ins.

123456

$.fn.wPaint = function(settings)  {      return this.each(function()  {          var elem = $(this);           //run some code here      }  }

4. Put one-time code out of the Main Loop

This is important, but is often ignored. To put it simply, if you have a piece of code with a bunch of default values, you only need to instantiate it once, instead of instantiating it every time you call your plug-in function, you should put this code out of the plug-in method. This allows your plug-in to run more efficiently and save memory.

12345678910111213

var defaultSettings = {                                 mode            : 'Pencil',                                  lineWidthMin    : '0',                                  lineWidthMax    : '10',                                   lineWidth       : '2' };   settings = $.extend({}, defaultSettings, settings || {}); $.fn.wPaint = function(settings)  {      return this.each(function()  {          var elem = $(this);           //run some code here      }  }

You can notice that the "defaultSettings" in the above Code is completely out of the plug-in method, because the code is in the closure, we don't have to worry about these variables being overwritten.

5. Why set Class Prototyping?

As the blood and flesh of your code, methods and functions should be placed in the prototype function. There are two reasons:

◆ It can save a lot of memory because you do not need to create these methods again.

◆ Referencing a ready-made method is much faster than creating a new method.

Simply put, prototype extends an object and provides methods for it, instead of instantiating these methods in each object. This also makes your code more organized and efficient. Once you get used to this development method, you will find that it saves you a lot of time in your future projects.

6. How to Set Class Prototyping

The prototype method has two parts. First, we need to create our original class definition. In most cases, this means creating an object. This definition contains different parts of each object instance. In my Paint jQuery Plugin plug-in, I wrote this:

123456

function Canvas(settings)  {      this.settings = settings;      this.draw = false;      this.canvas = null;             this.ctx = null;       return this;  }

To add a global method, follow these steps:

12345

Canvas.prototype =  {      generate: function() {          //generate code      }  }

The key here is to make the prototype method generic, but the data is owned by each instance and can be referenced with "this.

7. Use the "this" object

By using "$ this", we can pass correct references to other closures. We may also need to input $ this reference to other methods. Note that the $ this name can be changed, and any variable name can be changed.

1234567891011121314151617

Canvas.prototype =  {      generate: function()   {          //some code           var $this = this;           var buton = //...some code           button.click(function(){          //using this will not be found since it has it's own this               //use $this instead.               $this.someFunc($this);          });      },     someFunc: function($this)      {          //won't know what "this" is.          //use $this instead passed from the click event      }  }

8. Save settings in each object

I keep saving my settings in every object and then operating on its own settings. In this way, you do not need to pass many parameters in different methods. Put these variables in the object so that you can call them elsewhere.

1234	function Canvas(settings)  {      this.settings = settings;       return this;  }

9. Separate your Prototype method Logic

This may be a basic principle. When you are hesitant to provide a method, you can ask yourself, "If someone else wants to rewrite this method, can your code meet your needs ?" Or "how difficult is it for someone to write this method ?". Of course, this is a matter of flexibility. The method of my Color Picker jQuery Plugin is listed here. For details, refer:

12345678

generate()  appendColors()  colorSelect()  colorHoverOn()  colorHoverOff() appendToElement() showPalette() hidePalette()

10. Provides the Setter/Getter Option

This is not mandatory, but I found that all my plug-ins use this one. Because it only requires a little bit of code, it can provide a function that someone else may need.

Basically, we only need to allow developers to set or retrieve the existing values of the element:

1	var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");

Conclusion: The above 10 articles cover the core of jQuery plug-in development and can be used as development templates. A basic set of code can greatly shorten your development time and make you more confident when designing the plug-in architecture.