新作简单实用的jQuery操作等待插件以及插件开发简介

最近还是一直忙于OA的开发,有种又要回归两年前的那种开发模式,不同的是现在脱离以前的开发框架。完全由自己亲手建立。所以今天带来一款比较简单实用的jQuery操作等待插件。这个插件的诞生来自于在调试中,老是碰到要加载大量数据,页面延时又有点长,而且又没有一点什么东西用于页面展示。所以这个插件就出来了,在开发这个插件前虽然我以前有过开发jQuery插件的经验。毕竟这么长时间过去了,所以我还是翻了翻资料的。在这里顺便也做个记录,如果有这方面需求的朋友也可以来参考一下。好,下面进入正题:
在开发jQuery插件前,首先我们要分清楚我们所开发的插件应该要有什么样的调用方式。不同的调用方式,插件的开发也是不同的。一般jQuery的插件分为两类:

类级别对象级别

类级别jQuery插件

我对类级别的理解就是相当于在jQuery这个大类里面添加了一个新的子类。将自己的函数定义到jQuery的命名空间中去。那么类级别的开发有如下几种方式:

1、全局函数
添加全局函数我们只需要像定义普通的事件一样进行定义:
[code lang=”js”]$.Fangsi = function() {
alert(‘欢迎加入放肆.NET(C#)软件交流群’);
};
//调用方法:$.Fangsi();[/code]
当然,我们有时候还需传递参数,那么我们可以用这样的方式进行定义:
[code lang=”js”]jQuery.Fangsi = function(param) {
alert(‘欢迎加入放肆.NET(C#)软件交流群,群号为:’ + param);
};
//调用方法:$.Fangsi("44329330");[/code]
2、使用jQuery.extend(object)
使用这个方法和定义全局函数的方法相似:
[code lang=”js”]jQuery.extend({
Fangsi: function() {
alert(‘欢迎加入放肆.NET(C#)软件交流群’);
},
QQGroup: function(param) {
alert(‘欢迎加入放肆.NET(C#)软件交流群,群号为:’ + param);
}
}); [/code]
3、使用命名空间
因为众所周知jQuery框架庞大,内置很多函数属性。所以我们在开发插件的时候很容易使用到它已经使用过的函数名或者属性名。所以我们可以使用命名空间来有效避免撞名等问题:
[code lang=”js”]jQuery.Fangsi = {
Open:function() {
alert(‘欢迎加入放肆.NET(C#)软件交流群’);
},
QQGroup:function(param) {
alert(‘欢迎加入放肆.NET(C#)软件交流群,群号为:’ + param);
}
};
//采用命名空间的函数仍然是全局函数,调用时采用的方法:
$.Fangsi.Open();
$.Fangsi.QQGroup(‘44329330’); [/code]

对象级别的jQuery插件

开发对象级别的jQuery插件有两种方式可以做到:

1、使用$.fn.extend方式:
[code lang=”js”](function($){
$.fn.extend({
pluginName:function(param,callback){
alert(‘欢迎加入放肆.NET(C#)软件交流群’);
}
})
})(jQuery);[/code]
2、使用$.fn.插件名 方式:
[code lang=”js”](function($) {
$.fn.pluginName = function() {
alert(‘欢迎加入放肆.NET(C#)软件交流群’);
};
})(jQuery); [/code]
当然调用中我们需要传递对象过去,总不能让人自己一个人撸吧,所以可以用以下的方式进行调用:
[code lang=”js”]$(‘#Fangsi’).pluginName(); [/code]
好了,插件的开发今天就大概分享这么多。其中还有很多包括参数传递,以及函数内对象的引用还有一些私有函数等等这些大家可以自行百度啦,因为我也不是很清楚。我就把我知道的大概梳理了一下。最后分享我写的jQuery操作等待插件。

jQuery操作等待插件

所谓无图无真相,那么第一件事当然是上图:
jquerywait

图都上了,下面就是整个插件的Demo了:

链接:jQuery操作等待插件 By 胖子.zip
密码:r8aw

本博客所有文章如无特别注明均为原创

如果觉得对你有帮助,可以通过下方打赏对作者表示鼓励

本文采用知识共享署名-非商业性使用-相同方式共享

如若转载,请注明出处:《新作简单实用的jQuery操作等待插件以及插件开发简介》https://www.fangsi.net/1038.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
锋哥的头像锋哥管理员
上一篇 2014年11月7日 11:32
下一篇 2015年1月16日 09:49

相关推荐

发表回复

登录后才能评论