您的位置:首页 > Web前端 > JQuery

深入浅出JQuery (四) 如何自己开发 plugin 详解

2013-03-14 10:58 155 查看
简介

通俗的理解插件就是为了完成某一项功能而存在的,叫它插件可以理解为即插即用的一件东西,它的目的是给已经有的函数或者方法做一个封装,来完成特定功能。

比如最近很火的抢票插件等等,打个比方好比是初中数学中很多函数,如正函数、余弦函数等组合在一起,形成一个新的函数,完成一个更复杂的功能而开发出来的聚合函数。

种类

封装对象方法

将用JQuery选择器获取的对象的方法进行封装,可以说绝大部分都是属于这一类插件,包括我们平时经常场用到的一些方法,例如:appendTo()等等。
下面,我会通过做一个给表格隔行变色的插件,作为例子来学习这类插件如何做。

封装全局函数

这类是将函数置于JQuery命名空间之下,而不是某一个对象上,作用于比较广泛,显然,我们可以看出这类函数主要是为了解决所有对象遇到的问题,或者不同库之间的问题而存在的,比如:为所有对象所调用的去空格函数$.trim(),解决不同库之间冲突的jQuery.noConflict()等

选择器插件

虽然,JQuery的选择器已经很强大,但也可以编辑自己的选择器,供自己特殊需要时用到.

书写格式

//插件编写
;(function($) {
$.fn.extend({

//在此处写插件代码
});
})(jQuery);


插件机制

jQuery.fn.extend()

用于扩展前面提到的第一种,兑现方法,比较常用.

jQuery.extend()

用于扩展后两种

除了可以扩展增加jquery对象外,还可以扩展已经有的jquery对象

例子

表格隔行变色插件,效果如下:



代码如下
// JavaScript Document
//格式头
;(function($){
//封装对象方法
$.fn.extend({
//自定义函数
"ChangeLineColor":function(options){
//设置默认值,即给默认参数赋值
options=$.extend({
odd:"odd",
even:"even",
selected:"selected"
},options);

//查找到的所有表格行,this指的是当前表格
$("tbody tr:odd",this).addClass(options.odd);
$("tbody tr:even",this).addClass(options.even);
//单击当前表格时变色,也可以是鼠标滑过等
$("tbody tr",this).click(function(){
//判断当前行是否选中
var hasSelected=$(this).hasClass(options.selected);
//如果选中,增加Selected,没选中去掉Selected
$(this)[hasSelected?"removeClass":"addCLass"](options.selected)
.find(':checkbox').attr("checked",!hasSelected);

});
//如果单选框默认是选择的,则高亮
$('tbody>tr:has(:checkbox)',this).addClass(options.selected);

//返回this.使得方法可以链接
return this;
}
});
})(jQuery);

命名 自己定义插件就一定要按着规定命名,格式为jquery.[自定义].js,上面插件可以命名为jquery.color.js
使用,通普通jquery库方法使用相同,如下
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function(){
$("#table2").ChangeLineColor();
});
</script>


应用

插件发展趋势正在逐年上升,这一点从我们常用的开发工具就可以看出来,比如从以前集成编译环境

到现在可以自定义很多插件,根据自己需要选择,比如Visual
Studio、Office、Eclipse含有大量的插件在里面,因为他是开源的的,所以众多的爱好者,开发出了让人应接不暇的插件。

插件开发发展这么快,说到根源上也是为用户考虑,提高用户体验度

他为应用程序的功能扩展提供的无限的想象空间。一个应用程序,无论你前期做了多少的市场调查,需求分析做的多么完美,你也只是迎合一部分人的期望,更甚,你只迎合了一部分人的一部分期望,或者一部分人在某一时间的一部分期望。

它遵循设计模式原则:依赖倒转原则

抽象不应该依赖于细节;高层模块不应该依赖于底层模块.

一种插件不应噶依赖于特定应用程序,也就是说,,没有你插件,我也可以很好的运行.

应用程序应该以一种策略获取插件,很多是以注册表方式来注册到应用程序里面,可能还有很多更好的方式。

插件已经越来越重要

以后开发应用程序应该重视插件的开发和使用,提高程序开发效率,提高用户体验度。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: