Question

这些代码来自http://eloquentjavascript.net/06_object.html 我的问题是＆＃34;界面如何工作？＆＃34;例如，为什么在第一部分我们使用了cell.minHeight（），而不仅仅是cell？为什么我们需要.minHeight（）以及它以后如何工作？作者没有解释接口是如何工作的：（

＆＃13;

function rowHeights(rows) {
  return rows.map(function(row) {
    return row.reduce(function(max, cell) {
      return Math.max(max, cell.minHeight());
    }, 0);
  });
}

function colWidths(rows) {
  return rows[0].map(function(_, i) {
    return rows.reduce(function(max, row) {
      return Math.max(max, row[i].minWidth());
    }, 0);
  });
}

＆＃13;

此外，我看到它收到的绘图（宽度，高度）和参数，但我不明白执行了哪些代码？

＆＃13;

function drawTable(rows) {
  var heights = rowHeights(rows);
  var widths = colWidths(rows);

  function drawLine(blocks, lineNo) {
    return blocks.map(function(block) {
      return block[lineNo];
    }).join(" ");
  }

  function drawRow(row, rowNum) {
    var blocks = row.map(function(cell, colNum) {
      return cell.draw(widths[colNum], heights[rowNum]);
    });
    return blocks[0].map(function(_, lineNo) {
      return drawLine(blocks, lineNo);
    }).join("\n");
  }

  return rows.map(drawRow).join("\n");
}

＆＃13;

上面的广告minHeight（）和minWidth（）之间是否有连接并在此段代码中引用？

＆＃13;

function UnderlinedCell(inner) {
  this.inner = inner;
};
UnderlinedCell.prototype.minWidth = function() {
  return this.inner.minWidth();
};
UnderlinedCell.prototype.minHeight = function() {
  return this.inner.minHeight() + 1;
};
UnderlinedCell.prototype.draw = function(width, height) {
  return this.inner.draw(width, height - 1)
    .concat([repeat("-", width)]);
};

＆＃13;

简单示例：

＆＃13;

davey = {
    name: "Davey"
}

john = {
    name: "John"
}

say = function(){
        alert("Hello, I'm " + this.name)
}

davey.sayHi = say
john.sayHi = say

davey.sayHi() // =>  Hello, I'm Davey
john.sayHi() // =>  Hello, I'm Jhon

＆＃13;

这意味着，某个地方我们应该有minHeight（）函数。但是，正如我所理解的那样界面起作用，我不明白如何。

Answer 1

界面如何运作？

interface是一种惯例。这个约定规定了一种对象应该是什么样子，包括它应该具有什么样的方法，这些方法应该具有什么样的签名以及它们应该做什么。

JavaScript没有接口作为语言元素（例如Java），它们是纯粹的约定。在您的情况下，单元格对象的约定仅在文本中定义：

这是界面：


minHeight()返回一个数字，表示此单元格所需的最小高度（以行为单位）。

minWidth()返回一个数字，表示此单元格的最小宽度（以字符为单位）。

draw(width, height)返回一个长度为length的数组，其中包含一系列宽度字符宽的字符串。这个   表示单元格的内容。

正如作者所解释的那样：

布局程序将通过a与单元对象进行通信定义明确的界面。那样，程序的细胞类型支持不是事先修复的。我们可以稍后添加新的单元格样式例如，表格标题的下划线单元格 - 如果它们支持我们的界面，他们将只是工作，而不需要改变布局计划。

因此，您的drawTable函数需要获取此类单元对象的数组数组。那么让我们玩游戏：细胞还是无细胞？

{}

空对象，没有方法：没有单元格！

{ minHeight: function() { return 3; },
  minWidth: function() { return 3; } }

没有draw方法：没有单元格！

new TextCell("Hi")

继承TextCell.prototye的方法，这些方法按预期执行：cell

{ minHeight: function() { return 3; },
  minWidth: function() { return 3; },
  draw: function() { return []; } }

draw方法不会使用width和height参数，并且始终返回一个空数组：无单元格。

new RTextCell("Hi")

继承RTextCell.prototye和TextCell.prototye的方法，这些方法按预期执行：cell

{ minHeight: function() { return 3; },
  minWidth: function() { return 3; },
  draw: function(w, h) { 
      var t = new Array(w-1).join("-");
      return return [","+t+"."].concat(new TextCell("").draw(w-2, h-2).map(function(l) {
          return "|"+l+"|";
      }), ["`"+t+"´"]);
  } }

需要方法，而且行为符合预期：cell！

界面如何在JavaScript中运行？

1 个答案: