0

jQuery ドキュメントからプラグインを作成するための手順に従っています。セクション 6.1 で指示されているように、呼び出しを同じ名前空間に保持しようとしていますが、各呼び出しでより多くのオプションを通過できるようにする必要もあります。

やりたいこと

$('#element').myFunction({
    method: 'method1',
    option1: 'option1',
    option2: 'option2'
});

私が現在持っているもの

(function($) {

    var methods = {
        init: function(options) {
           //initialization
        },
        method1: function(options) {
            var settings = $.extend({
                'option1' = 'option default',
                'option2' = 'option 2 default'
            }, options);
            //use settings for given method ex: settings.option1, settings.option2
        }
    };

    $.fn.myFunction(options) {
        //method logic
        if(methods[options.method]) {
            return methods[options.method].apply(this, Array.prototype.slice.call(arguments, 1)); //I'm thinking I need to do something here to pass through the options to the methods???
        } else if (typeof options.method === 'object' || !options.method) {
            return methods.init.apply(this, arguments); //or possibly here?
        } else {
            $.error('Method ' + options.method + ' does not exist on jQuery.myFunction');
        }
    };
})(jQuery);

私はしばらくフロント エンドの Web 開発を行っていませんでしたが、もう一度やり直そうとしていますが、メソッド ロジックのセクションはやや混乱しています。でどのような処理が行われているのかを理解する必要がありmethods[options.method].apply()ます。これが各メソッドが呼び出される場所であることは知っていますが、追加のオプションがどこに渡されるかはわかりません。

[アップデート1]

で何が起こっているかについてもう少し読んだapply()ことがありますが、オブジェクトやその他の引数を通過すると信じています。私はそれをに変更しようとしましたmethods[options.method].apply(this, options);が、これは私の問題を修正していないようです.

【アップデート2】

次の変更を加えることで、コードが機能するようになりました

 var methods = {
    init: function(options) {
       //initialization
    },
    method1: function(element, options) {
        var settings = $.extend({
            'option1' = 'option default',
            'option2' = 'option 2 default'
        }, options);
        //use settings for given method ex: settings.option1, settings.option2
         element.each(function() {

         };
    }
};

$.fn.myFunction(options) {
    //method logic
    if(methods[options.method]) {
        return methods[options.method](this, options); // apply(this, Array.prototype.slice.call(arguments, 1)); //I'm thinking I need to do something here to pass through the options to the methods???
    } else if (typeof options.method === 'object' || !options.method) {
        return methods.init.apply(this, options); // arguments); //or possibly here?
    } else {
        $.error('Method ' + options.method + ' does not exist on jQuery.myFunction');
    }
};

元のコードが何をしようとしていたのか、私の変更と比較して説明したい人は誰でも、それを答えとして受け入れます。

4

1 に答える 1

2

これは私がインターネットで見つけたテンプレートで、ゼロから始めないために使用しています...

// keep all your code in a closure
(function($)
{
    // name your plugin - try to make it unique
    $.fn.wTooltip = function(option, settings)
    {
        // check if user is setting/getting properties manually after plugin creation
        if(typeof option === 'object')
        {
            settings = option;
        }
        else if(typeof option === 'string')
        {
            var data = this.data('_wTooltip');

            // this will check if plugin has already been initialized for this element
            if(data)
            {
                if($.fn.wTooltip.defaultSettings[option] !== undefined)
                {
                    if(settings !== undefined){
                        if(option == 'title') data.content.html(settings);
                        data.settings[option] = settings;
                        return true;
                    }
                    else return data.settings[option];
                }
                else return false;
            }
            else return false;
        }

        // extend user settings with default settings
        settings = $.extend({}, $.fn.wTooltip.defaultSettings, settings || {});

        // iterate through all elements and return them to maintain jQuery method chaining
        return this.each(function()
        {
            var elem = $(this);

            // create copy of settings object allowing us to make individual adjustments
            // this ensures that only values for current element are changed
            var $settings = jQuery.extend(true, {}, settings);
            $settings.title = settings.title || elem.attr('title') || 'No title set';

            // create a tooltip object
            var tooltip = new Tooltip($settings);

            // we would typically run our generation code here
            tooltip.generate();

            // run some code here
            // try to keep as much of the main code in the prototype methods as possible
            // focus on just setting up the plugin and calling proper methods from here

            // store the tooltip object for later reference - setters/getters
            elem.data('_wTooltip', tooltip);
        });
    }

    // provide default settings
    // setting it up like this allows a developer to modify defaults like so:
    // $.fn.wTooltip.defaultSettings.color = 'white';
    $.fn.wTooltip.defaultSettings = {
        position    : 'mouse',
        color       : 'black'
    };

    // create our tooltip "class"
    // this will store the unique individual properties for each tooltip
    function Tooltip(settings)
    {
        this.tooltip = null;
        this.settings = settings;

        return this;
    }

    // prototype the tooltip class
    // this will contain methods shared amongst all tooltips
    // DO NOT keep any unique tooltip properties here
    Tooltip.prototype = 
    {
        generate: function()
        {
            // use local reference of this
            // this will be important when using in other closures like event closures
            var $this = this;

            // return the tooltip in case its already been defined for the current element 
            if($this.tooltip) return $this.tooltip;

            //code
        },

        someFunc: function()
        {
            //code
        }
    }
})(jQuery);

wTooltipは、独自のプラグインを作成するためにパーソナライズする必要がある名前です

于 2012-06-28T17:08:09.180 に答える