Is my way for writing jQuery plugins correct?

I've started writing jQuery plugin and I want to be able to:

1. initialize it when I call it like this $('selector').sitemap(options);
2. use some members(like 'loader', 'viewPort') in functions in plugin

Regard the 1st problem: have I done it correctly in the way I wrote initialization (init function) or there is more correct / elegant way to do it?

Regard the 2nd problem: in order to use members like 'loader', 'viewPort' I wrote all functions in sitemap object. Have I done it right or there is more correct / elegant way to do it?

(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);

Refactored your code for you.

Moved the sitemap function into closure scope. Wrapped all your manipulation into a constructor function.

You create a new Sitemap object and inside the Sitemap constructor you call the chain of methods from the prototype.

As to 1. & 2. I think using an object to store the state of your sitemap is more elegant then dumping everything into the function called on jQuery. This seperates your manipulation of your "Sitemap" object and your manipulation of the dom through jquery.

You can now use any OO technique with your Sitemap object. Like creating a Map function and delegating loadMap to creating a new Map and calling map.getHTML on it or something.

(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);

There is some great documentation about how to write plugins for jQuery on the jQuery docs page: http://docs.jquery.com/Plugins/Authoring

Hope that helps!