文档章节

jQuery插件开发详细教程

 蜗牛奔跑
发布于 2015/11/02 13:38
字数 2392
阅读 94
收藏 3

一、入门

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

view source?

1

jQuery.fn.myPlugin = function() {

2

 

3

  //你自己的插件代码

4

 

5

};

用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery传递给一个自我执行的封闭程序,jQuery在此程序中映射为$符号,这样可以避免$号被其他库覆写。

1

(function($) {

2

    $.fn.myPlugin = function() {

3

        //你自己的插件代码

4

    };

5

})(jQuery);

在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。

二、环境

现在,我们可以开始编写实际的插件代码。 但是,在这之前,我们必须得对插件所处的环境有个概念。 在插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 这里容易产生一个普遍的误区,因为在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中,如下所示。

01

(function($) {

02

    $.fn.myPlugin = function() {

03

 

04

        //此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。

05

        //$(this)等同于 $($('#element'));

06

 

07

        this.fadeIn('normal', function() {

08

 

09

            //此处callback函数中this关键字代表一个DOM元素

10

 

11

        });

12

 

13

    };

14

})(jQuery);

15

 

16

$('#element').myPlugin();

三、基础知识

现在,我们理解了jQuery插件的基础知识,让我们写一个插件,做一些事情。

01

(function($) {

02

 

03

    $.fn.maxHeight = function() {

04

 

05

        var max = 0;

06

 

07

        this.each(function() {

08

            max = Math.max(max, $(this).height());

09

        });

10

 

11

        return max;

12

    };

13

})(jQuery);

14

 

15

var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

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

四、维护Chainability

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

01

(function($) {

02

 

03

    $.fn.lockDimensions = function(type) {

04

 

05

        return this.each(function() {

06

 

07

            var $this = $(this);

08

 

09

            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)。 因此,相对于调用一个有大量参数的插件,你可以调用一个对象参数,包含你了你想覆写的设置。

01

(function($) {

02

 

03

    $.fn.tooltip = function(options) {

04

 

05

        //创建一些默认值,拓展任何被提供的选项

06

        var settings = $.extend({

07

            'location': 'top',

08

            'background-color': 'blue'

09

        }, options);

10

 

11

        return this.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对象里有多个命名空间。

01

(function($) {

02

 

03

    $.fn.tooltip = function(options) {

04

        // this

05

    };

06

    $.fn.tooltipShow = function() {

07

        // is

08

    };

09

    $.fn.tooltipHide = function() {

10

        // bad

11

    };

12

    $.fn.tooltipUpdate = function(content) {

13

        // !!!

14

    };

15

 

16

})(jQuery);

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

01

(function($) {

02

 

03

    var methods = {

04

        init: function(options) {

05

            // this

06

        },

07

        show: function() {

08

            // is

09

        },

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

        } else if (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>'。

01

(function($) {

02

 

03

    var methods = {

04

        init: function(options) {

05

 

06

            return this.each(function() {

07

                $(window).bind('resize.tooltip', methods.reposition);

08

            });

09

 

10

        },

11

        destroy: function() {

12

 

13

            return this.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

        } else if (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,  使用一个单独的对象保存所有变量,并通过一个单独的命名空间读取这个对象不失为一个更好的方法。

01

(function($) {

02

 

03

    var methods = {

04

        init: function(options) {

05

 

06

            return this.each(function() {

07

 

08

                var $this = $(this),

09

                    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

            return this.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

        } else if (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、始终包裹在一个封闭的插件:

1

(function($) {

2

   /* plugin goes here */

3

})(jQuery);

2、不要冗余包裹this关键字在插件的功能范围内;

3、除非插件返回特定值,否则总是返回this关键字来维持chainability;

4、传递一个可拓展的默认对象参数而不是大量的参数给插件;

5、不要在一个插件中多次命名不同方法;

6、始终命名空间的方法,事件和数据;


本文转载自:

粉丝 38
博文 615
码字总数 118352
作品 0
海淀
私信 提问
20个值得开发人员关注的jQuery技术网站和博客

日期:2011/09/23 作者:Terry li - GBin1.com 1. John Resig - http://ejohn.org 毫无疑问,jQuery的缔造者的博客是你首先必须关注的。 2. Filmament Group Lab 这个也是必看之一,因为jQu...

gbin1
2011/09/23
3.9K
4
20个值得开发人员关注的jQuery技术博客

John Resig - http://ejohn.org 毫无疑问,jQuery的缔造者的博客是你首先必须关注的。 2. Filmament Group Lab 这个也是必看之一,因为jQuery UI类库就出自这个网站。 3. Learning jQuery 老...

李长春
2011/11/14
98
0
100+个最佳jQuery菜单与下拉菜单示例(1/10)

1) jQuery w菜单/下拉菜单示例教程 此教程是描述一个拥有全部不错的样式动画以及功能的菜单,也许这正式你一直在寻找的。我将细致描述 HTML 与 CSS 。我将假设你了解了 HTML 与 CSS 的知识并...

彭博
2012/04/22
10.2K
7
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.2K
0
分享8个超棒的基于HTML5和jQuery的开发教程

日期:2011/12/15 来源:GBin1.com HTML5 和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网 站。尤...

gbin1
2011/12/21
3.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部