1,开始
可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。属性的名字就是你的插件的名字:
jQuery.fn.myPlugin = function(){
//开始写你的代码吧!
};
但是,那惹人喜爱的美元符号$哪里去了?她就是jQuery,但是为了确保你的插件与其他使用$的库不冲突,最好使用一个立即执行的匿名函数,这个匿名函数的参数是jQuery,这样其他的库就可以放心的使用$符号了。
(function( $ ){
$.fn.myPlugin = function() {
// 开始吧!
};
})( jQuery );
这样更好了就。在闭包内,可以放心的使用$符号了~
2,上下文
现在已经可以编写我们的代码了,但是编写之前,我必须说一说上下文。在插件内部的范围中,this关键字指向的是jQuery对象。人们很容易误解这一点,因为在正常使用jQuery的时候,this通常指向的是一个DOM元素。不了解这一点,会经常使用$又包装了一次。
(function( $ ){
$.fn.myPlugin = function() {
// 没有必要使用$(this)
// $(this) 跟 $($('#element'))是一样的
this.fadeIn('normal', function(){
//这里的this指的就是一个DOM元素了
});
};
})( jQuery );
$('#element').myPlugin();
3,基本开发
接下来写一个能用的插件吧。
(function( $ ){
$.fn.maxHeight = function() {
var max = 0;
this.each(function() {
max = Math.max( max, $(this).height() );
});
return max;
};
})( jQuery );
var tallest = $('div').maxHeight();
这是一个简单的插件,通过调用height()返回页面上height最大的div的height。
4,维护链式开发的特性
上一个例子是返回了一个整数,但是大多数情况下,一个插件紧紧是修改收集到的元素,然后返回这个元素让链条上的下一个使用。这是jQuery设计的精美之处,也是jQuery如此流行的原因之一。为了保证可链式,你必须返回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,所以保证了可链式,从而可以继续使用jQuery方法进行修改,如css()。如果你的插件如果不是返回一个简单值,你通常应该返回this。而且,正如你可能想到的,你传进去的参数也可以在你的插件中访问。所以在这个例子中,可以访问到type。
5,默认值和选项
为了一些复杂的,可订制的插件,最好提供一套默认值,在被调用的时候扩展默认值。这样,调用函数的时候就不用传入一大堆参数,而是传入需要被替换的参数。你可以这样做:
(function( $ ){
$.fn.tooltip = function( options ) {
var settings = {
'location' : 'top',
'background-color' : 'blue'
};
return this.each(function() {
// 如果存在选项,则合并之
if ( options ) {
$.extend( settings, options );
}
// 其他代码咯
});
};
})( jQuery );
$('div').tooltip({'location':'left'});
在这个例子中,调用插件后,默认的location会被替换城'left',而background-color还是'blue'。这样可以保证高度可配置性,而不需要开发者定义所有可能的选项了。
6,命名空间
正确的命名空间对于插件开发十分重要,这样能确保你的插件不被其他插件重写,也能避免被页面上其他代码重写。命名空间可以使你更长寿,因为你能记录你自己的方法,事件,数据等。
a,插件方法
在任何情况下,都不要在一个插件中为jQuery.fn增加多个方法。如:
(function( $ ){
$.fn.tooltip = function( options ) { // 这样 };
$.fn.tooltipShow = function( ) { // 是 };
$.fn.tooltipHide = function( ) { // 不好的 };
$.fn.tooltipUpdate = function( content ) { // 同学! };
})( jQuery );
不推荐这样使用,搞乱了$.fn命名空间。要纠正之,你可以把所有的方法放进一个对象中,然后通过不同的参数来调用。
(function( $ ){
var methods = {
init : function( options ) { // THIS },
show : function( ) { // IS },
hide : function( ) { // GOOD },
update : function( content ) { // !!! }
};
$.fn.tooltip = function( method ) {
// Method calling logic
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 );
$('div').tooltip({ // calls the init method
foo : 'bar'
});
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method
jQuery自己的扩展也是使用这种插件结构。
b,事件
绑定事件的命名空间是比较不为人知的。如果你的插件绑定了某个事件,最好将它搞到一个命名空间中。这样,如果你以后需要解绑,就不会影响到其他绑定到这个事件上的函数了。你可以使用".<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();
// Some time later...
$('#fun').tooltip('destroy');
在这个例子中,tooltip在init方法中初始化,它将reposition方法绑定到window对象的resize事件的tooltip名字空间下。稍候,如果开发者需要去掉这个tooltip,我们可以解绑这个绑定。这样就不会影响到其他绑定到window对象的resize事件的方法了。
c,数据
在开发插件的时候,你通常会有保持状态或者检查你的插件是否已经初始化的需要。使用jQuery的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 );
使用data方法可以帮助你在插件的各个方法间保持变量和状态。将各种变量放在一个对象中,可以方便访问,也可以方便移除。
7,总结与最佳实践
编写jQuery插件可以充分利用库,将公用的函数抽象出来,“循环利用”。以下是简短的总结:
- 使用(function($){//plugin})(jQuery);来包装你的插件
- 不要在插件的初始范围中重复包裹
- 除非你返回原始值,否则返回this指针来保证可链式
- 不要用一串参数,而是使用一个对象,并且设置默认值
- 一个插件,不要为jQuery.fn附上多个函数
- 为你的函数,事件,数据附着到某个命名空间
分享到:
相关推荐
jQuery-file-upload是一个强大的jQuery插件,它支持多语言、拖拽上传等多种特性,极大地提升了用户体验。本文将深入探讨jQuery-file-upload的核心功能及其实现方式。 一、jQuery-file-upload概述 jQuery-file-...
该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。目前版本是 ...
**jQuery Validate 插件详解** jQuery Validate 是一个广泛使用的JavaScript库,它为HTML表单提供了强大的验证功能。这个插件使开发者能够轻松地在客户端实现数据验证,避免了不必要的服务器请求,提高了用户交互...
在前端开发中,多语言支持是一项重要的功能,它能让网站或应用适应不同国家和地区的用户。这个名为"前端项目-jquery-lang-js.zip"的压缩包包含了一个基于jQuery的多语言解决方案,特别关注于i18n(国际化)的自动...
总的来说,jQuery EasyUI 1.2.4 提供了一个全面的前端开发工具包,不仅有强大的UI组件,还有丰富的主题和本地化支持。通过这些文件,开发者可以构建出高效、美观且易于维护的Web应用程序。无论是初学者还是经验丰富...
在实际应用中,jQuery验证插件不仅可以用于简单的字段验证,还可以与其他jQuery插件(如表单序列化插件)配合,实现更复杂的数据验证和提交。例如,结合AJAX提交,可以在不刷新页面的情况下进行后台验证,提高交互...
本教程将通过"jQuery插件国际化开发代码"这一主题,详细介绍如何利用jQuery来实现插件的国际化功能。 首先,我们需要理解I18N的基本原理。I18N不是简单地翻译文本,而是设计出一个可扩展的系统,以便在不修改核心...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。而jQuery UI则是jQuery的一个扩展,提供了更多的组件和功能,其中包括日期和时间选择器,也就是我们今天要讨论的...
jQuery EasyUI 是一个基于 jQuery 的轻量级框架,它为开发者提供了一系列组件和插件,用于快速构建功能丰富的、用户友好的Web应用界面。在"jquery-easyui-1.3.6.zip"这个压缩包中,我们可以找到构建EasyUI应用所需的...
在Web开发中,为了满足全球用户的使用需求,网站和应用程序的国际化(i18n)是必不可少的。jQuery.i18n.properties是一款针对jQuery设计的轻量级国际化插件,它使得在前端实现语言切换变得简单高效。本文将深入探讨...
jQuery语言翻译插件推荐 软件工程师在开发过程中,语言翻译是一个非常重要的步骤。...这10个 jQuery 语言翻译插件可以帮助开发者快速实现语言翻译,提高开发效率。选择合适的插件可以根据开发者的需求和项目的要求。
总结来说,对jQuery WeekCalendar插件进行汉化和单日显示的实现,主要涉及对源码的理解、语言文件的翻译和视图逻辑的调整。理解插件的工作原理和结构是成功的关键,同时,良好的编程实践和测试策略能保证改动的稳定...
jQuery i18n properties插件是一个强大的工具,专为JavaScript环境设计,用于处理多语言资源文件,让开发者能够轻松地在网页上实现多语言切换。本文将详细介绍jQuery i18n properties 1.2.1版本的特性、使用方法以及...
**jQuery i18next 插件详解** 在前端开发中,为了实现多语言支持,`jQuery i18next` 是一个非常实用的工具。这个插件是 `i18next` 国际化框架的一个扩展,它使得在基于 jQuery 的项目中轻松实现本地化变得可能。`...
- **官网与下载**:访问 [jQuery Validate 官网](http://jqueryvalidation.org/) 下载最新版的 jQuery Validate 插件。 - **功能特点**:jQuery Validate 为表单提供了强大的验证功能,使客户端表单验证变得更加简单...
总结来说,jQuery.i18n.properties 插件与 ASP.NET 结合,为开发者提供了方便的前端国际化解决方案,使多语言网站的开发变得更加高效。通过合理地组织资源文件,设置好回调函数,以及实现语言切换机制,就能轻松实现...
在Web开发中,特别是在构建多语言网站时,`jquery-i18n-properties` 提供了一个方便的方式来管理和加载不同国家/地区(locale)的语言资源。这个插件基于Java的`.properties`文件格式,这种格式被广泛用于存储国际化...
通常插件的资源可以从其官方网站、GitHub项目页面等途径获取。文档中建议收藏这些插件资源,以方便工作中的使用。 7. 插件版本控制和文档: 对于每个插件,了解其发布和更新的版本历史也很重要,这有助于开发者...
ValidationEngine主要由JavaScript和CSS组成,它通过jQuery插件的方式嵌入到项目中。其核心功能是对HTML表单元素进行实时验证,可以在用户输入时立即检查数据的合法性,提供即时反馈。 ### 二、安装与引入 1. **...