本文實例講述了jquery插件開發模式。分享給大家供大家參考，具體如下：

jquery插件一般有三種開發方式：

第一種$.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插件都是如此）