所谓 jQuery 插件,怎样开发一个 jQuery 插件简单来说,所谓 jQuery 插件就是扩展在 jQuery 原型对象上的一个方法。通过扩展 jQuery 对象,每次调用 jQuery 对象的时候,对象里面都包含了我们自己所添加的那个方法。 一般插件的设计目的都是为了能在选择器所选择的结果集上做某些事情,本质上和 jQuery 自带的 制作好自己的插件后,可以在自己的项目中私用,如果你愿意的话,也可以免费公开给其它人使用。而且,现在互联网上的免费插件也非常的多。另外,制作一个属于自己的 jQuery 插件的门槛真的很低。 如何制作一个插件一个典型的插件制作方法如下: (function($){ $.fn.myNewPlugin = function() { return this.each(function(){ // do something }); }; }(jQuery)); 不要被上面的代码迷惑,制作 jQuery 插件的关键点就是扩展 jQuery 的原型对象,其实也就是下面这行代码: $.fn.myNewPlugin = function() { /* do something */ } 然后再将其封装在一个自执行函数中: (function($){ //... }(jQuery)); 其实也就是创建一个私有的作用域来扩展 jQuery,在这个作用域中可以随意使用 所以,真正意义上的插件代码就是以下部分: $.fn.myNewPlugin = function() { return this.each(function(){ // do something }); }; 其中的 var somejQueryObject = $('#something'); $.fn.myNewPlugin = function() { alert(this === somejQueryObject); }; somejQueryObject.myNewPlugin(); // alerts 'true' 一个典型的 jQuery 对象通常包含许多 DOM 元素,所以说 jQuery 对象也被看做是 DOM 对象集。因此,如果要对对象集中的每个元素作处理,就要借助于 jQuery 的 $.fn.myNewPlugin = function() { return this.each(function(){ }); }; 和其它大多数 jQuery 方法一样,jQuery 的 (function($){ $.fn.showLinkLocation = function() { return this.filter('a').each(function(){ $(this).append( ' (' + $(this).attr('href') + ')' ); }); }; }(jQuery)); // Usage example: $('a').showLinkLocation(); 此小插件的功能就是将每个超链接的地址,在超链接后面也显示出来: <!-- 插件调用前: --> <a href="page.html">Foo</a> <!-- 插件调用后: --> <a href="page.html">Foo (page.html)</a> 其实,这个插件的代码还可以再优化一下: (function($){ $.fn.showLinkLocation = function() { return this.filter('a').append(function(){ return ' (' + this.href + ')'; }); }; }(jQuery)); 我们使用一个匿名的回调函数作为 这里还有另外一个插件的例子,这个例子中并没有使用 (function($){ $.fn.fadeInAndAddClass = function(duration, className) { return this.fadeIn(duration, function(){ $(this).addClass(className); }); }; }(jQuery)); // Usage example: $('a').fadeInAndAddClass(400, 'finishedFading'); 什么时候才需要自己写插件有时候我们需要用一小段代码实现某功能,并且这个功能在其它很多地方都可能被复用,那么这时可以考虑将这个功能写成插件。 大多数插件都仅仅是在 下面又是一个简单的 jQuery 插件示例: // 定义插件 (function($){ $.fn.hoverClass = function(c) { return this.hover( function() { $(this).toggleClass(c); } ); }; })(jQuery); // 调用插件 $('li').hoverClass('hover'); 要想了解更多关于 jQuery 插件开发的方法,可以参考 Mike Alsup 撰写的 A Plugin Development Pattern 一文,文中详细介绍了一款名为 该插件的设计模式如下: // // 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 markup = $.fn.hilight.format(markup); $this.html(markup); }); }; // // 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 closure // })(jQuery); |
|