深入浅出JQuery (四) 如何自己开发 plugin 详解
2013-03-14 10:58
155 查看
简介
通俗的理解插件就是为了完成某一项功能而存在的,叫它插件可以理解为即插即用的一件东西,它的目的是给已经有的函数或者方法做一个封装,来完成特定功能。
比如最近很火的抢票插件等等,打个比方好比是初中数学中很多函数,如正函数、余弦函数等组合在一起,形成一个新的函数,完成一个更复杂的功能而开发出来的聚合函数。
种类
封装对象方法
将用JQuery选择器获取的对象的方法进行封装,可以说绝大部分都是属于这一类插件,包括我们平时经常场用到的一些方法,例如:appendTo()等等。
下面,我会通过做一个给表格隔行变色的插件,作为例子来学习这类插件如何做。
封装全局函数
这类是将函数置于JQuery命名空间之下,而不是某一个对象上,作用于比较广泛,显然,我们可以看出这类函数主要是为了解决所有对象遇到的问题,或者不同库之间的问题而存在的,比如:为所有对象所调用的去空格函数$.trim(),解决不同库之间冲突的jQuery.noConflict()等
选择器插件
虽然,JQuery的选择器已经很强大,但也可以编辑自己的选择器,供自己特殊需要时用到.
书写格式
插件机制
jQuery.fn.extend()
用于扩展前面提到的第一种,兑现方法,比较常用.
jQuery.extend()
用于扩展后两种
除了可以扩展增加jquery对象外,还可以扩展已经有的jquery对象
例子
表格隔行变色插件,效果如下:
![](http://img.my.csdn.net/uploads/201303/15/1363345114_7607.png)
代码如下
命名 自己定义插件就一定要按着规定命名,格式为jquery.[自定义].js,上面插件可以命名为jquery.color.js
使用,通普通jquery库方法使用相同,如下
应用
插件发展趋势正在逐年上升,这一点从我们常用的开发工具就可以看出来,比如从以前集成编译环境
到现在可以自定义很多插件,根据自己需要选择,比如Visual
Studio、Office、Eclipse含有大量的插件在里面,因为他是开源的的,所以众多的爱好者,开发出了让人应接不暇的插件。
插件开发发展这么快,说到根源上也是为用户考虑,提高用户体验度
他为应用程序的功能扩展提供的无限的想象空间。一个应用程序,无论你前期做了多少的市场调查,需求分析做的多么完美,你也只是迎合一部分人的期望,更甚,你只迎合了一部分人的一部分期望,或者一部分人在某一时间的一部分期望。
它遵循设计模式原则:依赖倒转原则
抽象不应该依赖于细节;高层模块不应该依赖于底层模块.
一种插件不应噶依赖于特定应用程序,也就是说,,没有你插件,我也可以很好的运行.
应用程序应该以一种策略获取插件,很多是以注册表方式来注册到应用程序里面,可能还有很多更好的方式。
插件已经越来越重要
以后开发应用程序应该重视插件的开发和使用,提高程序开发效率,提高用户体验度。
通俗的理解插件就是为了完成某一项功能而存在的,叫它插件可以理解为即插即用的一件东西,它的目的是给已经有的函数或者方法做一个封装,来完成特定功能。
比如最近很火的抢票插件等等,打个比方好比是初中数学中很多函数,如正函数、余弦函数等组合在一起,形成一个新的函数,完成一个更复杂的功能而开发出来的聚合函数。
种类
封装对象方法
将用JQuery选择器获取的对象的方法进行封装,可以说绝大部分都是属于这一类插件,包括我们平时经常场用到的一些方法,例如:appendTo()等等。
下面,我会通过做一个给表格隔行变色的插件,作为例子来学习这类插件如何做。
封装全局函数
这类是将函数置于JQuery命名空间之下,而不是某一个对象上,作用于比较广泛,显然,我们可以看出这类函数主要是为了解决所有对象遇到的问题,或者不同库之间的问题而存在的,比如:为所有对象所调用的去空格函数$.trim(),解决不同库之间冲突的jQuery.noConflict()等
选择器插件
虽然,JQuery的选择器已经很强大,但也可以编辑自己的选择器,供自己特殊需要时用到.
书写格式
//插件编写 ;(function($) { $.fn.extend({ //在此处写插件代码 }); })(jQuery);
插件机制
jQuery.fn.extend()
用于扩展前面提到的第一种,兑现方法,比较常用.
jQuery.extend()
用于扩展后两种
除了可以扩展增加jquery对象外,还可以扩展已经有的jquery对象
例子
表格隔行变色插件,效果如下:
![](http://img.my.csdn.net/uploads/201303/15/1363345114_7607.png)
代码如下
// 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含有大量的插件在里面,因为他是开源的的,所以众多的爱好者,开发出了让人应接不暇的插件。
插件开发发展这么快,说到根源上也是为用户考虑,提高用户体验度
他为应用程序的功能扩展提供的无限的想象空间。一个应用程序,无论你前期做了多少的市场调查,需求分析做的多么完美,你也只是迎合一部分人的期望,更甚,你只迎合了一部分人的一部分期望,或者一部分人在某一时间的一部分期望。
它遵循设计模式原则:依赖倒转原则
抽象不应该依赖于细节;高层模块不应该依赖于底层模块.
一种插件不应噶依赖于特定应用程序,也就是说,,没有你插件,我也可以很好的运行.
应用程序应该以一种策略获取插件,很多是以注册表方式来注册到应用程序里面,可能还有很多更好的方式。
插件已经越来越重要
以后开发应用程序应该重视插件的开发和使用,提高程序开发效率,提高用户体验度。
相关文章推荐
- 深入浅出JQuery (四) 如何自己开发 plugin 详解
- 深入浅出JQuery (四) 如何自己开发 plugin 详解
- 如何在自己编写的Plugin中使用第三方jar
- 前端开发工程师如何在2013年里提升自己【转】
- 如何开发自己的.NET语言
- 如何为开发项目编写规范的README文件(windows),此文详解
- 如何开发自己的操作系统的引导程序
- 开发人员如何规划自己的职业道路
- Google台湾工程研究所所长:开发人员如何培养自己
- Spark技术内幕:Shuffle Pluggable框架详解,你怎么开发自己的Shuffle Service?
- 图文详解如何搭建Windows的Android C++开发环境(一)
- 如何开发自己的操作系统的引导程序?
- rcp(插件开发) 如何查找自己定义的扩展点
- Android 软件开发之如何使用Eclipse Debug调试程序详解
- 详解如何使用 vue-cli 开发多页应用
- 如何给自己开发的产品定位
- 如何正确从windows系统(自己电脑)远程访问Linux系统(他人电脑)的mysql数据库(图文详解)
- 如何自己开发软件测试工具?
- CentOS6.5下如何正确下载、安装Intellij IDEA、Scala、Scala-intellij-bin插件、Scala IDE for Eclipse助推大数据开发(图文详解)
- Eclipse开发RCP项目的plugin.xml详解