老司机带你解读jQuery插件开发流程(2)

即时执行函数,顾名思义,是一个函数。让它与众不同的是,它被包含在一对小括号里面,这让所有的代码都在匿名函数的局部作用域中运行。这并不是说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对象。

多个元素:理解Sizzle

jQuery使用的选择器引擎叫Sizzle,Sizzle可以为你的函数提供多元素操作(例如对所有类名相同的元素)。这是jQuery几个优秀的特性之一,但这也是你在开发插件过程中需要考虑的事情。即使你不准备为你的插件提供多元素支持,但为这做准备仍然是一个很好的实践。

这里我添加了一小段代码,它让你的插件代码为多元素集合中每个元素单独地起作用:

function($) { // 向jQuery中被保护的“fn”命名空间中添加你的插件代码,用“pluginName”作为插件的函数名称 $.fn.pluginName = function(options) { // 返回“this”(函数each()的返回值也是this),以便进行链式调用。 return this.each(function() { // 此处运行代码,可以通过“this”来获得每个单独的元素 // 例如: $(this).show(); var $this = $(this); }); } })(jQuery);

在以上示例代码中,我并不是用 each()在我的选择器中每个元素上运行代码。在那个被 each()调用的函数的局部作用域中,你可以通过this来引用每个被单独处理的元素,也就是说你可以通过$(this)来引用它的jQuery对象。在局部作用域中,我用$this变量存储起jQuery对象,而不是每次调用函数的时候都使用$(this),这会是个很好的实践。当然,这样做并不总是必要的;但我已经额外把它包含在我的代码中。还有要注意的是,我们将会对每个单独方法都使用 each(),这样到时我们就可以返回我们需要的值,而不是一个jQuery对象。

下面是一个例子,假如我们的插件支持一个 val 的方法,它可以返回我们需要的值:

$('#element').pluginName('val'); // 会返回我们需要的值,而不是一个jQuery对象

功能:公有方法和私有方法

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpfwy.html