深入理解jQuery插件开发.doc
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《深入理解jQuery插件开发.doc》由会员分享,可在线阅读,更多相关《深入理解jQuery插件开发.doc(13页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库。jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方,对它基本功能和概念不熟悉的人可能会难以掌握。但是不用担心,我下面已经把代码划分成小部分,做了一个简单的指导。那些语法看起来可能过于复杂,但是如果进入到它的思想和模式中,它是非常简单易懂的。下面,我们有了一个插件的基本层次:?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364/
2、Shawn Khameneh / ExtraordinaryT (function($) var privateFunction = function() / 代码在这里运行 var methods = init: function(options) return this.each(function() var $this = $(this); var settings = $this.data(pluginName); if(typeof(settings) = undefined) var defaults = propertyName: value, onSomeEvent: func
3、tion() settings = $.extend(, defaults, options); $this.data(pluginName, settings); else settings = $.extend(, settings, options); / 代码在这里运行 ); , destroy: function(options) return $(this).each(function() var $this = $(this); $this.removeData(pluginName); ); , val: function(options) var someValue = th
4、is.eq(0).html(); return someValue; ; $.fn.pluginName = function() var method = arguments0; if(methodsmethod) method = methodsmethod; arguments = Array.prototype.slice.call(arguments, 1); else if( typeof(method) = object | !method ) method = methods.init; else $.error( Method + method + does not exis
5、t on jQuery.pluginName ); return this; return method.apply(this, arguments); )(jQuery);你可能会注意到,我所提到代码的结构和其他插件代码有很大的不同。根据你的使用和需求的不同,插件的开发方式也可能会呈现多样化。我的目的是澄清代码中的一些概念,足够让你找到适合自己的方法去理解和开发一个jQuery插件。现在,来解剖我们的代码吧!容器:一个即时执行函数根本上来说,每个插件的代码是被包含在一个即时执行的函数当中,如下:?123(function(arg1, arg2) / 代码 )(arg1, arg2);即时执行
6、函数,顾名思义,是一个函数。让它与众不同的是,它被包含在一对小括号里面,这让所有的代码都在匿名函数的局部作用域中运行。这并不是说DOM(全局变量)在函数内是被屏蔽的,而是外部无法访问到函数内部的公共变量和对象命名空间。这是一个很好的开始,这样你声明你的变量和对象的时候,就不用担心着变量名和已经存在的代码有冲突。现在,因为函数内部所有的所有公共变量是无法访问的,这样要把jQuery本身作为一个内部的公共变量来使用就会成为问题。就像普通的函数一样,即时函数也根据引用传入对象参数。我们可以将jQuery对象传入函数,如下:?1234(function($) / 局部作用域中使用$来引用jQuery
7、)(jQuery);我们传入了一个把公共变量“jQuery”传入了一个即时执行的函数里面,在函数局部(容器)中我们可以通过“$”来引用它。也就是说,我们把容器当做一个函数来调用,而这个函数的参数就是jQuery。因为我们引用的“jQuery”作为公共变量传入,而不是它的简写“$”,这样我们就可以兼容Prototype库。如果你不用Prototype或者其它用“$”做简写的库的话,你不这样做也不会造成什么影响,但是知道这种用法仍是一件好事。插件:一个函数一个jQuery插件本质上是我们塞进jQuery命名空间中一个庞大的函数,当然,我们可以很轻易地用“jQuery.pluginName=func
8、tion”,来达到我们的目的,但是如果我们这样做的话我们的插件的代码是处于没有被保护的暴露状态的。“jQuery.fn”是“jQuery.prototype”的简写,意味当我们通过jQuery命名空间去获取我们的插件的时候,它仅可写(不可修改)。它事实上可以为你干点什么事呢?它让你恰当地组织自己的代码,和理解如何保护你的代码不受运行时候不需要的修改。最好的说法就是,这是一个很好的实践!通过一个插件,我们获得一个基本的jQuery函数:?12345678910(function($) $.fn.pluginName = function(options) / 代码在此处运行 return thi
9、s; )(jQuery);上面的代码中的函数可以像其他的jQuery函数那样通过“$(#element).pluginName()”来调用。注意,我是如何把“return this”语句加进去的;这小片的代码通过返回一个原来元素的集合(包含在this当中)的引用来产生链式调用的效果,而这些元素是被一个jQuery对象所包裹的。你也应该注意,“this”在这个特定的作用域中是一个jQuery对象,相当于“$(#element)”。根据返回的对象,我们可以总结出,在上面的代码中,使用“$(#element).pluginName()”的效果和使用“$(#element)”的效果是一样的。在你的即时
10、执行函数作用域中,没必要用“$(this)”的方式来把this包裹到一个jQuery对象中,因为this本身已经是被包装好的jQuery对象。多个元素:理解SizzlejQuery使用的选择器引擎叫Sizzle,Sizzle可以为你的函数提供多元素操作(例如对所有类名相同的元素)。这是jQuery几个优秀的特性之一,但这也是你在开发插件过程中需要考虑的事情。即使你不准备为你的插件提供多元素支持,但为这做准备仍然是一个很好的实践。这里我添加了一小段代码,它让你的插件代码为多元素集合中每个元素单独地起作用:?1234567891011121314151617function($) / 向jQuer
11、y中被保护的“fn”命名空间中添加你的插件代码,用“pluginName”作为插件的函数名称 $.fn.pluginName = function(options) / 返回“this”(函数each()的返回值也是this),以便进行链式调用。 return this.each(function() / 此处运行代码,可以通过“this”来获得每个单独的元素 / 例如: $(this).show(); var $this = $(this); ); )(jQuery);在以上示例代码中,我并不是用 each()在我的选择器中每个元素上运行代码。在那个被 each()调用的函数的局部作用域中,
12、你可以通过this来引用每个被单独处理的元素,也就是说你可以通过$(this)来引用它的jQuery对象。在局部作用域中,我用$this变量存储起jQuery对象,而不是每次调用函数的时候都使用$(this),这会是个很好的实践。当然,这样做并不总是必要的;但我已经额外把它包含在我的代码中。还有要注意的是,我们将会对每个单独方法都使用 each() ,这样到时我们就可以返回我们需要的值,而不是一个jQuery对象。下面是一个例子,假如我们的插件支持一个 val 的方法,它可以返回我们需要的值:?12$(#element).pluginName(val); / 会返回我们需要的值,而不是一个jQ
13、uery对象功能:公有方法和私有方法一个基本的函数可能在某些情况下可以良好地工作,但是一个稍微复杂一点的插件就需要提供各种各样的方法和私有函数。你可能会使用不同的命名空间去为你的插件提供各种方法,但是最好不要让你的源代码因为多余的命名空间而变得混乱。下面的代码定义了一个存储公有方法的JSON对象,以及展示了如何使用插件中的主函数中去判断哪些方法被调用,和如何在让方法作用到选择器每个元素上。?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
14、575859(function($) / 在我们插件容器内,创造一个公共变量来构建一个私有方法 var privateFunction = function() / code here / 通过字面量创造一个对象,存储我们需要的共有方法 var methods = / 在字面量对象中定义每个单独的方法 init: function() / 为了更好的灵活性,对来自主函数,并进入每个方法中的选择器其中的每个单独的元素都执行代码 return this.each(function() / 为每个独立的元素创建一个jQuery对象 var $this = $(this); / 执行代码 / 例如:
15、privateFunction(); ); , destroy: function() / 对选择器每个元素都执行方法 return this.each(function() / 执行代码 ); ; $.fn.pluginName = function() / 获取我们的方法,遗憾的是,如果我们用function(method)来实现,这样会毁掉一切的 var method = arguments0; / 检验方法是否存在 if(methodsmethod) / 如果方法存在,存储起来以便使用 / 注意:我这样做是为了等下更方便地使用each() method = methodsmethod;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 深入 理解 jQuery 插件 开发
![提示](https://www.deliwenku.com/images/bang_tan.gif)
限制150内