首页 > 语言 > JavaScript > 正文

jquery插件开发模式实例详解

2024-05-06 15:36:48
字体:
来源:转载
供稿:网友

本文实例讲述了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插件都是如此)

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选