jquery - 同一页面上有多个 jQuery 插件实例？

Question

我见过很多不同的 jQuery 插件样板，并阅读了很多不同的 jQuery 插件创作文章，包括官方的文章。然而，从根本上来说，我似乎仍然缺少一些东西!

我使用的是我在其他地方看到的代码的混合和 jQuery's official authoring guidelines .

正如您从代码中看到的，我正在 return this.each(function() { }); 内部执行所有操作。这包括我的私有(private)职能。我认为这意味着对于每个 .pluginName(); 调用，代码将运行并绑定(bind)到该实例。例如，我将 randID 添加到每个元素 ID 的末尾，以便在创建多个实例时，该实例可以引用正确的元素。

我的问题是，当我在同一页面上有两个实例时，第二个实例的函数(如 displayAvailableItems())正在使用第一个实例 randID s.

我立即假设有两件事是错误的:函数位于错误的位置，并且 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);

Answer 1

首先，您需要将 var params 移动到 this.each 中，但是您将拥有一个变量提升(不确定这是否真的发生了，但这就是它的原因)似乎是)由于使用参数名称作为变量名称导致 params 未定义而出现问题。要解决这个问题，只需将 this.each 中的参数重命名为其他名称即可。示例:

$.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/