jQueryプラグインを作成する私の方法は正しいですか？

Question

私はjQueryプラグインを書き始めていると私のことができるようにしたい：私は（「ビューポート」、「ローダー」のような）一部のメンバーを使用し

$('selector').sitemap(options);このようにそれを呼び出すとき

1. はそれを初期化する機能で

リガード第一の問題プラグイン：私は、初期化（init関数）を書いたか、それを行うには、より正確な/エレガントな方法があるように、正確にそれを行っていますか？

第2の問題については、： 'loader'、 'viewPort'のようなメンバーを使用するために、私はすべての関数をsitemapオブジェクトに書きました。私はそれを正しくやったことがありますかそれを行うにはより正確でエレガントな方法がありますか？

jQueryのドキュメントのページにjQueryのためのプラグインを作成する方法についていくつかの素晴らしいドキュメントがあり

(function ($) { 
    $.extend($.fn, { 
     sitemap: function (options) { 
      //check if applied on valid DIV element 
      var canvas = this; 
      if (!canvas.is('div')) return; 

      var viewPort = null; 
      var loader = $('<p id="initLoader">Loading...</p>'); 

      init(); 
      loadMap(); 

      function init() { 
       //create viewPort div 

       setCanvas(); 
      } 
      function setCanvas() { 
         //set height and width 
      } 
      function loadMap() { 
       viewPort.prepend(loader);      
       buildMap($.parseJSON('{"pages":[]}')); 
      } 
      function buildMap(map){ 
       //... 
      }   
})(jQuery); 

Answer 1

あなたのコードをリファクタリングしました。

サイトマップ機能をクロージャスコープに移動しました。すべての操作をコンストラクタ関数にラップします。

新しいサイトマップオブジェクトを作成し、プロトタイプからメソッドチェーンを呼び出すサイトマップコンストラクタ内に作成します。

1.私はあなたのサイトマップの状態を格納するためにオブジェクトを使用すると、jQueryで呼び出された関数にすべてをダンプする方がよりエレガントだと思います。これはあなたの "Sitemap"オブジェクトの操作とdomからjqueryへの操作を分けます。

これで、サイトマップオブジェクトにあらゆるオブジェクト指向技術を使用できるようになりました。 Map関数を作成し、loadMapにnew Mapを作成するように委譲し、map.getHTMLを呼び出すなどです。

(function($) { 

    // to be called when $(selector).sitemap is called. 

    function sitemap(options) { 
     // store the canvas 
     var canvas = this; 
     if (canvas.is("div")) { 
      // if its a div then create a new canvas object. 
      // Ideally the object will set event handlers and should handle 
      // any changes through dom events so you dont have to manually 
      // call any methods on it 
      canvas = new Sitemap(canvas); 
     } 
     // return this so you can chain .sitemap 
     return this; 
    } 

    // Constructor function takes the div 

    function Sitemap(canvas) { 
     // store them as variables on the sitemap object 
     this.canvas = canvas; 
     this.viewport = null; 

     // init & load the map. 
     this.init(); 
    } 

    // All sitemap objects have these methods defined on them 
    Sitemap.prototype.init = function() { 
     //create viewport div 
     //set height and width 
     this.loadmap(); 
    }; 

    Sitemap.prototype.loadMap = function() { 
     var loader = $('<p id="initLoader">Loading...</p>'); 
     this.viewPort.prepend(loader); 
     // create a new map object 
     this.map = new Map(json); 
    }; 

    function Map(json) { 
     //... 
    } 

    Map.prototype.addToContainer = function(container) { 
     //... 
    }; 


    $.extend($.fn, { 
     sitemap: sitemap 
    }); 

})(jQuery); 

Answer 2

：助けhttp://docs.jquery.com/Plugins/Authoring

ホープ！