jquery插件開發及 jquery自定義函數

jQuery插件的開發包括兩種：

一種是類級別的插件開發，即給jQuery添加新的全局函數，相當於給jQuery類本身添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數，另一種是對象級別的插件開發，即給jQuery對象添加方法。下面就兩種函數的開發做詳細的說明。

1、類級別的插件開發

類級別的插件開發最直接的理解就是給jQuery類添加類方法，可以理解爲添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類級別的插件開發可以採用如下幾種形式進行擴展：

1.1 添加一個新的全局函數

添加一個全局函數，我們只需如下定義：

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};

1.2 增加多個全局函數

添加多個全局函數，可採用如下定義：

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};
調用時和一個函數的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3 使用jQuery.extend(object);　

jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});

1.4 使用命名空間

雖然在jQuery命名空間中，我們禁止使用了大量的JavaScript函數名和變量名。但是仍然不可避免某些函數或變量名將於其他jQuery插件衝突，因此我們習慣將一些方法封裝到另一個自定義的命名空間。

jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
採用命名空間的函數仍然是全局函數，調用時採用的方法：
$.myPlugin.foo();
$.myPlugin.bar('baz');

2、對象級別的插件開發

對象級別的插件開發需要如下的兩種形式：、

形式1：  

(function($){
$.fn.extend({
pluginName:function(opt,callback){
          // Our plugin implementation code goes here.
}
})
})(jQuery);

形式2：

 

(function($) {
$.fn.pluginName = function() {
     // Our plugin implementation code goes here.
};
})(jQuery);

       上面定義了一個jQuery函數,形參是$，函數定義完成之後,把jQuery這個實參傳遞進去.立即調用執行。這樣的好處是,我們在寫jQuery插件時,也可以使用$這個別名,而不會與prototype引起衝突.

2.1 在JQuery名稱空間下申明一個名字

這是一個單一插件的腳本。如果你的腳本中包含多個插件，或者互逆的插件（例如： $.fn.doSomething() 和$.fn.undoSomething()），那麼你需要聲明多個函數名字。但是，通常當我們編寫一個插件時，力求僅使用一個名字來包含它的所有內容。我們的示例插件命名爲“highlight“  

$.fn.hilight = function() {
  // Our plugin implementation code goes here.
};
我們的插件通過這樣被調用：
$('#myDiv').hilight();

 

但是如果我們需要分解我們的實現代碼爲多個函數該怎麼辦？有很多原因：設計上的需要；這樣做更容易或更易讀的實現；而且這樣更符合面向對象。 這真是一個麻煩事，把功能實現分解成多個函數而不增加多餘的命名空間。出於認識到和利用函數是javascript中最基本的類對象，我們可以這樣做。就像其他對象一樣，函數可以被指定爲屬性。因此我們已經聲明“hilight”爲jQuery的屬性對象，任何其他的屬性或者函數我們需要暴露出來的，都可以在"hilight" 函數中被聲明屬性。稍後繼續。
2.2 接受options參數以控制插件的行爲

讓我們爲我們的插件添加功能指定前景色和背景色的功能。我們也許會讓選項像一個options對象傳遞給插件函數。例如：   

// plugin definition
$.fn.hilight = function(options) {
  var defaults = {
    foreground: 'red',
    background: 'yellow'
  };
  // Extend our default options with those provided.
  var opts = $.extend(defaults, options);
  // Our plugin implementation code goes here.
};
我們的插件可以這樣被調用：
$('#myDiv').hilight({
  foreground: 'blue'
});