扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱。

入门

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

jQuery.fn.myPlugin = function(){

  //你自己的插件代码

};

用户非常喜欢的$符号哪里去了? 它仍然存在,但是,为了避免和其他(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插件时,要牢记:

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

【jQuery】jquery插件封装的更多相关文章

  1. jQuery编写插件--封装全局函数的插件(一些常用的js验证表达式)

    上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...

  2. jQuery对象插件封装步骤

    jQuery是js的一个非常优秀的库,它大大简化了js的很多操作,并且解决了js的大部分兼容性问题.甚至很多css兼容性问题,用jQuery写都能解决. 这里是对象插件的封装.当然,封装插件很多,这里 ...

  3. JQuery分页插件封装(源码来自百度,自己封装)

    最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...

  4. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  5. 把jQuery的类、插件封装成seajs的模块的方法

    这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(func ...

  6. jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件

    完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...

  7. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  8. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  9. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  10. 利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

      利用JQ开发插件的方法: 1.jQuery.extend(); 2.jQuery.fn.extend(); 3.通过$.widget()应用jQuery UI的部件工厂方式创建. 由于第三种方式通 ...

随机推荐

  1. 下周二推出“音视频技术WebRTC初探”公开课,欢迎捧场!

     下周二推出"音视频技术WebRTC初探"公开课,欢迎捧场! 公开课课程链接:http://edu.csdn.net/huiyiCourse/detail/90 课程的解说资料 ...

  2. 【Python】使用内置base64模块进行编解码

    代码: import hashlib import base64 hash = hashlib.md5() hash.update('逆火Tu22m'.encode('utf-8')) print(h ...

  3. C#.NET常见问题(FAQ)-如何让文本框textbox内容限制为数字

    //限制文本框的输入 private void txtQuestionScore_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyCha ...

  4. OSX系统的sublime配置php执行编译

    OSX系统的sublime配置php执行编译 1).进入如下菜单 2)弹出内容如下: { "cmd": ["make"] } 修改为: { "cmd& ...

  5. 【高德地图SDK】如何实现轨迹平滑移动?

    很多人应该都有类似的经历,叫完车,想看看车离我还有多远距离?但手机屏幕上的车不是一动不动,就是一跳一跳的漂移. 目前市面上大多产品“轨迹平滑移动”做的并不好. 市面上只有快的打车和一号专车实现了平滑移 ...

  6. 【视频教学】如何利用高德地图IOS SDK进行开发?

    Step1:使用IOS SDK可以做什么高德地图 iOS SDK 是一套基于 iOS 5.1.1 及以上版本的地图应用程序开发接口.通过该接口,用户可使用高德地图数据和服务轻松构建功能丰富.交互性强的 ...

  7. javascript设计思维

    //一.把参数当作私有变量使用 (function (a, b) { //把参数当作私有变量使用,省略了var,也节省了行数 console.log(b) //undefined,所有未赋值的变量均为 ...

  8. 解决工作中遇到的一个"打开,保存"文件框的bug的过程

    工作中遇到的这个问题还是很有意思的.其中嵌套了很多奇葩性的问题. (转载请指明出于breaksoftware的csdn博客) 我们来看下故事的发生过程,QA同学发现我们存在如下的bug 看到如此多的串 ...

  9. hadoop old API CombineFileInputFormat

    来自:http://f.dataguru.cn/thread-271645-1-1.html 简介 本文主要介绍下面4个方面 1.为什么要使用CombineFileInputFormat 2.Comb ...

  10. 《跟孩子学Python》

    1:Python对象之间的赋值是内容赋值而不是引用赋值 a = ["aaa","bbb","ccc"] b = a print a prin ...