最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
自己开发js或者jquery插件的方法
时间:2014-12-04 编辑:简简单单 来源:一聚教程网
通常情况下jquery插件我们都是用别人现成的,那么你有想过自己来开发jquery插件呢?如果有想就和小编一起来看看jquery插件开发布局吧。
引子
现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢?首先是有扎实的js和jquery技术基础,其次还有一些写插件的方法和技巧。关于js和jquery的技术基础,那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧,本文可以略微介绍一下,方便以后写插件的时候用得到。
jquery插件开发模式
jquery插件一般有三种开发方式:
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。第二种则是一般插件开发用到的方式,本文着重讲讲第二种。
插件开发
第二种插件开发方式一般是如下定义
代码如下 | 复制代码 |
$.fn.pluginName = function() { |
插件开发,我们一般运用面向对象的思维方式
例如定义一个对象
代码如下 | 复制代码 |
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) { |
调用这个插件直接如下就可以
代码如下 | 复制代码 |
$(function() { |
上述开发方法的问题
上面的开发方法存在一个严重的问题,就是定义了一个全局的Haorooms,这样对于插件的兼容等等各个方面都不好。万一别的地方用到了Haorooms,那么你的代码就悲催了!现在我们把上面的代码包装起来,用一个自调用匿名函数包裹,就不会出现这个问题了!包括js插件的开发,也是一样的,我们用一个自调用匿名函数把自己写的代码包裹起来,就可以了!包裹方法如下:
代码如下 | 复制代码 |
(function(){ })() |
用上面的这个包裹起来,就可以了。
但是还有一个问题,当我们研究大牛的代码的时候,前面经常看到有“;”,那是为了避免代码合并等不必要的错误。
例如,我们随便定义一个函数:
代码如下 | 复制代码 |
var haoroomsblog=function(){
}
})() ;(function(){ })() |
把你的插件代码包裹在上面里面,就是一个简单的插件了。(注js插件和jquery插件都是如此)
还有一个问题
把你的插件包裹在
代码如下 | 复制代码 |
;(function(){ })() |
基本上可以说是完美了。但是为了让你开发的插件应用更加广泛,兼容性更加好,还要考虑到用插件的人的一些特殊的做法,例如,有些朋友为了避免jquery和zeptojs冲突,将jquery的前缀“$”,修改为“jQuery”,还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行,那么我们的做法是,把代码包裹在如下里面:
代码如下 | 复制代码 |
;(function($,window,document,undefined){ |
就可以避免上面的一些情况了!
一个通用的框架
在动手写自己的jQuery插件之前,自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。行,那咱也把这框架照搬过来吧。
代码如下 | 复制代码 |
|
有了这个,咱就可以往里面套东西了。
名号、参数和属性
好不容易开始闯荡江湖了,一定要有一个响亮的名号才行,这样走在江湖上,才能够?牛?煌?纭2恍牛?闾??思?ldquo;中国牙防组”!所以,咱这里一定要起个响亮的名号,一定要简单、明了、够权威。所以,决定了,就叫做“tableUI”了!
参数和属性也很简单,无非就是三个class的名称。就叫做:evenRowClass、oddRowClass和activeRowClass吧。
所以,上面的框架,咱就把上半身给填上了。
代码如下 | 复制代码 |
|
这里重点说一下这一句:
代码如下 | 复制代码 |
|
看上去很?诺囊痪洌?涫稻褪呛喜⒍喔龆韵笪?桓觥U饫锞褪牵?绻?阍诘饔玫氖焙蛐戳诵碌牟问??陀媚阈碌牟问??绻?挥行矗?陀媚?系牟问?O虢?徊搅私獾呐笥眩?梢圆慰?query的官方文档: http://api.jquery.com/jQuery.extend/
开始下半身吧
ok,上半身填补完了,咱就可以填补下半身吧。无非就是找到基数行和偶数行(感谢jQuery提供了类似tr:even这种写法,使其及其简单),然后添加上相应的class。然后再给所有的tr,绑定mouseover和mouseout事件即可。下半身代码如下:
代码如下 | 复制代码 |
|
最重要的一步!
也许有些朋友觉得这样就算是完成了。但是切切相反,我们还有最重要的一步没有完成,那就是一定要在插件上方,写上插件的名称、版本号、完成日期、作者,作者的联系方式、出生日期、三围……等等。因为只有这样才能显的这个插件够专业。
代码如下 | 复制代码 |
* Date: 2010-03-30 |
至此,你开发的插件就算完美了!
相关文章
- 浅谈原生JS实现jQuery的animate()动画示例 06-06
- Node.js中使用jQuery的方法示例 08-17
- 解决ECSHOP中transport.js和jquery的冲突的问题 02-18
- jquery属性的相关js实现方法 12-24
- requirejs中使用jquery的例子详解 08-10
- 解决JQuery中$与JS插件库相冲突问题 11-24