JQuery plugin rapid development of the 10 skills (turn)

1. all in your code inside the closure

This is the one I use the most. But sometimes the method closures would not call out. But your plug-in code just for your own plug-in service, so there is no problem, you can put all the code are placed inside the closure. The method may be placed inside the Prototype method, we'll come back this.

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

2. Provide the default option plug-in

Your plugin should be some options that allow developers to set up, so the offer to restore the default option is necessary. You can jQuery's extend function to set these options:

var defaultSettings = {
    mode            : ’Pencil’,
    lineWidthMin    : ’0′,
    lineWidthMax    : ’10′,
    lineWidth       : ’2′
};

settings = $.extend({}, defaultSettings, settings || {});

3. Use a return element

JavaScript / jQuery has a nice feature is that the method can be cascaded, so we should not destroy this feature, always returns an element in the process. I kept this one in my every jQuery plugin.

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

4. The single-use code in the main loop outside

This is a very important, but often overlooked. Simply put, if you have a piece of code is a bunch of defaults, need only be instantiated once, not every time you plug-in function calls when they are instantiated, you should put this code on the outside of the plug-in methods. This will allow you to plug-in run more efficiently, saving memory. We will be discussing the prototype in the back, look at the use of this method in practice.

var defaultSettings = {
    mode            : ’Pencil’,
    lineWidthMin    : ’0′,
    lineWidthMax    : ’10′,
    lineWidth       : ’2′
};

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

You can note that the above code "defaultSettings" is entirely out of plug-in methods, because the code is inside the closure, we do not have to worry about these variables are rewritten.

5. Why should we set the Class Prototyping

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

◆ It can save a lot of memory, because you can not create duplicate these methods.

◆ a ready reference method is much faster than a good re-created.

Simply put, prototype is to extend an object, it provides a method, rather than in every object instantiate these methods. This also allows your code more organized and efficient. Once you get used to develop this way, you will find it in your future projects to save a lot of time for you.

6. How to set the Class Prototyping

Setting a prototype method has two parts. First we need to create our initial class definition, which means to create an object in most cases. This definition encompasses each object instance different parts. In my Paint jQuery Plugin plug-in, it is what I wrote:

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

Let's add a global approach:

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

The key here is to make prototype method is common, but each instance of the data is their own, you can use "this" reference.

7. Use the "this" target

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

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 provided in each object

I always save your settings on each object, and then set up its own operation. So you do not pass a lot of parameters in different ways. These variables on the object, also allowing you to call these variables elsewhere.

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

9. A method of separating your logic Prototype

This may be a basic principle. When you hesitate whether you need to provide a method, you can ask yourself, "If other people want to override this method, your code is able to meet his needs?" Or "someone else to write this method How hard? . " Of course, this is just the right flexibility of a problem. Here are my Color Picker jQuery Plugin way, you can refer to:

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

10. Provide Setter / Getter Options

This one is not necessary, but I found all my plug-ins are used the bag this one. Because it only requires a little bit of code that will be able to provide a function he may be required for others.

Basically, as long as we allow developers to set or get the value of existing elements:

var lineWidth = $(“#container”).wPaint(“lineWidth”);
$(“#container”).wPaint(“lineWidth”, ”5″);

First, we need to associate objects and elements, then we can refer to it. We do the following before returning elements:

return this.each(function(){
　　var elem = $(this);
　　var canvas = new Canvas(settings);
　　//run some code here
　　elem.data(“_wPaint_canvas”, canvas);
}

The following code exactly clear what we need to do:

$.fn.wPaint = function(option, settings){
　　if(typeof option === ’object’){
　　settings = option;
　　}else if(typeof option === ’string’){
　　　　　　　　if(this.data(‘_wPaint_canvas’) && defaultSettings[option] !== undefined){
　　　　　　　　　　var canvas = this.data(‘_wPaint_canvas’);
　　　　　　　　　　　　if(settings){
　　　　　　　　　　　　　　canvas.settings[option] = settings;
　　　　　　　　　　　　　　return true;
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　return canvas.settings[option];
　　　　　　　　　　　　}
　　　　　　　　}else
　　　　　　　　　　return false;
　　}
　　return this.each(function(){
　　　　//run some code here
　　}
}

More than ten substantially covers the core jQuery plug-in development, and can serve as a template development. A set of basic code can greatly shorten your development time, and allows you to design plug-in architecture when more confident.

Reprinted from: 10 Tips for rapid development of the jQuery plugin

Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3157948.html

JQuery plugin rapid development of the 10 skills (turn)

Guess you like