jQuery-ui：如何从私有函数内部访问选项

Question

我正在学习使用小部件工厂模式编写 jquery-ui 插件。为了更简洁的组织，我在传递给$.widget 的对象文字中定义了一些辅助方法。我想访问这些助手中的选项对象。例如在下面的样板中，我如何访问 _helper() 中的选项对象？

;(function ( $, window, document, undefined ) {

    $.widget( "namespace.widgetName" , {

        options: {
            someValue: null
        },

        _create: function () {
            // initialize something....
        },

        destroy: function () {

            $.Widget.prototype.destroy.call(this);
        },

        _helper: function () {
            // I want to access options here.
            // "this" points to the dom element, 
            // not this object literal, therefore this.options wont work
            console.log('methodB called');
        },

        _setOption: function ( key, value ) {
            switch (key) {
            case "someValue":
                //this.options.someValue = doSomethingWith( value );
                break;
            default:
                //this.options[ key ] = value;
                break;
            }
            $.Widget.prototype._setOption.apply( this, arguments );
        }
    });

})( jQuery, window, document );

谢谢。

Answer 1

所以你在你的 _create 里面做这个：

$(some_selector).click(this._helper)

并且您希望_helper 中的this 成为this._helper 上的this（即您的小部件）。

有多种解决方案：

1. 你可以使用$.proxy

   $(some_selector).click($.bind(this._helper, this));
   

   Underscore 也有 _.bind，如果您不必担心 JavaScript 版本问题，还有一个原生的 Function.bind）。其他库将有自己的函数绑定工具。您已经使用了 jQuery，所以 $.proxy 已经可用且可移植。

2. 您可以使用标准的var _this = this; 技巧代理_helper 自己调用：

   var _this = this;
   $(some_selector).click(function() { _this._helper() });
   

3. 你可以使用eventData form of click:

   $(some_selector).click({ self: this }, this._helper);
   

   然后在_helper:

   _helper: function(ev) {
       var self = ev.data.self;
       // 'self' is the 'this' you're looking for.
       ...
   }