Question

如何制作JQuery Plugin 插件【插件参数的配置】

Answer 1

如果你的脚本包含多个插件或者是互补的插件（像$.fn.doSomething()和$.undoSomething()），那么你可以根据要求声明多个名称。但一般情况下，力争用单一的名称来维持插件现实的所有细节。在本例中，我们将声明一个叫“hilight”的名称// 插件的定义 $.fn.hilight = function( options ){ // 这里就是插件的实现代码了... };然后我们可以像这样调用它：$("divTest").hilight(); 接受一个options参数，以便控件插件的行为$.fn.hilight = function(options){ var defaults = { foreground : 'red', background : 'yellow' }; //Extends out defaults options with those privided 扩展我们默认的设置 $.extend(defaults,options); };而我们可以这样使用它：$('#myDiv').hilight({ foreground: 'blue' }); 暴露插件的默认设置 ，以便外面可以访问作为插件的提升和优化，我们应该将上面的代码暴露出来作为插件的默认设置。这非常重要，这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势： $.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' }; 这里值得注意的是$.extend()第一个参数是一个空的对象，这样可以让我们重写插件的默认设置用户可以像这样使用插件：// 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' }); 适当地将子函数提供给外部访问调用这个例子延续前面的例子，你会发现有一个有趣的方法可以扩展你的插件（然后还可以让其他人扩展你的插件 :)）。例如，我们在插件里声明了一个函数叫“format”用来高这显示文本，我们的插件实现代码可能是这样子的：$.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 + ''; }; 保持私有函数暴露插件有部分内容提供重写看上去似乎非常强大，但是你必须认真地考虑你的插件哪一部分是需要暴露出来的。一旦暴露出来，你就需要考虑这些变化点，一般情况下，如果你没有把握哪部分需要暴露出来，那么你可以不这样做。那如何才能够定义更多的函数而不将其暴露出来呢？这个任务就交给闭包吧。为了证实，我们在插件中添加一个函数叫“debug”，这debug函数将会记录已选择的元素数量到FireBug控制台中。为了创建闭包，我们将插件定义的整部分都包装起来：//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);这样“debug”方法就不能被闭包这外调用了 支持元数据插件 依赖于所写的插件类型，并支持元数据插件会使得其本身更加强大。个人来讲，我喜欢元素据插件，因为它能让你分离标签中重写插件的配置（这在写demo和示例时特别有用）。最重要的是，想现实它特别的容易！