JQuery Plugin plug-in, if you don’t understand what a JQuery plug-in is or how to write it, you can check its official website: jQuery Authoring Guidelines
Okay, here are some that I think I want to make good Plug-ins must have the following requirements:
1. Declare only a single name under the JQuery namespace
2. Accept the options parameter to control the behavior of the plug-in
3. Expose the default settings of the plug-in so that Accessible from outside
4. Appropriately provide sub-functions to external access calls
5. Keep private functions
6. Support metadata plug-ins
The following will go through them one by one:
Just declare a single name
This indicates a separate plugin script. If your script contains multiple plugins or complementary plugins (like $.fn.doSomething() and $.undoSomething()), then you can declare multiple names as required. But in general, strive to use a single name to maintain all the details of the plugin's reality.
In this example, we will declare a name called "hilight"
// Definition of plug-in
$.fn.hilight = function( options ){
// Here is the implementation code of the plug-in...
};
Then we It can be called like this:
$("divTest").hilight();
accepts an options parameter to control the behavior of the plugin
$.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 like this:
$('#myDiv').hilight({
foreground: 'blue'
});
Exposed plug-in The default settings so that the outside world can access As the improvement and optimization of the plug-in, we should expose the above code as the default settings of the plug-in.
This is very important because it makes it very easy for users of the plugin to rewrite or customize the plugin with minimal code. However, we can take advantage of the JavaScript function object:
$ .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 here that the first parameter of $.extend() is an empty object, which allows us to re- Write the default settings of the plug-in
Users can use the plug-in like this:
// 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'
});
Appropriately provide sub-functions to external access calls This example continues the previous example, you will find an interesting way to extend your plugin (and then also let others extend your plugin :)). For example, we declare a function called "format" in the plug-in to display text. Our plug-in implementation code may look like this:
$.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 ' ' txt '';
};
Keep private functions
Exposed plug-in has some content that provides rewriting. Seems very powerful, but you have to carefully consider which parts of your plugin need to be exposed. Once exposed, you need to consider these change points. Generally, if you are not sure which part needs to be exposed, then you don't have to do this.
So how can we define more functions without exposing them? Let’s leave this task to closures. To confirm, we add a function called "debug" in the plug-in. This debug function will record the number of selected elements to the FireBug console. To create the closure, we wrap the entire part of the plugin definition:
//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);
This way the "debug" method cannot be called outside the closure
Supports metadata plug-ins Depends on the type of plug-in written, and supports metadata Data plugins make themselves more powerful. Personally, I like the data plugin because it allows you to override the plugin's configuration in separate tags (this is especially useful when writing demos and examples). The most important thing is that it is extremely easy to realize it!
$.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, support the metadata function
});
}
The changes in a few lines have accomplished the following things:
1. Check whether the metadata has been Configuration
2. If configured, extend the configuration properties with additional metadata
Have a nice day!This is metadata
Have a nice day! Configure in tag
< ;/div>
Have a nice day!
Then We can highlight these div tags separately according to metadata configuration through a script:
$('.hilight').hilight();
Finally, put all the code together:
//
//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 '' txt '';
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground : 'red',
background : 'yellow'
};
//
// end of clousure
//
})(jQuery);
转载请注明出处
http://samlin.cnblogs.com 比较希望大家开发jquery plugin的时候可以在最后把方法开放出来
return {
method1: funcion() {},
method2: funcion() {}
}
这样我们在使用的时候就可以用如下方式调用
var plugin = $("
").plugin();
plugin.mehtod1();
plugin.method2();
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
