JQuery插件開發入門(原創)

JQuery插件開發入門(原創)
作者：餘超  EMail：[email protected]

這個月，因爲一些工作上的需要重新開始以前用過的JQuery開發，而最後選擇採用了插件開發，對於JQuery初學者來說，開發JQuery插件是一個高級的話題。
JQuery插件的開發一種是類級別的給JQuery添加新的全局函數，另一種是對象級別的給JQuery對象添加方法。

先給大家展示一下具體的開發環境：
[yuchao@yuchao-Latitude-E5410 ext]$pwd
/opt/lampp/htdocs/jquery/ext
[yuchao@yuchao-Latitude-E5410 ext]$ls
demo.html  jquery-1.6.4.min.js  jquery.yuchao.js  style.css  ui
[yuchao@yuchao-Latitude-E5410 ext]$
另外在demo.html中引入Jquery插件：
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
如下加入自己開發的插件jquery.yuchao.js文件：
<script type="text/javascript" src="jquery.yuchao.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

1 添加一個新的全局函數，可採用如下定義，使用JQuery.extend(object),
/*
 *http://jquery.com/
 *contact:[email protected]
 *yuchao first extend
 */
$.extend({
   add:function(a,b){return a+b;},
   sub:function(a,b){return a-b;},
   mut:function(a,b){return a*b;},
   div:function(a,b){return a/b;}
});

如上擴展還有其他寫法，使用$.extend(object)也行，
調用時候寫爲：
$.add(15,10);  //return 25
可以寫爲JQuery.myPlugin = {Object}
調用時採用的方法：    
$.myPlugin.add(12，34);           
$.myPlugin.mut(3，5);
使用命名空間可以解決插件衝突，
2、對象級別的插件開發如下的兩種形式
沒有插件名稱的：
(function($){       
$.fn.extend({       
pluginName:function(opt,callback){       
          // Our plugin implementation code goes here.         
}       
})       
})(JQuery);   
有插件名稱的：
(function($) {         
$.fn.pluginName = function() {       
     // Our plugin implementation code goes here.       
};       
})(JQuery);    
上面定義了一個JQuery函數,形參是$，函數定義完成之後,把JQuery這個實參傳遞進去.立即調用執行。
這樣的好處是,我們在寫JQuery插件時,也可以使用$這個別名,而不會與prototype引起衝突.
fn 是什麼東西呢。查看JQuery源代碼，就不難發現。
JQuery.fn = JQuery.prototype = {
　　　init: function( selector, context ) {//....　
　　　//......
};
JQuery.fn = JQuery.prototype...
JQuery是一個封裝得非常好的類，比如我們用語句$("#inputtags")會生成一個JQuery類的實例。
JQuery.fn.extend(object); 對JQuery.prototype進得擴展，就是爲JQuery類添加“成員函數”。
比如我們要開發一個插件，做一個特殊的編輯框，當它被點擊時，便alert當前編輯框裏的內容。可以這麼做：
/*
 *http://jquery.com/
 *contact:[email protected]
 *yuchao first fn extend
 */
$.fn.extend({
  clickAlert:function(){
     $(this).click(function(){
       alert($(this).val());
     });
  }
});
在html文件中使用$("#input1").clickAlert();便可以調用，便實現了擴展，每次被點擊時它會先彈出目前編輯裏的內容。
到此爲止，插件開發完成，實際工作中有具體的插件開發很複雜，這裏只是一個簡單的demo版本。
希望大家多多拍磚，多多指點。
參考官方網站文章：
http://jquery.com/
http://docs.jquery.com/Plugin