Question

我们的一位老开发人员已经构建了一个类似的jQuery插件：

jQuery.fn.limelight = function(options) {  

/*Skipped code here*/

jQuery(".spotlight-btn.back a").click( function (e) {

            if(lastSelectedCastIndex - 1 >= 0) {
                removeFromSpotlight();
                lastSelectedCastIndex--;
                e.preventDefault();
                $.address.value(lastSelectedCastIndex);
                ca$t.scroll(jQuery.jcarousel.intval(lastSelectedCastIndex), true);
                switchTo(lastSelectedCastIndex);
            }
            return false;
        });

function switchTo(i)
{
    ca$t.scroll(jQuery.jcarousel.intval(i), true);
    $.address.title($("#title_text").text());
    putInSpotlight();
}
};

我没有做任何jQuery插件编程，但是希望公开switchTo函数，以便可以在任何地方调用它。我怎么能这样做？

Answer 1

这对你的目的来说可能有点过头了，但是你的开发人员似乎并不真正理解或掌握了jQuery插件的目的。

您希望插件在某种程度上是通用的，它可以接受选择器并将事件，样式，动态html应用于选择器中找到的项目。看起来他为一个目的写了一个“插件”......也许只是为了维持某种组织。

大多数插件都遵循与此类似的形式：

; (function ($) {
    $.fn.limelight  = function (method) {
        var methods = {
            //Initialize the plugin
            init: function (options) {
                return this.each(function () {
                //Refactor to conform to plugin style
//                    $(this).click( function (e) {
//                        if(lastSelectedCastIndex - 1 >= 0) {
//                            removeFromSpotlight();
//                            lastSelectedCastIndex--;
//                            e.preventDefault();
//                            $.address.value(lastSelectedCastIndex);
//                            ca$t.scroll(jQuery.jcarousel.intval(lastSelectedCastIndex), true);
//                            switchTo(lastSelectedCastIndex);
//                        }
//                        return false;
//                    });
                });
            },

            switchTo: function (i) {
            //Refactor to conform to plugin style
//                ca$t.scroll(jQuery.jcarousel.intval(i), true);
//                $.address.title($("#title_text").text());
//                putInSpotlight();

            }
        };

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.limelight');
        }
    };
})(jQuery);

//Following this pattern you'd be able to call your plugin like this. 
$(".spotlight-btn.back a").limelight();
$(".spotlight-btn.back a").limelight("switchTo", 0);

以下是有关此主题的官方文档：http://docs.jquery.com/Plugins/Authoring

Answer 2

将switchTo（）函数粘贴到<script></script>标记中，使其成为一般可用的函数。

Answer 3

您可以使用Jquery UI Widget Factory创建有状态插件，这样即使在插件实例化后，您也可以使用公共方法（仍然避免使用全局窗口范围）

https://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/

jQuery公开插件函数

3 个答案: