自己开发jquery插件的方法
来源:互联网 发布:golang io.readfull 编辑:程序博客网 时间:2024/04/30 10:52
jquery插件开发模式
jquery插件一般有三种开发方式:
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。第二种则是一般插件开发用到的方式,本文着重讲讲第二种。
插件开发
第二种插件开发方式一般是如下定义
代码如下复制代码$.fn.pluginName = function() {
//your code here
}
插件开发,我们一般运用面向对象的思维方式
例如定义一个对象
代码如下复制代码var Haorooms= function(el, opt) {this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义haorooms的方法
haorooms.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象,保留对象的默认值。
代码如下复制代码$.fn.myPlugin = function(options) {
//创建haorooms的实体
var haorooms= new Haorooms(this, options);
//调用其方法
return Haorooms.changecss();
}
调用这个插件直接如下就可以
代码如下复制代码$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})
上述开发方法的问题
上面的开发方法存在一个严重的问题,就是定义了一个全局的Haorooms,这样对于插件的兼容等等各个方面都不好。万一别的地方用到了Haorooms,那么你的代码就悲催了!现在我们把上面的代码包装起来,用一个自调用匿名函数包裹,就不会出现这个问题了!包括js插件的开发,也是一样的,我们用一个自调用匿名函数把自己写的代码包裹起来,就可以了!包裹方法如下:
代码如下复制代码(function(){
})()
用上面的这个包裹起来,就可以了。
但是还有一个问题,当我们研究大牛的代码的时候,前面经常看到有“;”,那是为了避免代码合并等不必要的错误。
例如,我们随便定义一个函数:
代码如下复制代码var haoroomsblog=function(){
}
(function(){
})()
由于haoroomsblog这个函数后面没有加分号,导致代码出错,为了避免这类情况的发生,通常这么写!
;(function(){
})()
把你的插件代码包裹在上面里面,就是一个简单的插件了。(注js插件和jquery插件都是如此)
还有一个问题
把你的插件包裹在
代码如下复制代码(function(){
})();
基本上可以说是完美了。但是为了让你开发的插件应用更加广泛,兼容性更加好,还要考虑到用插件的人的一些特殊的做法,例如,有些朋友为了避免jquery和zeptojs冲突,将jquery的前缀“$”,修改为“jQuery”,还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行,那么我们的做法是,把代码包裹在如下里面:
代码如下复制代码(function($,window,document){
//我们的代码。。
})(jQuery,window,document);
就可以避免上面的一些情况了!
一个通用的框架
在动手写自己的jQuery插件之前,自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行,那咱也把这框架照搬过来吧。
代码如下复制代码
(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);
有了这个,咱就可以往里面套东西了。
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
//实现代码
});
};
})(jQuery);
这里重点说一下这一句:
代码如下复制代码
var options = $.extend(defaults, options);
query的官方文档: http://api.jquery.com/jQuery.extend/
开始下半身吧
ok,上半身填补完了,咱就可以填补下半身吧。无非就是找到基数行和偶数行(感谢jQuery提供了类似tr:even这种写法,使其及其简单),然后添加上相应的class。然后再给所有的tr,绑定mouseover和mouseout事件即可。下半身代码如下:
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//添加奇偶行颜色
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);
最重要的一步!
也许有些朋友觉得这样就算是完成了。但是切切相反,我们还有最重要的一步没有完成,那就是一定要在插件上方,写上插件的名称、版本号、完成日期、作者,作者的联系方式、出生日期、三围……等等。因为只有这样才能显的这个插件够专业。
/*
* tableUI 1.0
* Date: 2015-11-16
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示
*/
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//添加奇偶行颜色
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);
至此,你开发的插件就算完美了!
- 自己开发jquery插件的方法
- jquery:如何开发自己的jQuery插件
- 开发jQuery插件的方法
- 利用jQuery开发适合自己的插件
- jQuery创建自己的插件(自定义插件)的方法
- jquery插件开发方法
- jquery插件开发方法
- jquery插件开发方法
- jquery 插件开发方法
- jQuery插件开发方法
- 自己写插件。jQuery插件开发模式
- jquery开发插件的两个方法
- jQuery开发插件的两个方法
- jQuery开发插件的两个方法
- 开发自己的带参数的jQuery插件
- 自定义 jQuery 插件, 自己开发的一个Demo
- 如何自己开发一个简单的jquery 插件
- jquery编写自己的插件
- Andorid制作内含控件的自定义布局
- 做一个下拉刷新必须需要掌握的android知识点
- 读书笔记:构造函数、析构函数、拷贝构造函数、赋值函数
- Zxing 竖屏切换 android
- 双十一剁手族,电商背后的那些技术你们造吗?
- 自己开发jquery插件的方法
- Longest Consecutive Sequence
- 数据库的约束,聚合函数,group,类型转换
- Charles3.8.1 注册码
- 在Hexo中为文章自动添加版权信息声明模块
- iOS实现倒计时
- Linux Shell 1>/dev/null 2>&1 含义
- 从”JAVA“而终 26:JSP详细讲解
- Android 开发有什么好的架构么?