bob体育官方平台
制作高质量的JQuery Plugin 插件的方法

jQuery 的plugin开发需要注意的事情,1. 明确jQuery的命名空间只有一个。2. 明白options参数用来控制plugin的行为。3. 为默认的plugin设定提供公共的访问权限。4. 为子函数提供公共的访问权限。5. 私有的函数绝对是私有访问6. 支持metadata plugin。我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。

JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines
好了,下面有一些我觉得想做一个好的插件必须应有的要求:
1、在JQuery命名空间下声明只声明一个单独的名称
2、接受options参数,以便控制插件的行为
3、暴露插件的默认设置 ,以便外面可以访问
4、适当地将子函数提供给外部访问调用
5、保持私有函数
6、支持元数据插件
下面将逐条地过一遍:
只声明一个单独的名称
这表明是一个单独的插件脚本。如果你的脚本包含多个插件或者是互补的插件(像$.fn.doSomething()和$.undoSomething()),那么你可以根据要求声明多个名称。但一般情况下,力争用单一的名称来维持插件现实的所有细节。
在本例中,我们将声明一个叫“hilight”的名称

  1. 明确jQuery的命名空间只有一个

复制代码 代码如下:

在我们的例子里,我们将会命名这个插件名字为hilight,

// 插件的定义
$.fn.hilight = function( options ){
// 这里就是插件的实现代码了...
};
然后我们可以像这样调用它:
$("divTest").hilight();

也就是我们的plugin可以通过下面的方法来使用:

接受一个options参数,以便控件插件的行为

为什么jQuery的plugin只有一个命名空间?可能是设计的要求,或者是这样的话可读性更强,亦或是为了面向对象的设计模式。

复制代码 代码如下:

2.明白options参数来控制plugin的行为。

$.fn.hilight = function(options){
var defaults = {
foreground : 'red',
background : 'yellow'
};
//Extends out defaults options with those privided 扩展我们默认的设置
$.extend(defaults,options);
};

让我们先为我们的hilight插件明确一下foreground和background的颜色。我们应该能够允许这两个option作为option对象传递给plugin的主函数。例如:

而我们可以这样使用它:

现在插件能够设定如下的属性:

复制代码 代码如下:

  1. 为默认的plugin设定提供公共的访问权限。

$('#myDiv').hilight({
foreground: 'blue'
});

我们这里可以改进一下,就是让上面的代码能够设置能够扩展。这样当使用这个插件的用户能够使用最少的代码重载我们的option。这也就是我们开始使用function对象的好处。

暴露插件的默认设置 ,以便外面可以访问
作为插件的提升和优化,我们应该将上面的代码暴露出来作为插件的默认设置。
这非常重要,这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势:

现在用户可以在他们的script中使用一行代码来设置foreground属性:

复制代码 代码如下:

有了上面的代码我们就可以把某个DOM控件的foregrounf颜色设定为blue了。

$.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'
};

  1. 为子函数提供公共的访问权限

这里值得注意的是$.extend()第一个参数是一个空的对象,这样可以让我们重写插件的默认设置
用户可以像这样使用插件:

这个条款和上面的相仿,能很有趣的让你的Plugin有扩展功能。例如:在lilight的plugin中我们能够定义一个function是format,可以定义hilight的text的形式。我们的plugin代码将会显示如下:

复制代码 代码如下:

这里我们可以很容易支持另外的一个option对象来通过一个callback 函数来重载默认的formatting。那将会是另外一个不错的支持自定义的方式。

// 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'
});

  1. 私有的函数绝对是私有访问

适当地将子函数提供给外部访问调用
这个例子延续前面的例子,你会发现有一个有趣的方法可以扩展你的插件(然后还可以让其他人扩展你的插件 :))。例如,我们在插件里声明了一个函数叫“format”用来高这显示文本,我们的插件实现代码可能是这样子的:

公开plugin的一些Option能够被自定义当然是个非常强大的功能。但是你需要考虑哪部分应该被公开,哪部分不应该通过外部访问,否则会破会你已经封装好的结果。

复制代码 代码如下:

这里debug方法不能从外部访问,因为他在plugin的展现中属于私有的方法。

$.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 '<strong>' + txt + '</strong>';
};

返回顶部