jQuery插件开发入门

Require.js中使用jQuery 插件请查看http://www.css88.com/archives/4826

扩展jQuery插件和方法的做用是很是强大的，它能够节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳作法和常见的陷阱。

入门

编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性，此处添加的对象属性的名称就是你插件的名称：

1. jQuery.fn.myPlugin =function(){
2.  
3. //你本身的插件代码
4.  
5. };

用户很是喜欢的$符号哪里去了？ 它仍然存在，可是，为了不和其余JavaScript库冲突，咱们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为$符号，这样能够避免$号被其余库覆写。

1. (function($){
2. $.fn.m​​yPlugin =function(){
3. //你本身的插件代码
4. };
5. })(jQuery);

 

在这个封闭程序中，咱们能够无限制的使用$符号来表示jQuery函数。

环境

如今，咱们能够开始编写实际的插件代码。 可是，在这以前，咱们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字表明了这个插件将要执行的jQuery对象， 这里容易产生一个广泛的误区，由于在其余包含callback的jQuery函数中，this关键字表明了原生的DOM元素。这经常会致使开发者误将this关键字无谓的包在jQuery中，以下所示。

1. (function($){
2. $.fn.m​​yPlugin =function(){
3.  
4. //此处没有必要将this包在$号中如$(this)，由于this已是一个jQuery对象。
5. //$(this)等同于 $($('#element'));
6.  
7. this.fadeIn('normal',function(){
8.  
9. //此处callback函数中this关键字表明一个DOM元素
10.  
11. });
12.  
13. };
14. })(jQuery);
15.  
16. $('#element').myPlugin();

 

 

基础知识

如今，咱们理解了jQuery插件的基础知识，让咱们写一个插件，作一些事情。

1. (function($){
2.  
3. $.fn.m​​axHeight =function(){
4.  
5. var max =0;
6.  
7. this.each(function(){
8. max =Math.max(max, $(this).height());
9. });
10.  
11. return max;
12. };
13. })(jQuery);
14.  
15. var tallest = $('div').maxHeight();//返回高度最大的div元素的高度

这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。

维护Chainability

不少时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。 这是jQuery的设计之美，是jQuery如此受欢迎的缘由之一。 所以，要保持一个插件的chainability，你必须确保你的插件返回this关键字。

1. (function($){
2.  
3. $.fn.lockDimensions =function(type){
4.  
5. returnthis.each(function(){
6.  
7. var $this = $(this);
8.  
9. if(!type || type =='width'){
10. $this.width($this.width());
11. }
12.  
13. if(!type || type =='height'){
14. $this.height($this.height());
15. }
16.  
17. });
18.  
19. };
20. })(jQuery);
21.  
22. $('div').lockDimensions('width').CSS('color','red');

因为插件返回this关键字，它保持了chainability，这样jQuery收集的元素能够继续被jQuery方法如.css控制。 所以，若是你的插件不返回固有的价值，你应该老是在其做用范围内返回this关键字。 此外，你可能会推断出，传递给插件的参数将会在插件的做用范围内被传递。 所以，在前面的例子，字符串’width’变成了插件的类型参数。

默认值和选项

对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候能够被拓展的默认设置(经过使用$.extend)。 所以，相对于调用一个有大量参数的插件，你能够调用一个对象参数，包含你了你想覆写的设置。

1. (function($){
2.  
3. $.fn.tooltip =function(options){
4.  
5. //建立一些默认值，拓展任何被提供的选项
6. var settings = $.extend({
7. 'location':'top',
8. 'background-color':'blue'
9. }, options);
10.  
11. returnthis.each(function(){
12.  
13. // Tooltip插件代码
14.  
15. });
16.  
17. };
18. })(jQuery);
19.  
20. $('div').tooltip({
21. 'location':'left'
22. });

在这个例子中，调用tooltip插件时覆写了默认设置中的location选项，background-color选项保持默认值，因此最终被调用的设定值为：

1. {
2. 'location':'left',
3. 'background-color':'blue'
4. }

这是一个很灵活的方式，提供一个高度可配置的插件，而无需开发人员定义全部可用的选项。

命名空间

正确命名空间你的插件是插件开发的一个很是重要的一部分。 正确的命名空间，能够保证你的插件将有一个很是低的机会被其余插件或同一页上的其余代码覆盖。 命名空间也使得你的生活做为一个插件开发人员更容易，由于它能够帮助你更好地跟踪你的方法，事件和数据。

插件方法

在任何状况下，一个单独的插件不该该在jQuery.fnjQuery.fn对象里有多个命名空间。

1. (function($){
2.  
3. $.fn.tooltip =function(options){
4. // this
5. };
6. $.fn.tooltipShow =function(){
7. // is
8. };
9. $.fn.tooltipHide =function(){
10. // bad
11. };
12. $.fn.tooltipUpdate =function(content){
13. // !!!
14. };
15.  
16. })(jQuery);

这是不被鼓励的，由于它$.fn使$.fn命名空间混乱。 为了解决这个问题，你应该收集对象文本中的全部插件的方法，经过传递该方法的字符串名称给插件以调用它们。

1. (function($){
2.  
3. var methods ={
4. init:function(options){
5. // this
6. },
7. show:function(){
8. // is
9. },
10. hide:function(){
11. // good
12. },
13. update:function(content){
14. // !!!
15. }
16. };
17.  
18. $.fn.tooltip =function(method){
19.  
20. // 方法调用
21. if(methods[method]){
22. return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
23. }elseif(typeof method ==='object'||!method){
24. return methods.init.apply(this, arguments);
25. }else{
26. $.error('Method'+ method +'does not exist on jQuery.tooltip');
27. }
28.  
29. };
30.  
31. })(jQuery);
32.  
33. //调用init方法
34. $('div').tooltip();
35.  
36. //调用init方法
37. $('div').tooltip({
38. foo:'bar'
39. });
40.  
41. // 调用hide方法
42. $('div').tooltip('hide');
43.  
44. //调用Update方法
45. $('div').tooltip('update','This is the new tooltip content!');

这种类型的插件架构容许您封装全部的方法在父包中，经过传递该方法的字符串名称和额外的此方法须要的参数来调用它们。 这种方法的封装和架构类型是jQuery插件社区的标准，它被无数的插件在使用，包括jQueryUI中的插件和widgets。

事件

一个不为人知bind方法的功能即容许绑定事件命名空间。 若是你的插件绑定一个事件，一个很好的作法是赋予此事件命名空间。 经过这种方式，当你在解除绑定的时候不会干扰其余可能已经绑定的同一类型事件。   你能够经过追加命名空间到你须要绑定的的事件经过 ‘.<namespace>’。

1. (function($){
2.  
3. var methods ={
4. init:function(options){
5.  
6. returnthis.each(function(){
7. $(window).bind('resize.tooltip', methods.reposition);
8. });
9.  
10. },
11. destroy:function(){
12.  
13. returnthis.each(function(){
14. $(window).unbind('.tooltip');
15. })
16.  
17. },
18. reposition:function(){
19. //...
20. },
21. show:function(){
22. //...
23. },
24. hide:function(){
25. //...
26. },
27. update:function(content){
28. //...
29. }
30. };
31.  
32. $.fn.tooltip =function(method){
33.  
34. if(methods[method]){
35. return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
36. }elseif(typeof method ==='object'||!method){
37. return methods.init.apply(this, arguments);
38. }else{
39. $.error('Method '+ method +' does not exist on jQuery.tooltip');
40. }
41. };
42.  
43. })(jQuery);
44.  
45. $('#fun').tooltip();
46. //一段时间以后... ...
47. $('#fun').tooltip('destroy');

在这个例子中，当tooltip经过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间经过追加.tooltip。 稍后， 当开发人员须要销毁tooltip的时候，咱们能够同时解除其中reposition方法和resize事件的绑定，经过传递reposition的命名空间给插件。 这使咱们可以安全地解除事件的绑定并不会影响到此插件以外的绑定。

数据

一般在插件开发的时候，你可能须要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此，相对于记录大量的不一样名字的分离的data,  使用一个单独的对象保存全部变量，并经过一个单独的命名空间读取这个对象不失为一个更好的方法。

1. (function($){
2.  
3. var methods ={
4. init:function(options){
5.  
6. returnthis.each(function(){
7.  
8. var $this = $(this),
9. data = $this.data('tooltip'),
10. tooltip = $('<div />',{
11. text: $this.attr('title')
12. });
13.  
14. // If the plugin hasn't been initialized yet
15. if(!data){
16.  
17. /*
18. Do more setup stuff here
19. */
20.  
21. $(this).data('tooltip',{
22. target: $this,
23. tooltip: tooltip
24. });
25.  
26. }
27. });
28. },
29. destroy:function(){
30.  
31. returnthis.each(function(){
32.  
33. var $this = $(this),
34. data = $this.data('tooltip');
35.  
36. // Namespacing FTW
37. $(window).unbind('.tooltip');
38. data.tooltip.remove();
39. $this.removeData('tooltip');
40.  
41. })
42.  
43. },
44. reposition:function(){
45. // ...
46. },
47. show:function(){
48. // ...
49. },
50. hide:function(){
51. // ...
52. },
53. update:function(content){
54. // ...
55. }
56. };
57.  
58. $.fn.tooltip =function(method){
59.  
60. if(methods[method]){
61. return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
62. }elseif(typeof method ==='object'||!method){
63. return methods.init.apply(this, arguments);
64. }else{
65. $.error('Method '+ method +' does not exist on jQuery.tooltip');
66. }
67.  
68. };
69.  
70. })(jQuery);

将数据经过命名空间封装在一个对象中，能够更容易的从一个集中的位置读取全部插件的属性。

总结和最佳作法

编写jQuery插件容许你作出库，将最有用的功能集成到可重用的代码，能够节省开发者的时间，使开发更高效。 开发jQuery插件时，要牢记：

• 始终包裹在一个封闭的插件：
  1. (function($){
  2. /* plugin goes here */
  3. })(jQuery);
• 不要冗余包裹this关键字在插件的功能范围内
• 除非插件返回特定值，不然老是返回this关键字来维持chainability 。
• 传递一个可拓展的默认对象参数而不是大量的参数给插件。
• 不要在一个插件中屡次命名不一样方法。
• 始终命名空间的方法，事件和数据。