Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about which 10 suggestions can create a better jQuery plug-in. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

After developing many jQuery plug-ins, I slowly fumbled out a set of standard structures and patterns for developing jQuery plug-ins. This way I can copy & paste most of the code structure, as long as I focus on the main logic code.

Using the same design pattern and architecture also makes it easier to fix bug or secondary development. A proven architecture ensures that there is no big problem with my plug-in, whether the plug-in is simple or complex.

I am here to share 10 lessons I have summed up.

1. Put all your code in the closure

This is the one I use most. But sometimes methods outside the closure cannot be called. However, the code of your plug-in only serves your own plug-in, so there is no problem, you can put all the code in the closure. The method should probably be placed inside the Prototype method, which we'll talk about later.

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

two。 Provides default options for plug-ins

Your plugin should have some options that can be set by developers, so it is necessary to restore the default option. You can set these options through the extend feature of jQuery:

Var defaultSettings = {mode: 'Pencil', lineWidthMin:' 04th, lineWidthMax: '104th, lineWidth:' 2'}; settings = $.extend ({}, defaultSettings, settings | | {})

3. Use to return an element

A good feature of JavaScript/jQuery is that it can cascade methods, so we should not break this feature and always return an element in the method. I follow this rule in every one of my jQuery plug-ins.

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

4. The one-time code is placed outside the main loop

This one is important, but it is often overlooked. To put it simply, if you have a piece of code that is a bunch of default values and only needs to be instantiated once, rather than every time your plug-in function is called, you should put this code outside the plug-in method. This allows your plug-in to run more efficiently and save memory. We will look at the practical application of this method when we discuss prototype later.

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

You'll notice that the "defaultSettings" in the above code is completely outside the plug-in method, and since the code is in the closure, we don't have to worry about these variables being rewritten.

5. Why set up Class Prototyping

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

◆ can save a lot of memory because you don't have to create these methods repeatedly.

It is much faster for ◆ to refer to an off-the-shelf method than to recreate one.

Simply put, prototype extends an object to provide methods for it, rather than instantiating those methods in each object. It also makes your code more organized and efficient. Once you get used to this way of development, you will find that it will save you a lot of time in your future projects.

6. How to set up Class Prototyping

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

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

Here's how to add a global method:

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

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

7. Use the this object

By using "$this", we can pass the correct reference to other closures. We may also need to pass a $this reference to other methods. It is important to note that the name $this can be changed, any variable name can be changed.

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 my own settings in each object, and then manipulate its own settings. So you don't have to pass a lot of parameters in different methods. Putting these variables in the object also makes it easy for you 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 hesitant to provide a method, you can ask yourself, "if someone else wants to rewrite this method, will your code meet their needs?" Or "how difficult is it for others to write this method?" Of course, this is a question of flexibility. Here is a list of my Color Picker jQuery Plugin methods, which you can refer to:

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

10. Provide Setter/Getter option

This one is not necessary, but I find that all my plug-ins use this one. Because it only needs a little bit of code, it can provide others with a function that they may need.

Basically, we just need to allow the developer to set or get the value that the element already exists:

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

First we associate the element with the object, and then we can reference it. We do the following before returning the element:

Return this.each (function () {var elem = $(this); var canvas = new Canvas (settings); / / run some code here elem.data ("_ wPaint_canvas", canvas);}

The following code defines exactly what we are going 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}})

The above ten basically cover the core of jQuery plug-in development and can be used as a template for development. Having a basic set of code can greatly shorten your development time and make you more confident when designing plug-in architecture.

These are the 10 suggestions that can be shared by the editor to create a better jQuery plugin. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.