Мой способ написания плагинов JQuery правильный?

Question

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

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

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

Относительно второй проблемы : чтобы использовать такие элементы, как '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. IПодумайте, использование объекта для хранения состояния вашей карты сайта более элегантно, чем выгрузка всего содержимого в функцию, вызываемую в jQuery.Это разделяет ваши манипуляции с вашим объектом "Sitemap" и ваши манипуляции с dom с помощью jquery.

Теперь вы можете использовать любую ОО-метод с вашим объектом 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

Надеюсь, это поможет!