用于存储网格数据的javascript对象

javascript object for storing grid data

本文关键字：javascript 对象 数据 存储 网格 用于      更新时间：2023-09-26

我正在尝试存储一些网格数据（单元格大小和坐标）以供绘制。

我是纯js的新手，所以我遇到了一些困难。

现在我这样计算：

  var W = document.width;
  var H = document.height;
  var w = [80, null, 80, 100];
  w[1] = W - w[0] - w[2] - w[3];
  var x = [0, w[0], w[0] + w[1], w[0] + w[1] + w[2], w[0] + w[1] + w[2] + w[3]];
  var h = [null, 20, 100];
  h[0] = H - w[1] - w[2];
  var y = [0, h[0], h[0] + h[1]];

但这太难看了。

我想将数据存储到一些对象中，并访问如下字段：

var grid = new Grid ([80, null, 80, 100], [null, 20, 100]);
// 'null' means that value shall be recalculated on window resized
var x1 = grid.x[1];
var w1 = grid.w[1];
// etc ..
// plus, somewhere inside Grid: window.addEventListener('resize', .... )

我想这个问题已经解决了很多次（但我找不到），我不想"发明自行车"。

你能提出解决方案吗。。或者可以链接到相应的文章？

首先：你的英语很好。这个问题很容易理解。

现在，对于实际的问题：看起来你想要一个类。JavaScript类很有趣。有很多关于如何用JavaScript编写类的文档。特别是，我建议你看看这里，这里（不是严格意义上的类，但仍然有很多好的信息），还有这里（无耻的自我插件）。

在你的课堂上，你可以使用Object.defineProperty来做一些事情，比如：

Object.defineProperty(Grid.prototype, 'x', {
    'get': function() {
        /* do some calculations */
        return value;
    }
};
// later on
var x = myGrid.x;

或者，您可以使用沼泽标准功能：

Grid.prototype.x = function() {
    /* do some calculations */
    return value;
}
// later on
var x = myGrid.x();

就调整大小而言，将事件侦听器附加到resize事件肯定是正确的。我建议使用jQuery；从长远来看会有帮助的。你的代码看起来像：

$(window).on('resize', function(event) {
    /* loop over values */
    /* if value is null, recalculate */
});
相关文章：