jQuery插件开发详细教程


Posted in Javascript onJune 06, 2014

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

一、入门

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

jQuery.fn.myPlugin = function(){  //你自己的插件代码
};

用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery传递给一个自我执行的封闭程序,jQuery在此程序中映射为$符号,这样可以避免$号被其他库覆写。
(function ($) {
    $.fn.m​​yPlugin = function () {
        //你自己的插件代码
    };
})(jQuery);

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

二、环境

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

(function ($) {
    $.fn.m​​yPlugin = function () {        //此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。
        //$(this)等同于 $($('#element'));
        this.fadeIn('normal', function () {
            //此处callback函数中this关键字代表一个DOM元素
        });
    };
})(jQuery);
$('#element').myPlugin();

三、基础知识

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

(function ($) {    $.fn.m​​axHeight = function () {
        var max = 0;
        this.each(function () {
            max = Math.max(max, $(this).height());
        });
        return max;
    };
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

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

四、维护Chainability

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

(function ($) {    $.fn.lockDimensions = function (type) {
        return this.each(function () {
            var $this = $(this);
            if (!type || type == 'width') {
                $this.width($this.width());
            }
            if (!type || type == 'height') {
                $this.height($this.height());
            }
        });
    };
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');

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

五、默认值和选项

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

(function ($) {    $.fn.tooltip = function (options) {
        //创建一些默认值,拓展任何被提供的选项
        var settings = $.extend({
            'location': 'top',
            'background-color': 'blue'
        }, options);
        return this.each(function () {
            // Tooltip插件代码
        });
    };
})(jQuery);
$('div').tooltip({
    'location': 'left'
});

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

{
    'location': 'left',
    'background-color': 'blue'
}

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

六、命名空间

正确命名空间你的插件是插件开发的一个非常重要的一部分。 正确的命名空间,可以保证你的插件将有一个非常低的机会被其他插件或同一页上的其他代码覆盖。 命名空间也使得你的生活作为一个插件开发人员更容易,因为它可以帮助你更好地跟踪你的方法,事件和数据。

七、插件方法

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

(function ($) {    $.fn.tooltip = function (options) {
        // this
    };
    $.fn.tooltipShow = function () {
        // is
    };
    $.fn.tooltipHide = function () {
        // bad
    };
    $.fn.tooltipUpdate = function (content) {
        // !!!
    };
})(jQuery);

这是不被鼓励的,因为它$.fn使$.fn命名空间混乱。 为了解决这个问题,你应该收集对象文本中的所有插件的方法,通过传递该方法的字符串名称给插件以调用它们。
(function ($) {    var methods = {
        init: function (options) {
            // this
        },
        show: function () {
            // is
        },
        hide: function () {
            // good
        },
        update: function (content) {
            // !!!
        }
    };
    $.fn.tooltip = function (method) {
        // 方法调用
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method' + method + 'does not exist on jQuery.tooltip');
        }
    };
})(jQuery);
//调用init方法
$('div').tooltip();
//调用init方法
$('div').tooltip({
    foo: 'bar'
});
// 调用hide方法
$('div').tooltip('hide');
//调用Update方法
$('div').tooltip('update', 'This is the new tooltip content!');

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

八、事件

一个鲜为人知bind方法的功能即允许绑定事件命名空间。 如果你的插件绑定一个事件,一个很好的做法是赋予此事件命名空间。 通过这种方式,当你在解除绑定的时候不会干扰其他可能已经绑定的同一类型事件。   你可以通过追加命名空间到你需要绑定的的事件通过 ‘.<namespace>'。

(function ($) {    var methods = {
        init: function (options) {
            return this.each(function () {
                $(window).bind('resize.tooltip', methods.reposition);
            });
        },
        destroy: function () {
            return this.each(function () {
                $(window).unbind('.tooltip');
            })
        },
        reposition: function () {
            //...
        },
        show: function () {
            //...
        },
        hide: function () {
            //...
        },
        update: function (content) {
            //...
        }
    };
    $.fn.tooltip = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.tooltip');
        }
    };
})(jQuery);
$('#fun').tooltip();
//一段时间之后... ...
$('#fun').tooltip('destroy');

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

九、数据

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

(function ($) {    var methods = {
        init: function (options) {
            return this.each(function () {
                var $this = $(this),
                    data = $this.data('tooltip'),
                    tooltip = $('<div />', {
                        text: $this.attr('title')
                    });
                // If the plugin hasn't been initialized yet
                if (!data) {
                    /*
                     Do more setup stuff here
                     */
                    $(this).data('tooltip', {
                        target: $this,
                        tooltip: tooltip
                    });
                }
            });
        },
        destroy: function () {
            return this.each(function () {
                var $this = $(this),
                    data = $this.data('tooltip');
                // Namespacing FTW
                $(window).unbind('.tooltip');
                data.tooltip.remove();
                $this.removeData('tooltip');
            })
        },
        reposition: function () {
            // ...
        },
        show: function () {
            // ...
        },
        hide: function () {
            // ...
        },
        update: function (content) {
            // ...
        }
    };
    $.fn.tooltip = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.tooltip');
        }
    };
})(jQuery);

将数据通过命名空间封装在一个对象中,可以更容易的从一个集中的位置读取所有插件的属性。

十、总结和最佳做法

编写jQuery插件允许你做出库,将最有用的功能集成到可重用的代码,可以节省开发者的时间,使开发更高效。 开发jQuery插件时,要牢记:

1.始终包裹在一个封闭的插件:

(function($) {
/* plugin goes here */
})(jQuery);

2.不要冗余包裹this关键字在插件的功能范围内
3.除非插件返回特定值,否则总是返回this关键字来维持chainability 。
4.传递一个可拓展的默认对象参数而不是大量的参数给插件。
5.不要在一个插件中多次命名不同方法。
3.始终命名空间的方法,事件和数据。
Javascript 相关文章推荐
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 #Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 #Javascript
js检验密码强度(低中高)附图
Jun 05 #Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 #Javascript
js如何判断用户是否是用微信浏览器
Jun 05 #Javascript
如何获取网站icon有哪些可行的方法
Jun 05 #Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 #Javascript
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
datagrid框架的删除添加与修改
2013/04/08 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
实习自我鉴定
2013/12/15 职场文书
新学期班主任寄语
2014/01/18 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
党员公开承诺书2015
2015/01/21 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers