[程式][JQuery] 自己的第一個JQuery Plugin! Hello World。(Part_03) @ 四處流浪的阿基。I am Vagrant Walker

前面的[程式][JQuery] 自己的第一個JQuery Plugin! Hello World。(Part_02)讓你知道如怎麼去設定初始值了，或是要自己寫一個簡單的JQuery Plugin應該已經是一件很容易的事情。。這邊要討論的是Plugin Methods。但是因為我有些東西也沒有懂得很透徹，所以希望有人可以提出來分享一下！他的程式碼跟上一篇的範例很像，但有些微的不同。

mytoolbox.js

;(function( $ ){

$.fn.mytoolbox = function(method) {

      if ( methods[method] ) {
              return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
      } else if ( typeof method === 'object' || ! method ) {
              return methods.init.apply( this, arguments );
      } else {
              $.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
      }

};

var methods = {
init : function( options ) {

          var _defaultSettings = {
              'var_0' : '0',
            'var_1' : '1',
            'var_2' : '2'
          };

           var _settings = $.extend(_defaultSettings, options);

           return this.each(function(){

alert(_settings.var_0);

          });
      },
      destroy : function( ) {},
      reposition : function( ) { },
      show : function( ) { },
      hide : function( ) {},
      update : function( ) {
         return this.each(function(){

alert("Hello");

});
}
};

})(jQuery)

上面程式的範例，藍色那塊，主要就是抓取你丟入的值是什麼，然後去執行對應的函數。但是那一個部分，我目前還沒辦法完全透徹的了解，因為不知道apply slice call 的函數用途。所以我目前只能把它當作公式記住，等我確定的答案，我再來詳細分享更細部的東西。

至於你看到的紅色的部分，就是當你丟參數給他判斷之後，就會依照判斷去執行相對應的函數。

index.html

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mytoolbox.js"></script>
<script>
             $(document).ready( function() {
                      $('#myDIV').mytoolbox('update');
                      $('#myDIV').mytoolbox('init',{'var_0' : '你好','var_1' : '這是','var_2' : '測試'});

             })
</script>
</head>
<body>
<div id="myDIV">Hello jQuery Plugin</div>
</body>
</html>

由index.html來執行，首先，mytoolbox 丟進去的參數是'updata'，當開始運作的時候，他會先透過mytoolbox.js裡面我用藍色標記起來的那塊，先判斷要呼叫拿個函數運作。每個函數裡面都要有一個this.each 讓程式知道該從哪裡開始運作。所以當你傳入'updata'，他會顯跳出一個對話視窗"hello"。

但是如果說要接受傳入參數的話，該怎麼辦？我在init的對應函數裡面有寫到。其實概念就只是把上一章的東西一樣，只是搬到更裡面一層放而以，看到mytoolbox.js褐色的部分就都一模一樣，但是到底怎麼傳進去呢？就可以參照index.html藍色第二行，其實都是一樣的。他丟入的概念也是一樣，第一個當作判斷的要執行哪一個函數的參數，後面一個是陣列，丟進去後再由options承接做處理。

請不要忘了，每個函數需要有自己的this.echo，至於是否要傳值進去，就看個人了。

範例檔案下載：http://www.megaupload.com/?d=759Z9ZZH