jQuery plugin development mode
There are generally three development methods for jquery plugins:
Extending jQuery via $.extend()
Add new methods to jQuery via $.fn
Created by applying jQuery UI's widget factory via $.widget()
The first $.extend() is relatively simple, and complex plug-ins are rarely developed independently. The third is an advanced development mode, which will not be introduced in this article. The second is the general way of plug-in development, this article focuses on the second.
Plugin development
The second plug-in development method is generally defined as follows
The code is as follows Copy code
$ .fn.pluginName = function () {
//your code here
}
Plug-in development, we generally use object-oriented thinking
For example, define an object
The code is as follows Copy code
var Haorooms= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//The method of defining haorooms
haorooms.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
$.extend({}, this.defaults, opt) has {} mainly to create a new object and keep the default value of the object.
The code is as follows Copy code
$.fn.myPlugin = function(options) {
//Create an entity of haorooms
var haorooms= new Haorooms(this, options);
// call its method
return Haorooms.changecss();
}
You can call this plugin directly as follows
The code is as follows Copy code
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})
Problems with the above development method
There is a serious problem with the above development method, which is to define a global Haorooms, which is not good for the compatibility of plug-ins and other aspects. If Haorooms are used elsewhere, your code will be miserable! Now that we wrap the above code with a self-invoking anonymous function, this problem will not arise! Including the development of js plugins, the same is true. We wrap the code written by ourselves with a self-invoking anonymous function, and that's it! The wrapping method is as follows:
The code is as follows Copy code
(function(){
})()
Wrap it up with this one above and you're done.
But there is another problem. When we study Daniel's code, we often see ";" in front, which is to avoid unnecessary errors such as code merging.
For example, let's define a function at random:
The code is as follows Copy code
var haoroomsblog = function () {
}
(function(){
})()
Because there is no semicolon after the function of haoroomsblog, the code is wrong. In order to avoid this kind of situation, it is usually written like this!
；(function(){
})()
Wrap your plugin code in it, and it's a simple plugin. (Note that this is true for both js plugins and jquery plugins)
still have a question
wrap your plugin in
The code is as follows Copy code
；(function(){
})()
Basically it's perfect. However, in order to make the plug-ins you develop more widely used and have better compatibility, some special practices of people who use plug-ins should also be taken into account. For example, some friends change the prefix "$" of jquery to avoid conflicts between jquery and zeptojs. For "jQuery", some friends will modify the default document and other methods. In order for your plugin to run as usual when these things are fixed, then our approach is to wrap the code in the following:
The code is as follows Copy code
;(function($,window,document,undefined){
// our code. .
})(jQuery,window,document);
You can avoid some of the above situations!
a general framework
Before writing your own jQuery plugin, it is natural to study plugins written by others. In fact, there is basically a general framework for writing jQuery. OK, let's copy this framework too.
The code is as follows Copy code
(function($){
$.fn.yourName = function(options){
//Various properties and parameters
}
var options = $.extend(defaults, options);
this.each(function(){
// plugin implementation code
});
};
})(jQuery);
With that, we can put things in there.
Names, Parameters and Properties
I have finally started to roam the rivers and lakes. I must have a resounding name. In this way, when I walk on the rivers and lakes, I can be a bully? , We must have a resounding name here, it must be simple, clear, and authoritative. Therefore, it is decided that it is called "tableUI"!
Parameters and properties are also very simple, nothing more than the names of three classes. It's called: evenRowClass, oddRowClass and activeRowClass.
So, for the frame above, let's fill in the upper body.
The code is as follows Copy code
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
//implementation code
});
};
})(jQuery);
Here is the point of emphasis:
var options = $.extend(defaults, options);
It looks very? Nuo sac paralyzed? Chuan rice fades and choked happy ⒍ oh rhyme? ??绻?Swinging Chu?Tuomei?Department of Mou Wen?Oguo?Wandering the private badger na Su dazzle? Shao Yuanwei?Query's official documentation: http://api.jquery.com/jQuery.extend/
start lower body
ok, the upper body is filled, let's fill the lower body. It's nothing more than finding the cardinal line and the even line (thanks to jQuery for providing a similar way of writing tr:even, which makes it extremely simple), and then add the corresponding class. Then you can bind mouseover and mouseout events to all trs. The lower body code is as follows:
The code is as follows Copy code
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable = $ (this);
//Add parity row color
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//Add active row color
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);
The most important step!
Maybe some of my friends think this is done. But on the contrary, we still have the most important step to complete, that is, be sure to write the name of the plugin, version number, completion date, author, author's contact information, date of birth, measurements, etc. above the plugin. Because only in this way can this plug-in be professional enough.
The code is as follows Copy code
/*
* tableUI 0.1
* Date: 2010-03-30
* Using tableUI can easily prompt the user experience of the table. The function provided first is that the color of the odd and even rows alternates, and the mouse is moved up to highlight it.
*/
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable = $ (this);
//Add parity row color
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//Add active row color
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);
At this point, the plugin you developed is perfect!