编写一个jQuery插件：公共方法和多个插件实例

Question

我已经花了几个小时编写jQuery插件，阅读了文档，在帖子中进行了搜索等等。 一件事还不清楚。 我正在编写具有多个实例的插件，所以我有类似的东西

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>

<script type="text/javascript">
    $(".box").myPlugin();
</script>

因此，该插件将作用于两个DOM元素。 这是一个插件演示。 假设我需要一个或多个私有变量（演示中为myValue），当然任何实例（box1，box2）的值都不同。

(function ( $ ) {

    $.fn.myPlugin = function() {

        this.each(function() {

            /* this is a private variable */
            var myValue = Math.floor(Math.random() * 10000);
        });  

        return this;
    };

    /* this is a public method */
    $.fn.myPlugin.showValue = function() {
        alert('My value is ' + myValue);
    };

}( jQuery ));

现在，我需要这个插件来公开一个公共方法来读取/写入此类私有变量。 当然，上面的代码将失败，并显示“ myValue is undefined”错误。

我需要以某种方式获取对任何实例的引用，然后调用“其”公共方法。 就像是

$（'＃box2'）。showValue（）/ * ??? * /

任何帮助将不胜感激。 谢谢。

Answer 1

不幸的是，如果不简单地在$.fn namespace上定义其他“插件”，就没有简单的方法来使示例工作。

通常，插件的方法可以作为传递给插件的参数来实现：

$("foo").myPlugin(); // initialize
$("foo").myPlugin("doSomething"); // do something

或通过提供“实例”对象来实现：

$("foo").myPlugin(); // initialize
var inst = $("foo").data("myPlugin"); // get instance
inst.doSomething(); // do something

可以在这里找到第一个选项的示例： http : //learn.jquery.com/plugins/basic-plugin-creation/