How to Create a high-quality JQuery Plugin

JQuery Plugin plug-in. If you do not understand what the JQuery plug-in is or do not know how to compile it, you can view its official website: jQuery Authoring Guidelines.
Well, there are some requirements that I think a good plug-in must have:
1. Declare only one name in the JQuery namespace
2. Accept the options parameter to control the actions of the plug-in.
3. Expose the default settings of the plug-in for external access
4. Provide the sub-function to external access calls as appropriate
5. Keep private functions
6. Support for metadata plug-ins
The following steps are performed one by one:
Declare only one separate name
This indicates a separate plug-in script. If your script contains multiple plug-ins or complementary plug-ins (such as $. fn. doSomething () and $. undoSomething (), you can declare multiple names as required. But in general, we strive to use a single name to maintain all the details of the plug-in reality.
In this example, we will declare a name named "hilight ".
Copy codeThe Code is as follows:
// Plug-in Definition
$. Fn. hilight = function (options ){
// Here is the implementation code of the plug-in...
};
Then we can call it like this:
$ ("DivTest"). hilight ();

Accept an options parameter to facilitate the action of the control plug-in.
Copy codeThe Code is as follows:
$. Fn. hilight = function (options ){
Var defaults = {
Foreground: 'red ',
Background: 'yellow'
};
// Extends out defaults options with those privided Extends our default settings
$. Extend (defaults, options );
};

We can use it like this:
Copy codeThe Code is as follows:
$ ('# MyDiv'). hilight ({
Foreground: 'blue'
});

Expose the default settings of the plug-in for external access
As a plug-in Upgrade and optimization, we should expose the above Code as the default settings of the plug-in.
This is very important, so that users who use the plug-in can easily rewrite or customize the plug-in with the least amount of code. However, we can use the advantages of JavaScript function objects:
Copy codeThe Code is as follows:
$. Fn. hilight = function (options ){
// Extend our default options with those provided
// Note that the first arg to extend is an empty object
// This is to keep from overriding our "defaults" object
Var opts = $. extend ({}, $. fn. hilight. defaults, options );
}
$. Fn. hilight. defaults = {
Foreground: 'red ',
Background: 'yellow'
};

It is worth noting that the first parameter of $. extend () is an empty object, so that we can rewrite the default settings of the plug-in.
You can use the plug-in as follows:
Copy codeThe Code is as follows:
// Override plugin default foreground color
$. Fn. hilight. defaults. foreground = 'blue ';
//...
// Invoke plugin using new defaults
$ ('. HilightDiv'). hilight ();
//...
// Override default by passing options to plugin method
$ ('# Green'). hilight ({
Foreground: 'green'
});

Provide the sub-function to external access calls as appropriate
This example continues the previous example, and you will find an interesting way to expand your plug-in (and then let others expand your plug-in :)). For example, we declare a function named "format" in the plug-in to increase the display text. Our plug-in implementation code may be like this:
Copy codeThe Code is as follows:
$. Fn. hight = function (options ){
// Iterate and reformat each mached element
Return this. each (function (){
Var $ this = $ (this );
//...
Var markup = javasthis.html ();
// Call our format function
Markup = $. fn. hilight. format (markup );
Export this.html (markup );
});
};
// Define our format function
$. Fn. hilight. format = function (txt ){
Return '<strong>' + txt + '</strong> ';
};

Keep private functions
Some of the content provided by the exposure plug-in seems very powerful, but you must seriously consider which part of your plug-in needs to be exposed. Once exposed, you need to consider these changes. Generally, if you are not sure which part needs to be exposed, you can leave it alone.
How can we define more functions without exposing them? This task should be handed over to the closure. To verify that we add a function named "debug" to the plug-in, which records the number of selected elements to the FireBug console. To create a closure, we wrap the entire part of the plug-in definition:
Copy codeThe Code is as follows:
// Create closure
(Function ($ ){
// Plugin definition
$. Fn. hilight = function (options ){
Debug (this );
//...
};
// Private function for debuggin
Function debug ($ obj ){
If (window. console & window. console. log ){
Window. console. log ('hilight selection count: '+ $ obj. size ());
}
}
//...
// End of closure
}) (JQuery );

In this way, the "debug" method cannot be called outside the closure.
Metadata plug-in supported
Depending on the plug-in type, and supporting metadata plug-ins will make it more powerful. Personally, I like element data plug-ins because they allow you to separate tags from rewrite plug-in configurations (this is particularly useful when writing demos and examples ). The most important thing is that it is very easy to realize it!
Copy codeThe Code is as follows:
$. Fn. hilight = function (options ){
// Build main options before element interation
Var opts = $. extend ({}, $. fn. hilight. defaults, options );
Return this. each (function (){
Var $ this = $ (this );
// Build element specific options
Var o = $. meta? $. Extend ({}, opts, $ this. data (): opts;
// In general, the metadata function is supported.
});
}

Several changes have completed the following:
1. Check whether metadata has been configured
2. If configured, the configuration attributes and additional metadata are extended.
Copy codeThe Code is as follows:
<! -- Markup -->
<Div class = "hilight {background: 'red', foreground: 'white'}">
Have a nice day! This is metadata
</Div>
<Div class = "hilight {foreground: 'Orange '}">
Have a nice day! Configure in tags
</Div>
<Div class = "hilight {background: 'green'}">
Have a nice day!
</Div>

Then, we can use a script to separately highlight these div labels based on the metadata Configuration:
Copy codeThe Code is as follows:
$ ('. Hilight'). hilight ();

Finally, put all the Code together:
Copy codeThe Code is as follows:
//
// Create closure
//
(Function ($ ){
//
// Plugin definition
//
$. Fn. hilight = function (options ){
Debug (this );
// Build main options before element iteration
Var opts = $. extend ({}, $. fn. hilight. defaults, options );
// Iterate and reformat each matched element
Return this. each (function (){
$ This = $ (this );
// Build element specific options
Var o = $. meta? $. Extend ({}, opts, $ this. data (): opts;
// Update element styles
Export this.css ({
BackgroundColor: o. background,
Color: o. foreground
});
Var markup = javasthis.html ();
// Call our format function
});
}
//
// Private function for debugging
//
Function debug ($ obj ){
If (window. console & window. console. log ){
Window. console. log ('hilight selection count: '+ $ obj. size ());
}
};
//
// Define and expose our format function
//
$. Fn. hilight. format = function (txt ){
Return '<strong>' + txt + '</strong> ';
};
//
// Plugin defaults
//
$. Fn. hilight. defaults = {
Foreground: 'red ',
Background: 'yellow'
};
//
// End of clousure
//
}) (JQuery );

Reprinted please indicate the source http://samlin.cnblogs.com
I hope you can open the method at the end when developing jquery plugin.
Return {
Method1: funcion (){},
Method2: funcion (){}
}

In this way, we can use the following method to call
Var plugin = $ ("<div/>"). plugin ();
Plugin. mehtod1 ();
Plugin. method2 ();