1. Put all your code inside a closure

This is the one I use the most. But sometimes methods outside the closure cannot be called.

However, your plugin's code only serves your own plugin, so this problem does not exist. You can put all the code inside a closure. And methods should probably be placed inside the Prototype methods.

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

2. Provide default options for the plugin

Your plugin should have some options that developers can set, so it is necessary to provide default options for restoration. You can set these options through jQuery's extend function:

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

3. Return an element

JavaScript/jQuery has a great feature of method chaining, so we should not break this feature and always return an element from methods. I follow this in every one of my jQuery plugins.

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

4. Put one-time code outside the main loop

This one is important but often ignored. Simply put, if you have a piece of code that is a set of default values and only needs to be instantiated once, not every time your plugin function is called, you should put this code outside the plugin method. This makes your plugin run more efficiently and saves memory.

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 "defaultSettings" in the above code is completely outside the plugin method. Since this code is inside the closure, we don't need to worry about these variables being overwritten.

5. Why set up Class Prototyping

Methods and functions, as the flesh and blood of your code, should be placed inside the prototype functions. There are two reasons:

• It can save a lot of memory because you don't have to create these methods repeatedly.
• Referencing an existing method is much faster than creating a new one.

Simply put, prototype extends an object and provides methods for it without having to instantiate these methods in every object. It also makes your code more organized and efficient. Once you get used to this development style, you'll find it saves you a lot of time in future projects.

6. How to set up Class Prototyping

Setting up a prototype method has two parts. First, we need to create our initial class definition, which in most cases means creating an object. This definition contains the parts that differ for each object instance. In my Paint jQuery Plugin, I wrote it like this:

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

Now add the global methods:

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

7. Use the "this" object

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

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 always save settings in each object, and then operate on its own settings. This way you don't have to pass many parameters between different methods. Putting these variables in the object also makes it convenient to call them elsewhere.

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

9. Separate your Prototype method logic

This may be a basic principle. When you are hesitating whether to provide a method, you can ask yourself, "If someone else wants to rewrite this method, can your code meet their needs?" or "How difficult would it be for someone else to write this method?" Of course, this is a matter of balancing flexibility. Here are the methods from my Color Picker jQuery Plugin for your reference:

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

10. Provide Setter/Getter options

This one is not required, but I find all my plugins use it. Because it only takes a little bit of code to provide others with a feature they might need.

Basically, we just need to let developers set or get the values that already exist on the element:

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