Question

我使用与此类似的jQuery代码实现了一个类（我称之为RowsEditor）及其子类（我称之为DateRowsEditor）：

function create_RowsEditor(tableId) {
  var rowsEditor = {
    tableId: tableId,
    quit_row: function(ctl) { /*...*/ }
  };
  $('#'+tableId).click(function(event) {
    var tr = event.delegateTarget;
    rowsEditor.quit_row(tr);
  });
  return rowsEditor;
}

function create_DateRowsEditor(tableId) {
  var rowsEditor = $.extend({}, create_RowsEditor(tableId), {
    quit_row: function(ctl) { /*...*/ }
  };
  return rowsEditor;
}

然后我创建一个DateRowsEditor（）类型的对象：

var rowsEditor = create_DateRowsEditor('come'):

问题在于，在用户点击时，调用quit_row（）时，create_RowsEditor（）创建的对象不是使用create_DateRowsEditor（）创建的派生对象。

如何以结构化和面向对象的方式正确地完成它？

Answer 1

我通过添加.init（）方法解决了这个问题：

var rowsEditor = {
  tableId: tableId,
  init: function() {
    var self = this;
    $('#'+tableId).handleRowsBlur(function(event) {
      var tr = event.delegateTarget;
      self.quit_row(tr);
    });
    return this;
  },
  ...

并创建这样的对象：

/*var rowsEditor =*/ create_ComeEditor('come').init();

这是解决我的问题的正确方法，因为这样只有在应该调用事件处理程序时才会调用它。

Answer 2

问题在于，在用户点击时，不会使用派生对象
调用quit_row（）

然后不要使用extend。只需创建对象，并覆盖其quit_row方法：

function create_DateRowsEditor(tableId) {
  var rowsEditor = create_RowsEditor(tableId);
  rowsEditor.quit_row = function(ctl) { /*...*/ };
  return rowsEditor;
}

jQuery JavaScript子类化和属性

2 个答案: