Question

如何为jquery-plugin提供可在不同插件函数中访问的各个局部变量？

我的脚本会显示内容为“123”的提醒，但我期待'abc'。所以变量't'只存在一次而不是每个插件两次。因此，对于每个插件实例，还应该有一个变量't'的实例。

<html>
<head>
<title></title>

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    (function ($) {
        var t = null;
        $.fn.doSomething = function()
        {
            alert(t);
        }
        $.fn.myHtmlControl = function(option) {
            t = option;
        }
    })(jQuery);

    $(function () {
        $('#ctrl1').myHtmlControl("abc");
        $('#ctrl2').myHtmlControl("123");            
        $('#ctrl1').doSomething();
    })        
</script>

</head>
    <body>
        <div id='ctrl1'>Ctrl1</div>
        <div id='ctrl2'>Ctrl2</div>
    </body>
</html>

Answer 1

您需要的就是：

// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 1.1, May 14th, 2011
// by Stefan Gabos

// remember to change every instance of "pluginName" to the name of your plugin!
(function($) {

    // here we go!
    $.pluginName = function(element, options) {

        // plugin's default options
        // this is private property and is  accessible only from inside the plugin
        var defaults = {

            foo: 'bar',

            // if your plugin is event-driven, you may provide callback capabilities for its events.
            // execute these functions before or after events of your plugin, so that users may customize
            // those particular events without changing the plugin's code
            onFoo: function() {}

        }

        // to avoid confusions, use "plugin" to reference the current instance of the object
        var plugin = this;

        // this will hold the merged default, and user-provided options
        // plugin's properties will be available through this object like:
        // plugin.settings.propertyName from inside the plugin or
        // element.data('pluginName').settings.propertyName from outside the plugin, where "element" is the
        // element the plugin is attached to;
        plugin.settings = {}

        var $element = $(element),  // reference to the jQuery version of DOM element the plugin is attached to
             element = element;        // reference to the actual DOM element

        // the "constructor" method that gets called when the object is created
        plugin.init = function() {

            // the plugin's final properties are the merged default and user-provided options (if any)
            plugin.settings = $.extend({}, defaults, options);

            // code goes here

        }

        // public methods
        // these methods can be called like:
        // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or
        // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside the plugin, where "element"
        // is the element the plugin is attached to;

        // a public method. for demonstration purposes only - remove it!
        plugin.foo_public_method = function() {

            // code goes here

        }

        // private methods
        // these methods can be called only from inside the plugin like:
        // methodName(arg1, arg2, ... argn)

        // a private method. for demonstration purposes only - remove it!
        var foo_private_method = function() {

            // code goes here

        }

        // fire up the plugin!
        // call the "constructor" method
        plugin.init();

    }

    // add the plugin to the jQuery.fn object
    $.fn.pluginName = function(options) {

        // iterate through the DOM elements we are attaching the plugin to
        return this.each(function() {

            // if plugin has not already been attached to the element
            if (undefined == $(this).data('pluginName')) {

                // create a new instance of the plugin
                // pass the DOM element and the user-provided options as arguments
                var plugin = new $.pluginName(this, options);

                // in the jQuery version of the element
                // store a reference to the plugin object
                // you can later access the plugin and its methods and properties like
                // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or
                // element.data('pluginName').settings.propertyName
                $(this).data('pluginName', plugin);

            }

        });

    }

})(jQuery);

来源：http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

Answer 2

通常的做法是使用data函数存储与元素本身的特定元素相关的信息。所以在你的情况下（live example）：

(function ($) {
    $.fn.doSomething = function()
    {
        alert(this.data("myHtmlControl"));
    }
    $.fn.myHtmlControl = function(option) {
        this.data("myHtmlControl", option);
    }
})(jQuery);

如果您需要存储多个选项，这里有一个更强大的示例（live copy）：

(function ($) {
    var defaults = {
        msg1: "(msg1)",
        msg2: "(msg2)"
    };

    $.fn.doSomething1 = function()
    {
        alert(getOption(this, "msg1"));
        return this;
    }
    $.fn.doSomething2 = function()
    {
        alert(getOption(this, "msg2"));
        return this;
    }

    $.fn.myHtmlControl = function(options) {
        this.data("myHtmlControl", $.extend({}, defaults, options));
        return this;
    };

    function getOption(inst, name) {
        var obj = inst.data("myHtmlControl");
        return (obj || defaults)[name];
    }

    function setOption(inst, name, value) {
        var obj = inst.data("myHtmlControl");
        if (!obj) {
            obj = $.extend({}, defaults);
            inst.data("myHtmlControl", obj);
        }
        obj[name] = value;
    }
})(jQuery);
jQuery(function($) {

    $("#theButton").click(function() {
        $('#ctrl1').myHtmlControl({msg1: "abc"});
        $('#ctrl2').myHtmlControl({msg2: "123"});
        alert("about to do ctrl1");
        $('#ctrl1').doSomething1().doSomething2();
        alert("about to do ctrl2");
        $('#ctrl2').doSomething1().doSomething2();
    });

});

jquery-plugin中的全局变量或局部变量

2 个答案: