使用jQuery UI Widget Factory创建实例变量的正确方法

use*_*947 9 jquery jquery-ui jquery-ui-widget-factory

我正在使用jQuery UI小部件工厂.

$.widget("myPlugin" , {

    options: {
    },

    _create: function() {
    },

    instanceVar: "huzzah!"

});
Run Code Online (Sandbox Code Playgroud)

在测试时,看起来instanceVar实际上是原型的一部分.所以插件的所有实例都是一样的.

我可以通过将instanceVar放入选项来解决这个问题,如下所示:

$.widget("myPlugin" , {

    options: {
        instanceVar: "huzzah!"
    },

    _create: function() {
    },

});
Run Code Online (Sandbox Code Playgroud)

然而,这似乎很奇怪,因为instanceVar只是插件使用的内部变量 - 而不是插件的用户应该能够改变的东西.

有另一种(更好的)方法来实现这一目标吗?

谢谢你的帮助!

use*_*654 14

您可以将私有数据存储在实例本身上,例如_create,您应该可以在内部存储this.instanceVar = "huzzah!"

$.widget("ui.myPlugin", {

    options: {
        foo: "foo"
    },

    _create: function() {
        this.instanceVar = "huzzah!"
    },

    _setOption: function() {
        this.instanceVar = "worky!";
    },

    destroy: function() {
        console.log(this.instanceVar);  
    }

});

$(document).myPlugin().myPlugin("option","foo","bar").myPlugin("destroy"); // "worky"

$("body").myPlugin().myPlugin("destroy"); // "huzzah!
Run Code Online (Sandbox Code Playgroud)

演示:http://jsfiddle.net/PGUqr/

  • 应该注意的是,使用下划线前缀实际上并不会阻止访问此类"私有"成员和方法.您仍然可以通过$('#myElement').data('pluginName')._ foo访问它们.添加下划线的做法是通过在窗口小部件上调用方法的常用方法来省略该函数:$('#myElement').pluginName('somePublicFunction').一旦您获得对窗口小部件实例的引用,您就可以完全访问所有内容,无论它是否具有前导下划线. (3认同)