1.(function($) {
2. // plugin definition
3. $.fn.hilight = function(options) {
4. debug(this);
5. // ...
6. };
7. // private function for debugging
8. function debug($obj) {
9. if (window.console && window.console.log)
10. window.console.log('hilight selection count: ' + $obj.size());
11. };
12.// ...
13.})(jQuery);
我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。
2.6 支持Metadata插件
在你正在写的插件的基础上，添加对Metadata插件的支持能使他更强大。个人来说，我喜欢这个Metadata插件，因为它让你使用不多的"markup”覆盖插件的选项(这非常有用当创建例子时)。而且支持它非常简单。更新：注释中有一点优化建议。
Java代码
复制代码 代码如下:
1.$.fn.hilight = function(options) {
2. // ...
3. // build main options before element iteration
4. var opts = $.extend({}, $.fn.hilight.defaults, options);
5. return this.each(function() {
6. var $this = $(this);
7. // build element specific options
8. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
9. //...
这些变动行做了一些事情：它是测试Metadata插件是否被安装如果它被安装了，它能扩展我们的options对象通过抽取元数据这行作为最后一个参数添加到JQuery.extend，那么它将会覆盖任何其它选项设置。现在我们能从"markup”处驱动行为,如果我们选择了“markup”：
调用的时候可以这样写： jQuery.foo(); 或 $.foo();
Java代码
复制代码 代码如下:
1.<!-- markup -->
2.<div>
3. Have a nice day!
4.</div>
5.<div>
6. Have a nice day!
7.</div>
8.<div>
9. Have a nice day!
10.</div>
11.现在我们能高亮哪些div仅使用一行脚本：
12.$('.hilight').hilight();
2.7 整合
下面使我们的例子完成后的代码：
Java代码
复制代码 代码如下:
1.// 创建一个闭包
2.(function($) {
3. // 插件的定义
4. $.fn.hilight = function(options) {
5. debug(this);
6. // build main options before element iteration
7. var opts = $.extend({}, $.fn.hilight.defaults, options);
8. // iterate and reformat each matched element
9. return this.each(function() {
10. $this = $(this);
11. // build element specific options
12. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
13. // update element styles
14. $this.css({
15. backgroundColor: o.background,
16. color: o.foreground
17. });
18. var markup = $this.html();
19. // call our format function
20. markup = $.fn.hilight.format(markup);
21. $this.html(markup);
22. });
23. };
24. // 私有函数：debugging
25. function debug($obj) {
26. if (window.console && window.console.log)
27. window.console.log('hilight selection count: ' + $obj.size());
28. };
29. // 定义暴露format函数
30. $.fn.hilight.format = function(txt) {
31. return '<strong>' + txt + '</strong>';
32. };
33. // 插件的defaults
34. $.fn.hilight.defaults = {
35. foreground: 'red',
36. background: 'yellow'
37. };
38.// 闭包结束
39.})(jQuery);
这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。
3、总结
jQuery为开发插件提拱了两个方法，分别是：
jQuery.fn.extend(object); 给jQuery对象添加方法。
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
3.1 jQuery.fn.extend(object);
fn 是什么东西呢。查看jQuery代码，就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：
复制代码 代码如下:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick(); //页面上为：
$("#input1") 为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。
3.2 jQuery.extend(object);
为jQuery类添加添加类方法，可以理解为添加静态方法。如：
复制代码 代码如下: