plugin methods - what's the magic here?_问答_开发者

开发者 https://www.devze.com 2023-03-18 01:51 出处：网络

I struggled and finally got [this] to work.now, I wanted to break it up a开发者_运维知识库s shown below but it doesn\'t work... is there some voodoo here I don\'t understand?

I struggled and finally got [this] to work. now, I wanted to break it up a开发者_运维知识库s shown below but it doesn't work... is there some voodoo here I don't understand?

<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="http://goo.gl/XQPhA"></script>
<script type="text/javascript">
(function($) {
    $.test = function(options) {
        options = $.extend({}, $.test.settings, options);

        this.whiten = function() {
            $(this).css('background-color', options.bg);
        };
    };
    $.test.settings = { bg: 'white' };

    $.fn.test = function(options) {
        return this.each(function(index, el) {
            $.test(options);
        });
    };
})(jQuery);

$(document).ready(function() {
    $('ul').test().css('background-color', 'wheat');
    $('#go').click(function() {
        $('ul').whiten();
    });
});
</script>
</head>

<body>
<button id="go">whiten</button>
<ul id="list1">
<li>Aloe</li>
<li>Bergamot</li>
<li>Calendula</li>
<li>Damiana</li>
<li>Elderflower</li>
<li>Feverfew</li>
</ul>
<ul id="list2">
<li>Ginger</li>
<li>Hops</li>
<li>Iris</li>
<li>Juniper</li>
<li>Kavakava</li>
<li>Lavender</li>
<li>Marjoram</li>
<li>Nutmeg</li>
<li>Oregano</li>
<li>Pennroyal</li>
</ul>
</body>
</html>

as compared with the previous code, inside of the each() loop I call now $.test(options) instead of $.fn.test(options) - so why does one work and not the other (actually, why/how does the first one work to begin with)?

I would restructure your plugin to follow the guidelines outlined in the plugin authoring guide, most notably storing the data for the settings for your widget with .data() and making method calls to your plugin with .test("method"):

(function($) {
    /* Default plugin settings: */
    var settings = {
        bg: 'white'
    };

    /* Method definitions: */
    var methods = {
        init: function(options) {
            options = $.extend({}, options, settings);
            return this.each(function () {
                $(this).data("test", options);
            });
        },
        whiten: function() {
            var options = this.data("test");
            this.css('background-color', options.bg);
        }
    };

    /* Plugin definition and method calling logic: */
    $.fn.test = function(method) {
        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');
        }
    }
})(jQuery);

Usage: $("elem").test(), $("elem").test("whiten")

Here's a working example: http://jsfiddle.net/z4R3X/

An additional resource for plugin authoring guidance is the jQueryUI source code (take the autocomplete widget for example). These widgets are pretty good examples of how to create reusable, readable jQuery plugins.