本文共 5029 字，大约阅读时间需要 16 分钟。
jquery有着成千上万的第三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就是一个简单扩展Jquery对象的demo：
(function ($) { //sample:扩展jquery对象的方法，bold()用于加粗字体 $.fn.extend({ "bold": function () { /// 加粗字体 return this.css({ fontWeight: "bold" }); } });})(jQuery); 这是一个非常简单的扩展。接下来我们一步步来解析上面的代码
根本上来说，每个插件的代码是被包含在一个即时执行的函数当中
(function(arg1, arg2) { // 代码})(arg1, arg2); 即时执行函数，顾名思义，是一个函数。让它与众不同的是，它被包含在一对小括号里面，这让所有的代码都在匿名函数的局部作用域中运行。这并不是说DOM（全局变量）在函数内是被屏蔽的，而是外部无法访问到函数内部的公共变量和对象命名空间。这是一个很好的开始，这样你声明你的变量和对象的时候，就不用担心变量名和已经存在的代码有冲突
因为函数内部所有公共变量是无法访问的，这样要把jQuery本身作为一个内部的公共变量来使用就会成为问题。就像普通的函数一样，即时函数也根据引用传入对象参数。我们可以将jQuery对象传入函数
(function($) { // 局部作用域中使用$来引用jQuery})(jQuery); 我们把公共变量“jQuery”传入了一个即时执行的函数里面，在函数局部（容器）中我们可以通过“$”来引用它。也就是说，我们把容器当做一个函数来调用，而这个函数的参数就是jQuery。因为我们引用的“jQuery”作为公共变量传入，而不是它的简写“$”，这样我们就可以兼容Prototype库。如果你不用Prototype或者其它用“$”做简写的库的话，你不这样做也不会造成什么影响，但是知道这种用法仍是一件好事
一个jQuery插件本质上是我们塞进jQuery命名空间中一个庞大的函数，当然，我们可以很轻易地用jQuery.pluginName=function来达到我们的目的，但是如果我们这样做的话我们的插件的代码是处于没有被保护的暴露状态的。“jQuery.fn”是“jQuery.prototype”的简写，意味当我们通过jQuery命名空间去获取我们的插件的时候，它仅可写（不可修改）。它事实上可以为你干点什么事呢？它让你恰当地组织自己的代码，理解如何保护你的代码不受运行时候不需要的修改。最好的说法就是，这是一个很好的实践
通过一个插件，我们获得一个基本的jQuery函数：
(function($) { $.fn.pluginName = function(options) { return this; } })(jQuery); // 代码在此处运行 上面代码中的函数可以像其他的jQuery函数那样通过“$(‘#element’).pluginName()”来调用。注意是如何把“return this”语句加进去的；这小片的代码通过返回一个原来元素集合（包含在this当中）的引用来产生链式调用的效果，而这些元素是被一个jQuery对象所包裹的。也应该注意，“this”在这个特定的作用域中是一个jQuery对象，相当于“$(‘#element’)”
根据返回的对象，我们可以总结出，在上面的代码中，使用“$(‘#element’).pluginName()”的效果和使用“$(‘#element’)”的效果是一样的。在你的即时执行函数作用域中，没必要用“$(this)”的方式来把this包裹到一个jQuery对象中，因为this本身已经是被包装好的jQuery对象
Query使用的选择器引擎叫Sizzle，Sizzle可以为你的函数提供多元素操作（例如对所有类名相同的元素）。这是jQuery几个优秀的特性之一，但这也是你在开发插件过程中需要考虑的事情。即使你不准备为你的插件提供多元素支持，但为这做准备仍然是一个很好的实践
这里添加一小段代码，让你的插件代码为多元素集合中每个元素单独地起作用：
function($) { $.fn.pluginName = function(options) { // 向jQuery中被保护的“fn”命名空间中添加你的插件代码，用“pluginName”作为插件的函数名称 return this.each(function() { // 返回“this”（函数each（）的返回值也是this），以便进行链式调用 var $this = $(this); // 此处运行代码，可以通过“this”来获得每个单独的元素;例如： $(this).show()； }); } })(jQuery); 在以上示例代码中，我并不是用 each（）在我的选择器中每个元素上运行代码。在那个被 each（）调用的函数的局部作用域中，你可以通过this来引用每个被单独处理的元素，也就是说你可以通过$(this)来引用它的jQuery对象。在局部作用域中，我用$this变量存储起jQuery对象，而不是每次调用函数的时候都使用$(this)，这会是个很好的实践。当然，这样做并不总是必要的；但我已经额外把它包含在我的代码中。还有要注意的是，我们将会对每个单独方法都使用 each（），这样到时我们就可以返回我们需要的值，而不是一个jQuery对象
假如我们的插件支持一个 val 的方法，它可以返回我们需要的值：
$('#element').pluginName('val'); // 会返回我们需要的值，而不是一个jQuery对象 一个基本的函数可能在某些情况下可以良好地工作，但是一个稍微复杂一点的插件就需要提供各种各样的方法和私有函数。你可能会使用不同的命名空间去为你的插件提供各种方法，但是最好不要让你的源代码因为多余的命名空间而变得混乱
下面的代码定义了一个存储公有方法的JSON对象，以及展示了如何使用插件中的主函数中去判断哪些方法被调用，和如何在让方法作用到选择器每个元素上
(function($) { var privateFunction = function() { // 在我们插件容器内，创造一个公共变量来构建一个私有方法 // code here } var methods = { // 通过字面量创造一个对象，存储我们需要的共有方法 init: function() { // 在字面量对象中定义每个单独的方法 return this.each(function() { // 为了更好的灵活性，对来自主函数，并进入每个方法中的选择器其中的每个单独的元素都执行代码 var $this = $(this); // 为每个独立的元素创建一个jQuery对象 // 执行代码;例如： privateFunction(); }); }, destroy: function() { return this.each(function() { // 对选择器每个元素都执行方法 // 执行代码 }); } }; $.fn.pluginName = function() { var method = arguments[0]; // 获取我们的方法，遗憾的是，如果我们用function(method){}来实现，这样会毁掉一切的 if(methods[method]) { // 检验方法是否存在 method = methods[method]; // 如果方法存在，存储起来以便使用;注意：我这样做是为了等下更方便地使用each（） } else if( typeof(method) == 'object' || !method ) { // 如果方法不存在，检验对象是否为一个对象（JSON对象）或者method方法没有被传入 method = methods.init; // 如果我们传入的是一个对象参数，或者根本没有参数，init方法会被调用 } else { $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' ); // 如果方法不存在或者参数没传入，则报出错误。需要调用的方法没有被正确调用 return this; } return method.call(this); // 调用我们选中的方法;再一次注意我们是如何将each（）从这里转移到每个单独的方法上的 } })(jQuery); 注意我把 privateFunction 当做了一个函数内部的全局变量。考虑到所有的代码的运行都是在插件容器内进行的，所以这种做法是可以被接受的，因为它只在插件的作用域中可用。在插件中的主函数中，检验了传入参数所指向的方法是否存在。如果方法不存在或者传入的是参数为对象， init 方法会被运行。最后，如果传入的参数不是一个对象而是一个不存在的方法，我们会报出一个错误信息
同样要注意的是如何在每个方法中都使用 this.each() 。当我们在主函数中调用 method.call(this) 的时候，这里的 this 事实上就是一个jQuery对象，作为 this 传入每个方法中。所以在我们方法的即时作用域中，它已经是一个jQuery对象。只有在被 each（）所调用的函数中，我们才有必要将this包装在一个jQuery对象中
为了方便用户创建插件，jquery提供了jQuery.extend()(类方法)和jQuery.fn.extend()(对象方法)两种方法
这两个方法都接受一个参数，类型为Object，Object对应的"名/值对"分别代表"函数或方法体/函数主体"
;(function($){ $.fn.extend({ "函数名":function(自定义参数){ //这里写插件所需要的代码 } }); })(jQuery); 或者 ;(function($){ $.fn.函数名=function(自定义参数){ //这里写插件所需要的代码 } })(jQuery); 使用以下方式调用添加的新方法：$("#id").函数名(参数);
;(function($){ $.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); })(jQuery); 或者 ;(function($){ $.函数名=function(自定义参数){ //这里写插件代码 } })(jQuery); 使用以下方式调用添加的新方法：$.函数名(参数);
转载地址：http://nyjix.baihongyu.com/