教你一步一步写jQuery插件

开发jQuery插件需要注意的事项：1。确保jQuery中只有一个命名空间。2.理解选项参数用于控制插件的行为。3.为默认插件设置提供公共访问权限。4.为子功能提供公共访问权限。5.私有函数绝对是私有访问。6.支持元数据插件。我将在下面的例子中逐一解释上述条件。完成这些工作后，我们将创建一个简单的插件来突出显示文本。1.明确jQuery只有一个命名空间。在我们的例子中，我们将这个插件命名为Hilight 。

也就是说，我们的插件可以通过以下方式使用：。

为什么jQuery的插件只有一个名字空间？它可能是一个设计需求，或者它可能更可读，或者它可能是面向对象的设计模式。2.了解控制插件行为的选项参数。让我们为我们的hilight插件澄清前景和背景的颜色。我们应该能够允许这两个选项作为选项对象传递给插件的主要功能。例如： 。

现在插件可以设置如下属性： 。

3.为默认插件设置提供公共访问权限。我们可以在这里进行改进，也就是让上面的代码可以设置和扩展。这样，使用这个插件的用户可以用最少的代码重新加载我们的选项。这就是为什么我们开始使用函数对象。

现在用户可以在他们的脚本中使用一行代码来设置前台属性： 。

通过上面的代码，我们可以将DOM控件的前景颜色设置为蓝色。

4.为子功能提供公共访问权限类似于上面的子句，这可以使您的插件具有非常有趣的扩展功能。比如在LIGHT的插件中，我们可以定义一个函数为format，我们可以定义lilight的文本形式。我们的插件代码将显示如下： 。

在这里，我们可以很容易地支持另一个选项对象，通过回调函数重载默认格式。这将是支持定制的另一个好方法。5.私有函数绝对是私有访问。这当然是一个非常强大的功能，一些公共插件选项可以定制。但是您需要考虑哪些部分应该公开，哪些部分不应该通过外部访问，否则会破坏您的打包结果。

这里，调试方法不能从外部访问，因为它是插件表示中的私有方法。6.支持元数据插件。元数据插件的使用取决于插件的类型，这可能会使插件更强大。就我个人而言，我更喜欢元数据插件，因为它甚至可以通过标签重载我的plguin选项。

如果元数据插件可以成功封装到我们的插件中，那么这个lilight插件可以通过以下标签使用。

最终代码如下：复制代码代码如下：////创建闭包//(函数($){////插件定义/$。fn。hilight=function(options){ debug(this)；//在元素迭代之前构建主选项var opts=$ .extend({}，$.fn.hilight.defaults，options)；//迭代并重新格式化每个匹配的元素返回这个。每个(函数(){ $ this=$(this)；//构建元素特定选项var o=$ .梅塔。$.extend({}，opts，$ this。data()): opts；//更新元素样式这个。CSS({背景色： o .背景，颜色： o .预测})；定义变量标记=$这个。html()；//调用我们的格式函数加价=$。fn。hilight。格式(标记)；$this.html(标记);});};////用于调试的私有函数//函数debug($ obj){ if(window。控制台窗口。控制台。日志)窗口。控制台。日志(' hilight选择计数： ' $ obj。size())；};////定义并公开我们的格式函数//$ .fn。hilight。format=function(txt){ return ' strong ' txt '/strong '；};////插件默认值//$。fn。hilight。默认值={前景： '红色，背景： '黄色}；////end of closure//})(jQuery)；