jQuery插件开发全解析(3)_H5之家 - 中国HTML5教程资源分享第一站

$.fn.cycle.transitions = {

// ...

};

复制代码

　　这个技巧使其他人能定义和传递变换设置到Cycle插件。

　　2.5 保持私有函数的私有性

　　这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。一但被暴露，你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是，如果你不能肯定是否暴露特定的函数，那么你也许不需要那样做。

　　那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢?这就是闭包的功能。为了演示，我们将会添加另外一个“debug”函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包，我们将包装整个插件定义在一个函数中。

(function($) {

// plugin definition

$.fn.hilight = function(options) {

debug(this);

// ...

};

// private function for debugging

function debug($obj) {

if (window.console && window.console.log)

window.console.log('hilight selection count: ' + $obj.size());

};

// ...

})(jQuery);

复制代码

　　我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。

　　2.6 支持Metadata插件

　　在你正在写的插件的基础上，添加对Metadata插件的支持能使他更强大。个人来说，我喜欢这个Metadata插件，因为它让你使用不多的"markup”覆盖插件的选项(这非常有用当创建例子时)。而且支持它非常简单。更新：注释中有一点优化建议。

$.fn.hilight = function(options) {

// ...

// build main options before element iteration

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;

//...

复制代码

　　这些变动行做了一些事情：它是测试Metadata插件是否被安装如果它被安装了，它能扩展我们的options对象通过抽取元数据这行作为最后一个参数添加到JQuery.extend，那么它将会覆盖任何其它选项设置。现在我们能从"markup”处驱动行为,如果我们选择了“markup”：

　　调用的时候可以这样写： jQuery.foo(); 或 $.foo();

Have a nice day!

</div>

Have a nice day!

</div>

Have a nice day!

</div>

现在我们能高亮哪些div仅使用一行脚本：

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

复制代码

　　2.7 整合

　　下面使我们的例子完成后的代码：

// 创建一个闭包

(function($) {

// 插件的定义

$.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);

});

};

// 私有函数：debugging

function debug($obj) {

if (window.console && window.console.log)

window.console.log('hilight selection count: ' + $obj.size());

};

// 定义暴露format函数

$.fn.hilight.format = function(txt) {

return '<strong>' + txt + '</strong>';

};

// 插件的defaults

$.fn.hilight.defaults = {

foreground: 'red',

background: 'yellow'

};

// 闭包结束

})(jQuery);

复制代码

　　这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。

　　3、总结

　　jQuery为开发插件提拱了两个方法，分别是：

　　jQuery.fn.extend(object); 给jQuery对象添加方法。

　　jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

　　3.1 jQuery.fn.extend(object);

　　fn 是什么东西呢。查看jQuery代码，就不难发现。