Question

我正在研究一个jQuery插件，并使用匿名闭包模式来包装作品。在内部，我用几种方法定义了一个对象原型。我之前的做法是定义一个闭包全局var self并在构造函数中设置self = this。然后，我可以通过在self上调用它来调用实例上的任何方法。适用于一次性单实例插件，但不能在单个页面中支持同一插件的多个实例。在那种情况下，我遇到了被覆盖的状态，我想是因为我在所有地方使用了这个单一的类代码引用。

快进，我试图效仿Alex Sexton https://alexsexton.com/blog/2010/02/using-inheritance-patterns-to-organize-large-jquery-applications/

找到的一个例子

他的代码显示了使用$.data(this,'myPlugin',MyClassObj)来缓存父元素上的类的实例。我显然不明白如何重用该缓存对象。问题1：如何重新加载特定实例？在闭包上下文中这样做的一个例子很棒。

此外，在我的设计中，我有几个keydown处理程序，当它们完成时应该调用一个共同的重新显示功能。但是，this与事件的目标相关联，我无法看到如何从此函数中调用另一个方法。正如我之前所说，我曾经使用一个闭包全局来访问其他方法，但对于多个实例插件来说，这似乎是不明智的。问题2：如何从覆盖this值的函数中重新获得闭包范围this？

(function($){
    var MyClass = {
        init: function(opt,elem) {
            this.options = $.extend({},this.options,options);
            this.elem  = elem;
            this.$elem = $(elem);
            this._build();

            $('.selector',this.elem).on('keydown', this._move );

            // other setup things 
            return this;
        },
        _build: function() {
            // build out the html object
        },
        _move: function(e) {
            if(which == 38) {
                e.preventDefault();
                // move some things, store some state 
                // QUESTION 1: how should I store this state?
            }
                // QUESTION 2: how should I invoke the redisplay fn?
            this._redisplay();   // does not work: this == e.target
        },
        _redisplay: function() {
             console.log( 'redisplaying state data' );
                // QUESTION 3: how should I be retrieving this state ?
        }
    }; // end of MyClass

    // Start up the plugin
    $.fn.myClass = function(options) {
        if ( this.length ) {
            return this.each(function(){
                if ( ! $.data(this, 'myClass') ) {
                    $.data(this, 'myClass', Object.create(MyClass).init(options, this));
                }
            });
        }
    };
})(jQuery);

任何见解都非常受欢迎。

在js类闭包

0 个答案: