编写jQuery插件

一、插件的种类

jQuery的插件主要分为三种类型：

1、封装对象方法的插件

将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。

2、封装全局函数的插件

可以将独立的函数加到jQuery命名空间之下。如jQuery.ajax()等，都是将jQuery内部作为全局函数的插件附加到内核上去的。

3、选择器插件

个别情况下，会需要用到选择器插件。需要扩充一些自己喜欢的选择器等。

二、插件的基本要点

1、jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JS库插件混淆。

2、所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。

3、在插件内部，this指向的是当前通过选择器获取的jquery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素。

4、可以通过 this.each 来遍历所有元素。

5、所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。

6、插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或数组等。

7、避免在插件内部使用$作为jQuery对象的别名，而应该使用完整的jQuery来表示，这样可以避免冲突。当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。

三、插件中的闭包

闭包：允许使用内部函数（即函数定义和函数表达式位于另一个函数的函数体内），而且，这些内部函数可以访问他们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。即内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。

利用闭包的特性，既可以避免内部临时变量影响全局空间，又可以在插件内部继续使用$作为jQuery的别名。、

必须的jquery结构：

//注意为了更好的兼容性，开始前有个分号
;（function($){              //此处将$作为匿名函数的形参/*这里置放代码，可以使用$作为jQuery的缩写别名*/
}）(jQuery);   //这里将jQuery作为实参传递给匿名函数了

常见的jquery结构：

;(function($){//这里编写插件的代码，可以继续使用$作为jQuery的别名//定义一个局部变量foo,仅函数内部可以访问，外部无法访问var foo;var bar = function(){/*在匿名函数内部的函数都可以访问foo,即便是在匿名函数的外部调用bar()的时候，也可以在bar()的内部访问到foo,但在匿名函数的外部直接访问foo是做不到的*/}/*下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围内。这样就可以在匿名函数的外部通过调用jQuery.BAR()来访问内部定义的函数bar(),并且内部函数bar()也能访问匿名函数内的变量foo*/$.BAR = bar ;
})(jQuery);

四、jQuery插件中的机制

jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。

前者用于扩展之前提到的对象方法插件，后者用于扩展全局函数和选择器插件。

这两种方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。jQuery.extend()方法除了可以用于扩展jQuery对象之外，还有一个很强大的功能，就是用于扩展/修改已有的Object对象。

//后面的对象会覆盖前面重复的对象
jQuery.extend(target,obj1,obj2,....);

通过使用jQuery.extend()方法，可以很方便的用传入的参数来覆盖默认值。

jQuery.extend, jQuery.fn.extend 和 jQuery.fn.pluginName 的联系与区别：

jQuery.extend（）的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而jQuery.fn.extend()的调用把方法扩展到prototype上。所以实例化一个jQuery对象的时候，它就具有了这些方法。

jQuery.fn.extend = jQuery.prototype.extend

;(function(){$.fn.pluginName = function(options){};//等价于var pluginName = {function(options){}}// so$.fn.extend(pluginName) = $.prototype.extend(pluginName) = $.fn.pluginName
})(jQuery);

五、编写jQuery插件

插件编写示例：

<script>//插件编写;(function(){$.fun.extend({"color":function(value){return this.css('color',value); }});})(jQuery);//插件应用$(function(){alert($('div').color('red'));});
</script><div class='a'>red</div>
<div style="color:blue">blue</div>

编写jQuery插件相关推荐

自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
编写JQuery插件-2
继续上一节的代码 (function(){/* code */ })() 来我们介绍一下吧,首先定义一个匿名函数 fnction(){/* 这里放置代码 */} 然后用括号括起来, (fnction( ...
扩展编写jquery插件的方法
比如要扩展验证功能(jquery.validate.js)中的 messages: { required: "This field is required.", remote: & ...
如何编写一个Jquery插件
首先我们来搞清楚一些关于Jquery插件的知识: 一.插件的种类: 封装对象方法的插件这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件封装全局函数的 ...
[置顶] 编写自己的JQUERY插件
如何编写自己的jquery插件 Jquery的插件主要分为三类: 1.封装对象方法的插件:大部分插件都是封装对象的插件 2.封装全局函数的插件:将独立的函数添加到jquery的命名空间之下.Jquer ...
jQuery插件编写，
jQuery插件编写 jQuery插件最近搞jquery插件的编写这里做下笔记给jquery扩展的方式很多,看的我眼花缭乱方式1 $.fun=function(){} 方式2 $.fn.fun= ...
2011年度最佳 jQuery 插件发布
近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架.jQuery 的易 ...
让人期待的2011年度最佳 jQuery 插件发布啦
近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件.jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架.jQuery 的易 ...
jquery插件封装指南
入门编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn.myPlugin = function(){//你自己的插 ...
锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件类似于jQuery中的live()方法 4.jQuer ...

编写jQuery插件

编写jQuery插件相关推荐

最新文章

热门文章