Home > Article > Web Front-end > How to make high-quality JQuery Plugin_jquery

How to make high-quality JQuery Plugin_jquery

WBOYOriginal: 2016-05-16 18:29:00911browse

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"

Copy the code The code is as follows:

 
// 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

Copy code The code is 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 like this:

Copy code Code As follows:

 
$('#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:

Copy code The 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 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:

Copy the code The 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' 
}); 

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:

Copy code The code is 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 ' ' 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:

Copy the code The 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); 

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!

Copy code The 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, 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

Copy code The code is as follows:

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:

Copy code The code is as follows:

$('.hilight').hilight();

Finally, put all the code together:

Copy code The 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 
$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();

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js file introduces implementation code_javascript skillsNext article：js file introduces implementation code_javascript skills

Related articles

See more