Является ли мой способ для написания плагинов jQuery правильно?

Question

Я начал писать JQuery плагин, и я хочу, чтобы иметь возможность:

1. инициализировать его, когда я называю его, как этот $('selector').sitemap(options);
2. использовать некоторые элементы (например, «загрузчиком», «VIEWPORT») в функциях в плагин

Сосчитайте первая проблема: я сделал это правильно так, как я написал инициализации (функция инициализации) или есть более правильный/изящный способ сделать это?

Относительно второй проблемы: для использования таких элементов, как 'loader', 'viewPort' Я написал все функции в объекте sitemap. Я сделал это правильно или есть более правильный/элегантный способ сделать это?

(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

Рефакторинг вашего кода для вас.

Перемещена функция карты сайта в область ограничения. Обернул все ваши манипуляции в функцию конструктора.

Вы создаете новый объект Sitemap и внутри конструктора Sitemap, который вы вызываете цепочкой методов из прототипа.

Что касается 1. & 2. Я думаю, что использование объекта для хранения состояния вашей карты сайта является более элегантным, а затем сбрасывает все в функцию, называемую jQuery. Это разделяет ваши манипуляции с вашим объектом «Sitemap» и вашими манипуляциями с dom через jquery.

Теперь вы можете использовать любую технику OO с вашим объектом Sitemap. Как создание функции 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

Существует некоторая большая документация о том, как писать плагин для JQuery на странице JQuery Документов http://docs.jquery.com/Plugins/Authoring

Надежда, что помогает!