javascript - "best"jquery 中的对象表示法/上下文绑定(bind)

Question

我正在从原型(prototype)切换到jquery，并且我正在努力使用“最佳”对象/类表示法。最困扰我的是“this”上下文，它不允许我在回调函数(例如事件处理程序，甚至 jquery 的 .each() 方法)中使用时访问对象本身。在原型(prototype)中我使用.bind()或.bindAsEventListener()，但在jquery中我只发现以下方法:1)缓存对象指针(这对我来说用字面表示法效果不佳)2)使用$.proxy()方法我发现这两种方法都非常不优雅/丑陋。我有相同功能的 2 种变体(简单的弹出窗口)，请告诉我您更喜欢哪一种以及原因。或者你可以提出一些改进建议。非常感谢您的帮助。

变体1:

Dialog = function(container, callback) {
  this.init(container, callback);
}

$.extend(Dialog.prototype, {
   init: function(container, callback) {
     this.dialog = $(container);
     this.callback = callback;
     this.buttons = {
       ok: this.dialog.find('[data-type="ok"]'),
       cancel: this.dialog.find('[data-type="cancel"]')
     }
     $.each(this.buttons, $.proxy(function(key, button) {
       button.click($.proxy(function() { this.hide(key); }, this));
     }, this));
   },

   show: function() {
     this.dialog.show();
   },

   hide: function(key) {
     this.dialog.hide();
     this.callback(key);
   }   
});

变体2:

function Dialog2(container, callback) {
  var self = this;
  self.dialog = $(container);
  self.callback = callback;
  self.buttons = {
    ok: self.dialog.find('[data-type="ok"]'),
    cancel: self.dialog.find('[data-type="cancel"]')
  }
  $.each(self.buttons, function(key, button) {
    button.click(function() { self.hide(key); });
  });

  self.show = function() {
    self.dialog.show();
  }

  self.hide = function(key) {
    self.dialog.hide();
    self.callback(key);
  }
}

实例是使用例如创建的:

var dialog = new Dialog($('#dialog'), function(result){ alert(result); });
dialog.show();

(另外，我不太确定为什么在变体 1 中，“this.dialog”是在 block “this.buttons = { ... }”内定义的。我建议在嵌套对象内使用“this”指向匿名嵌套对象本身...)

Answer 1

必须有几乎无限多种方法来解决这个问题。

绝对避免嵌套的 $.proxy()，这会让经验不足的程序员感到困惑，他们将来可能需要维护您的代码，而经验丰富的程序员会问“为什么？”。

坚持 POJS 构造函数的想法，您可以通过使用私有(private)成员加上几个 this... 编写整个构造函数来几乎完全避免 this结束将某些函数公开为公共(public)方法。

(未经测试):

var Dialog = function(container, callback) {
    //define private members
    var dialog, buttons;
    var init = function() {
        dialog = $(container);
        buttons = {
            ok: dialog.find('[data-type="ok"]'),
            cancel: dialog.find('[data-type="cancel"]')
        };
        $.each(buttons, function(key, button) {
            button.on('click', function() {
                hide(key);
            });
        });
    };
    var show = function() {
        dialog.show();
    };
    var hide = function(key) {
        dialog.hide();
        callback(key);
    };

    //initialize
    init();

    //expose public methods
    this.show = show;
    this.hide = hide;
}

请注意私有(private)函数如何直接访问其他私有(private)成员，包括其他私有(private)函数和实例化时传递的形式变量。公共(public)方法只是对私有(private)函数的引用。

远离简单的构造函数，您可能需要考虑:

• John Resig 对 Simple “Class” Instantiation 的看法
• 写一个 jQuery plugin ，允许使用 $('#myDialog').dialog({callback:function(){...}}), 进行实例化。

插件可能看起来像这样(未经测试):

(function($){
    // **********************************
    // ***** Start: Private Members *****
    var pluginName = 'dialog';
    // ***** Fin: Private Members *****
    // ********************************

    // *********************************
    // ***** Start: Public Methods *****
    var methods = {
        init : function(options) {
            //"this" is a jquery object on which this plugin has been invoked.
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                // If the plugin hasn't been initialized yet
                if (!data){
                    var settings = {
                        callback: function(){}
                    };
                    if(options) { $.extend(true, settings, options); }

                    var buttons = {
                        ok: $this.find('[data-type="ok"]'),
                        cancel: $this.find('[data-type="cancel"]')
                    };
                    $.each(buttons, function(key, button) {
                        $this.on('click', button, function() {
                            methods.hide.call($this, key);
                        });
                    });

                    $this.data(pluginName, {
                        target : $this,
                        settings: settings
                    });
                }
            });
        },
        show: function() {
            return this.each(function(index){
                $(this).show();
            });
        },
        hide: function(key) {
            return this.each(function(index){
                $(this).hide().data(pluginName).settings.callback(key);
            });
        }
    };
    // ***** Fin: Public Methods *****
    // *******************************

    // *****************************
    // ***** Start: Supervisor *****
    $.fn[pluginName] = function( method ) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || !method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );
        }
    };
    // ***** Fin: Supervisor *****
    // ***************************
})( jQuery );