4

私はさまざまな jQuery プラグインの定型文を見てきました。また、公式の記事を含め、さまざまな jQuery プラグインのオーサリング記事を読みました。しかし、根本的に、まだ何かが欠けているようです!

他の場所で見たコードとjQuery の公式の作成ガイドラインを組み合わせて使用​​しています。

コードからわかるように、私はすべてを内部で行っていますreturn this.each(function() { });。これには、私の私的な機能が含まれます。これは、呼び出されるたび.pluginName();にコードが実行され、そのインスタンスに関連付けられることを意味すると思いました。たとえば、randID複数のインスタンスが作成された場合にインスタンスが正しい要素を参照できるように、各要素 ID の末尾に a を追加しています。

私の問題は、同じページに 2 つのインスタンスがある場合、2 番目のインスタンスの関数 ( などdisplayAvailableItems()) が最初のインスタンスrandIDs を使用していることです。

関数が間違った場所にあり、randID が要素を識別する悪い方法であるということです。displayAvailableItems()のすぐ上に移動するretun this.each(function() { });と、availableItem変数は使用できなくなります。

これが私のコードの短縮版です: (pastebin) http://tny.cz/6d3d52a8

$.pluginName = {
     id: 'PluginName'
    ,version: '1.0'
,defaults: { // default settings
    foo: 'bar'
}
};

(function($) {
    //Attach this new method to jQuery
    $.fn.extend({ 

            pluginName: function(params) {
            //Merge default and user parameters
                    var params =  $.extend($.pluginName.defaults, params)
            ,otherGeneralVars = 'example'
        ;

        return this.each(function() {       
            var $t = $(this);

            //Generate a random ID to attach to the elements, so we can have endless (up to 50k) quantities of the plugin on the page
                            var randID = 1 + Math.floor(Math.random() * 50000);
                            //Make sure the randID hasn't been previously used
                            while ($.inArray(randID, usedRandIDs) > -1)
                            {
                                    randID = 1 + Math.floor(Math.random() * 50000);
                            }
                            usedRandIDs.push(randID);
                            randID = '_PluginName' + randID;

            /*
                                    RUN INITIALIZATION SETTINGS
                            */
                            var availableItemsContainerID = 'availableItemsContainer' + randID
                ,tagSearchContainerID = 'tagSearchContainer' + randID
                ,tagSearchID = 'tagSearch' + randID
                ,availableItemsID = 'availableItems' + randID
                ,selectedItemsContainerID = 'selectedItemsContainer' + randID
                ,selectedItemsID = 'selectedItems' + randID
                ,selectedValuesID = 'selectedValuesInputName' + randID
            ;

            //Build element structure
                            $t.append('<div id="' + availableItemsContainerID + '">' +
                                                            '<div id="' + tagSearchContainerID + '">' +
                                                                    '<input id="' + tagSearchID + '" value="' + params.searchDefaultText + '" />' +
                                                            '</div>' +
                                                            '<div id="' + availableItemsID + '"></div>' +
                                                    '</div>' +
                                                    '<div id="' + selectedItemsContainerID + '">' +
                                                            '<div id="' + selectedValuesID + '"></div>' + 
                                                            '<div id="' + selectedItemsID + '"></div>' +
                                                    '</div>');      

            //Show the list of available items
                            displayAvailableItems();

            $('#' + availableItemsContainerID).css({
                              'width': params.availableItemsContainerWidth + params.unitOfMeasurement,
                              'height': params.availableItemsContainerHeight + params.unitOfMeasurement
                            });
                            $('#' + selectedItemsContainerID + ', #' + selectedItemsID).css({
                              'width': params.selectedItemsContainerWidth + params.unitOfMeasurement,
                              'height': params.selectedItemsContainerHeight + params.unitOfMeasurement
                            });

            function displayAvailableItems() {
                                    //Clear out the available items
                                    $("#" + availableItemsID).html('');

                                    //Do other stuff
                            }
        });
               }
       })
        })(jQuery);
4

1 に答える 1

14

var paramsまず、 this.eachに移動する必要がありますが、引数名を変数名として使用しているため、変数の巻き上げ(実際に何が起こっているのかは完全にはわかりませんが、そのように見えます) の問題が発生します。 params が未定義になります。これを解決するには、 this.each 内の params を別の名前に変更します。例：

$.fn.extend({

    pluginName: function (params) {
        //Merge default and user parameters
        var otherGeneralVars = 'example';

        return this.each(function () {
            var $t = $(this), opts = $.extend({},$.pluginName.defaults, params);

            $t.text(opts.foo + uniqueId);
        });
    }
})

http://jsfiddle.net/M99EY/1/

于 2013-02-20T20:29:02.133 に答える