Question

我已经开始编写jQuery插件了，我希望能够：

在我将其称为$('selector').sitemap(options);
在插件

关于第一个问题：我是否按照我编写初始化（init函数）的方式正确完成了这个问题，还是有更正确/优雅的方法呢？

关于第二个问题：为了使用像'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.＆amp; 2.我认为使用对象来存储站点地图的状态更优雅，然后将所有内容转储到jQuery上调用的函数中。这将分离您对“Sitemap”对象的操纵以及通过jquery操纵dom。

您现在可以对Sitemap对象使用任何OO技术。就像创建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

希望有所帮助！

我编写jQuery插件的方法是否正确？

2 个答案: