jQuery expose plugin functions

Question

One of our old developers has built a jQuery plugin like so:

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();
}
};

I've not done any jQuery plugin programming, but would like to expose the switchTo function so it can be called anywhere. How would I be able to do this?

Answer 1

This is probably overkill for your purposes, but it doesn't seem like your developer really understood or grasped the purpose of jQuery plugins.

You want a plugin to be somewhat generic where it can accept a selector and apply events, styles, dynamic html, whatever to the item(s) found in the selector. It looks like he wrote a "plugin" for a single purpose... maybe just to maintain some sort of organization.

Most plugins follow a form similar to this:

; (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);

Here's the official documentation on the subject: http://docs.jquery.com/Plugins/Authoring

Answer 2

You can use Jquery UI Widget Factory to create stateful plugins, which allows you to expose public methods (still avoiding global window scope) to be used even after the plugin has been instantiated

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

Answer 3

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