jquery Plugin Plugin If you don't understand what a jquery plugin is or don't know how to write it can view its official website: JQuery Authoring Guidelines
Well, here are some things I feel like doing a good plugin must be required:
1, under the jquery namespace declaration declares only a single name
2, accept the options parameters in order to control the behavior of Plug-ins
3, expose the default settings of Plug-ins so that the outside can access
4. Provide child functions appropriately to external access calls
5. Keep Private Functions
6. Support Meta Data plugin
The following will go through one after another:
declare only a single name
This indicates a separate plug-in script. If your script contains multiple plug-ins or complementary plug-ins (like $.fn.dosomething () and $.undosomething ()), then you can declare multiple names on demand. But generally, strive to use a single name to maintain the plug-in reality of all the details.
In this case, we're going to declare a name called "Hilight."
Copy Code code as follows:
Definition of Plug-ins
$.fn.hilight = function (options) {
Here is the implementation code of the plug-in ...
};
And then we can call it like this:
$ ("Divtest"). Hilight ();
accept an options argument so that the behavior of the control plug-in
Copy Code code as follows:
$.fn.hilight = function (options) {
var defaults = {
Foreground: ' Red ',
Background: ' Yellow '
};
Extends out defaults options with those privided extend our default settings
$.extend (defaults,options);
};
And we can use it this way:
Copy Code code as follows:
$ (' #myDiv '). Hilight ({
Foreground: ' Blue '
});
exposes the plug-in's default settings so that it can be accessed outside
As a plug-in upgrade and optimization, we should expose the above code as the default settings for Plug-ins.
This is important, so that users who use Plug-ins can easily rewrite or customize the plug-in with minimal code. However, we can use the advantages of JavaScript function objects:
Copy Code code as follows:
$.fn.hilight = function (options) {
Extend Our default options with those provided
Note that the ' the ' the ' the ' the ' the ' to extend ' an empty object
This is to keep the overriding our "Defaults" Object
var opts = $.extend ({},$.fn.hilight.defaults,options);
}
$.fn.hilight.defaults = {
Foreground: ' Red ',
Background: ' Yellow '
};
It is worth noting here that the first parameter of $.extend () is an empty object, which allows us to override the plugin's default settings
Users can use plug-ins like this:
Copy Code code 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 '
});
properly provide child functions to external access calls
This example continues with the previous example, and you will find that there is an interesting way to extend your plugin (and then allow others to extend your plugin:)). For example, we declare a function in the plugin called "format" to high this display text, our plug-in implementation code may be like this:
Copy Code code as follows:
$.fn.hight = function (options) {
Iterate and reformat each mached element
Return This.each (function () {
var $this = $ (this);
//...
var markup = $this. HTML ();
Call our Format function
Markup = $.fn.hilight.format (markup);
$this. HTML (markup);
});
};
Define our Format function
$.fn.hilight.format = function (TXT) {
Return ' <strong> ' + txt + ' </strong> ';
};
Keep Private functions
Exposing plug-ins Some of the content provided overrides may seem very powerful, but you must seriously consider which part of your plugin needs to be exposed. Once exposed, you need to consider these changes and, in general, if you are not sure which part you need to expose, then you may not do so.
So how do you define more functions without exposing them? This assignment is for the closure. To confirm, we add a function in the plug-in called "Debug", which records the number of elements selected to the Firebug console. To create a closure, we wrap the entire part of the plug-in definition:
Copy Code code 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);
So the "debug" method cannot be closed.
support Meta Data plug-ins
Relying on the type of plug-in you write and supporting the metadata plug-in makes it more powerful. Personally, I like element based plug-ins because it allows you to detach the plugin's configuration from the tags (which is especially useful when writing demos and examples). The most important thing is that it's particularly easy to be realistic!
Copy Code code 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;
General sentence, get it. Support Meta Data features
});
}
Several lines of change have completed the following few things:
1, detect whether the metadata has been configured
2. If configured, extend configuration properties with additional metadata
Copy Code code as follows:
<!--markup-->
<div class= "hilight {background: ' Red ', foreground: ' White '} ' >
Have a nice day! this is meta data
</div>
<div class= "Hilight {foreground: ' Orange '}" >
Have a nice day! is configured in the label
</div>
<div class= "hilight {background: ' green '}" >
Have a nice day!
</div>
We then use a script to highlight these div tags separately based on the metadata configuration:
Copy Code code as follows:
$ ('. Hilight '). Hilight ();
Finally, put all the code together:
Copy Code code 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
$this. CSS ({
Backgroundcolor:o.background,
Color:o.foreground
});
var markup = $this. 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);
Reprint please indicate the source http://samlin.cnblogs.com
I hope you'll be able to open the method at the end when you develop jquery plugin.
return {
Method1:funcion () {},
Method2:funcion () {}
}
So that we can call it in the following way when we use it
var plugin = $ ("<div/>"). Plugin ();
Plugin.mehtod1 ();
PLUGIN.METHOD2 ();
