javascript - 从 JSON 重构 JS 对象

Question

不要这样做

这个问题有一些评论对重建对象的概念持低估态度。评论者无法或不愿解释他们认为这是个坏主意的原因，但自从问过之后我得出了同样的结论。原因如下。

如果您考虑 MVVM，拥有模型和 View 模型的目的是将行为与数据分开。这有点有趣，因为面向对象的要点就是将它们结合起来。但在分布式世界中，数据必须四处传输。如果您的代码和数据全部混在一起，那么您必须发明 MVVM 或继续解构和重构对象。

分解和重建对象的代码是您不需要的测试和维护时间槽，并引入了两种故障模式。不要这样做。有一个无方法类来保存状态和一个在无方法类上运行的无状态类。这就是 MVVM 的本质，实际上只不过是 Memento 模式的应用。

Memento (283) Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later.

Design Patterns, Gamma et al, 1995

---

原始问题

我的 View 模型的数据以 JSON 格式在客户端 JS 和服务器 Web API 之间来回传递。

众所周知，JSON.stringify(object) 仅序列化具有非 null 值且不是 Function 的成员。因此，JSON.parse(JSON.stringify(someObject)) 将从对象中删除所有方法。

我当前的实现是将每个图节点实现为具有序列化和反序列化方法的 Typescript 类。 JQuery.ajax 调用 Web API 并将生成的 JSON 隐式解析为对象定义的 DAG，每个对象定义都有一个 Type 属性，指示它在序列化之前是哪种类型的类。我有一个按名称索引的构造函数映射，检索适当的构造函数并将数据作为构造函数参数传递。

根据类型可能有 child ；如果是这样，事情将递归地向下进行。

我一直在想，除了复制所有属性值，我是否不能只分配一个合适的原型(prototype)。把山带给穆罕默德，你可能会说。这将消除我的代码库中的相当多的困惑。

在我写的时候，我突然想到我可以使用 $.extend，但是我正在逐步从我的代码库中剔除 jQuery ，所以这将是倒退的一步。

• 我欺骗原型(prototype)的提议是否存在任何已知的危险？
• 有没有人有更好的主意？除了 $.extend，我是说。优先使用 TypeScripty。

在评论中观察到，分配原型(prototype)意味着永远不会调用构造函数。这无关紧要。对象状态已经设置，所需要的只是使方法可用。

Answer 1

我最近使用可以序列化然后重构内容的方法构建对象。

我只是添加了一个参数，它可以接受一个 JSON 对象并将其分配给自己。

使用普通对象的例子:

function myObject() {
  this.valueA = 1;
  this.valueB = 2;
  this.valueC = 3;

  this.add = function() {
    return this.valueA + this.valueB + this.valueC;
  };
}

var o = new myObject();
console.log(o.add());
console.log(JSON.stringify(o));

如果你序列化这个你会得到:

{"valueA":1,"valueB":2,"valueC":3}

现在，要重构它，您可以像这样向对象添加一个 Object.assign()，获取参数并将其与 self 合并:

function myObject(json) {
  this.valueA = 0;
  this.valueB = 0;
  this.valueC = 0;

  this.add = function() {
    return this.value1 + this.value2 + this.value3;
  };

  Object.assign(this, json); // will merge argument with itself
}

如果我们现在将解析后的 JSON 对象作为参数传递，它将自身与重新创建您所拥有的对象合并:

var json = JSON.parse('{"valueA":1,"valueB":2,"valueC":3}')

function myObject(json) {
  this.valueA = 0;
  this.valueB = 0;
  this.valueC = 0;

  this.add = function() {
    return this.valueA + this.valueB + this.valueC;
  };

  Object.assign(this, json); // will merge argument with itself
}

var o = new myObject(json);  // reconstruct using original data
console.log(o.add());

如果您现在通过数组拥有 child ，您只需沿着链向下递归地重复该过程。

(一个好处是您也可以通过这种方式传递选项)。