jQuery外掛開發流程簡單介紹

外掛開發主要有如下三種方式:

（1）.通過$.extend()來擴充套件jQuery。

（2）.通過$.fn 向jQuery新增新的方法。

（3）.通過$.widget()應用jQuery UI的部件工廠方式建立。

第一種$.extend()相對簡單，一般很少能夠獨立開發複雜外掛，第三種是一種高階的開發模式，本文也不做介紹。

第二種則是一般外掛開發用到的方式，本文著重講講第二種。

外掛開發:

第二種外掛開發方式一般是如下定義:

[JavaScript] 純文字檢視 複製程式碼
$.fn.pluginName = function() {
  //your code here
}

外掛開發，我們一般運用物件導向的思維方式

例如定義一個物件

[JavaScript] 純文字檢視 複製程式碼
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)有{}主要是為了建立一個新物件，保留物件的預設值。

[JavaScript] 純文字檢視 複製程式碼
$.fn.myPlugin = function(options) {
  //建立haorooms的實體
  var haorooms= new Haorooms(this, options);
  //呼叫其方法
  return Haorooms.changecss();
}

呼叫這個外掛直接如下就可以

[JavaScript] 純文字檢視 複製程式碼
$(function() {
  $('a').myPlugin({
    'color': '#2C9929',
    'fontSize': '20px'
  });
})

上述開發方法的問題:

上面的開發方法存在一個嚴重的問題，就是定義了一個全域性的Haorooms，這樣對於外掛的相容等等各個方面都不好。萬一別的地方用到了Haorooms，那麼程式碼就出現問題了，現在我們把上面的程式碼包裝起來，用一個自呼叫匿名函式(有時又叫塊級作用域或者私有作用域)包裹，就不會出現這個問題了，包括js外掛的開發，也是一樣的，我們用一個自呼叫匿名函式把自己寫的程式碼包裹起來，包裹方法如下：

[JavaScript] 純文字檢視 複製程式碼
(function(){
  
})()

用上面的這個包裹起來，就可以了。

但是還有一個問題，程式碼前面經常看到有“；”，那是為了避免程式碼合併等不必要的錯誤。

例如，我們隨便定義一個函式：

[JavaScript] 純文字檢視 複製程式碼
var haoroomsblog=function(){
}
(function(){
})()

由於haoroomsblog這個函式後面沒有加分號，導致程式碼出錯，為了避免這類情況的發生，通常這麼寫：

[JavaScript] 純文字檢視 複製程式碼
;(function(){
  
})()

把你的外掛程式碼包裹在上面裡面，就是一個簡單的外掛了。

另外還有一個問題:

把你的外掛包裹在:

[JavaScript] 純文字檢視 複製程式碼
;(function(){
})()

基本上可以說是完美了。但是為了讓你開發的外掛應用更加廣泛，相容性更加好，還要考慮到用外掛的人的一些特殊的做法，例如，有些朋友為了避免jquery和zeptojs衝突，將jquery的字首"$",修改為"jQuery"，還有些朋友將預設的document等方法修改。為了讓你的外掛在這些東西修了了的情況下照常執行，那麼我們的做法是，把程式碼包裹在如下里面：

[JavaScript] 純文字檢視 複製程式碼
;(function($,window,document,undefined){
  //我們的程式碼。。
})(jQuery,window,document);

就可以避免上面的一些情況。