jQuery插件开发总结
jQuery插件的开发包括两种：
一种是类级别的插件开发$.extend，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法，比如：$.ajax, $.getJSON等。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发$.fn.extend，即给jQuery对象添加方法。比如：$.css()等。为了保持jQuery的完整性，一般趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend。
一、$.extend(src)，
$.extend方法是将src合并到jQuery全局对象中去，相当于静态方法。
开发扩展其方法时使用$.extend方法，即jQuery.extend(object);
$.extend({ add: function(a, b) { return (a + b) }, minus: function(a, b) { return (a - b) }, print: function(a, b) { console.log(a + ',' + b); } });
页面中调用：
var i = $.add(3,2); var j = $.minus(3,2);
var k = $.print(3,2)
二、$.fn.extend，
$.fn.extend对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);
$.fn.extend({ check: function() { return this.each(function() { this.checked = true; }) }, uncheck: function() { return this.each(function() { this.checked = false; }) }, click: function() { return this.each(function(index, value) { console.log($.type(this)); console.log(index); }) } });
页面中调用：
$("input[type=checkbox]").check() $("input[type=radio]").uncheck() $("input[type=checkbox]:eq(0)").click()
来看一个综合例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>插件开发</title> <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script> </head> <body> <p></p> <p></p> <p></p> <p></p> <p></p> <script> (function($){ $.fn.myStyle=function(options){ var defaults={ color:'black', fontSize:'12px', padding:0, margin:0, text:"This is a text!", font:"microsoft yahei", } var obj=$.extend(defaults,options); return this.each(function(index, el) { var me=$(this) me.html(obj.text); me.css({ color:obj.color, fontSize:obj.fontSize, padding:obj.padding, margin:obj.margin, fontFamily:obj.font }) }); } })(jQuery) //页面调用 $("p").myStyle({ color:"red", fontSize:'18px', font:'simsun', }) </script> </body> </html>
三、插件方法
在任何情况下，一个单独的插件不应该在jQuery.fnjQuery.fn对象里有多个命名空间。
(function($) { $.fn.tooltip = function(options) { // this }; $.fn.tooltipShow = function() { // is }; $.fn.tooltipHide = function() { // bad }; $.fn.tooltipUpdate = function(content) { // !!! }; })(jQuery);
这是不被鼓励的，因为它$.fn使$.fn命名空间混乱。 为了解决这个问题，你应该收集对象文本中的所有插件的方法，通过传递该方法的字符串名称给插件以调用它们。参看下面这个代码：
(function($) { var methods = { init: function(options) { // this }, show: function() { // is }, hide: function() { // good }, update: function(content) { // !!! } }; $.fn.tooltip = function(method) { // 方法调用 if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method' + method + 'does not exist on jQuery.tooltip'); } }; })(jQuery); //调用init方法 $('div').tooltip(); //调用init方法 $('div').tooltip({ foo: 'bar' }); // 调用hide方法 $('div').tooltip('hide'); //调用Update方法 $('div').tooltip('update', 'This is the new tooltip content!');
这种方法推荐使用；
来看一个综合例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> .box{width: 300px;height: 300px;background: red;} </style> <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script> </head> <body> <div class="box">11</div> <script> (function($){ var methods={ init:function(options){ var defaults = { foreground: 'red', background: 'yellow', text:'This is a paragraph!' }; var obj=$.extend(defaults,options); $(this).each(function(){ $(this).html(obj.text); $(this).css({ color:obj.foreground, background:obj.background, }); }) }, alertClick:function(){ $(this).click(function() { alert($(this).html()); }); } } $.fn.myPlugin=function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.myPlugin'); } } })(jQuery) $('.box').myPlugin('init') $('.box').myPlugin('alertClick') </script> </body> </html>