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

Question

我正在使用jQuery UI部件工厂。

$.widget("myPlugin" , {

    options: {
    },

    _create: function() {
    },

    instanceVar: "huzzah!"

});

测试结果显示，instanceVar 实际上属于原型的一部分。因此，它在插件的所有实例中都是相同的。

我可以通过将 instanceVar 放入选项中来修复这个问题：

$.widget("myPlugin" , {

    options: {
        instanceVar: "huzzah!"
    },

    _create: function() {
    },

});

然而，这似乎很奇怪，因为instanceVar只是插件内部使用的变量，用户不应该能够更改它。

是否有另一种（更好的）方法来实现这一点？

感谢您的帮助！

- user1031947

---

你可以在实例本身上存储私有数据，例如，在_create内部，你应该能够执行this.instanceVar = "huzzah!"。 - Kevin B

Answer 1

您可以在实例本身上存储私有数据，例如，在_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!

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

- Kevin B

---

你也可以像声明函数一样使用下划线前缀来声明一个私有实例变量。_instanceVar: undefined。 - Geoff Cox

需要注意的是，使用下划线前缀并不能真正防止访问这些“私有”的成员和方法。您仍然可以通过$('#myElement').data('pluginName')._foo来访问它们。添加下划线的作用是从小部件的常规方法调用中省略该函数：$('#myElement').pluginName('somePublicFunction')。一旦您获得了小部件实例的引用，无论它是否具有前导下划线，您都可以完全访问所有内容。 - jinglesthula

请注意，尽管option成员没有下划线，但文档表明可以通过.option()方法访问其内容：https://api.jqueryui.com/jquery.widget/#method-option - jinglesthula