JSONで複雑なオブジェクトアーキテクチャをパックして展開する

Question

私はHTML 5の新しいローカルストレージを検討してきました。私はJSONを使用してオブジェクトを文字列にシリアル化し、それらをオブジェクトに戻して解析することにしました。しかし、それは簡単ではありません。私はあなたがただJSON.stringify()オブジェクトを持っていて、それがあなたのためにうまくいくと期待できないことを発見しましたが、代わりに何をしなければならないか分かりません。

私のオブジェクトには2つの配列があり、それぞれに別のタイプのオブジェクトを保持し、そのうちの1つは多次元です。ここに私のかなり複雑で相互依存オブジェクトのアーキテクチャは次のようになります。

function Vector2(x, y) { 
    this.x = x; 
    this.y = y; 
} 

function Bar(ID, position) { 
    this.id = id; 
    this.position = position; 
} 

function Goo(state, position) { 
    this.on = state; 
    this.position = position; 
} 

function Foo(name, size) { 
    this.name = name; 
    this.size = size; 
    this.bars = new Array(width) 
    this.goos = new Array(10); 

    this.Initialize(); 
} 

Foo.prototype.Initialize() { 
    for(var x = 0;x<this.size.x;x++) { 
      this.bars[x] = new Array(this.size.y); 

     for(var y=0;y<this.size.y;y++) { 
      this.bars[x][y] = new Bar(x + y, new Vector2(x, y)); 
     } 
    } 

    for(var i = 0;i<this.goos.length;i++) { 
     this.goos[i] = new Goo(on, new Vector2(i, i/2 + 1)); 
    } 
} 

これらのオブジェクトのそれぞれは、それぞれが、私はFooのにメソッドを追加するために使用したのと同じプロトタイプメソッドを使用して追加、同様の付加機能がたくさんあります。私が言ったように、複雑。私の質問は、どのように私はこれをすべてシリアル化するのですか？私は実際にすべてのオブジェクトにtoJSON()の機能をつける必要がありますか？

最後に、これをすべてパックしてlocalstorageに保存したら、それを取得する方法はわかっていますが、JSONでアンパックする方法はほとんど分かりません。それは別の問題ですが、私は一度すべてを詰める方法を学ぶと、自分で理解するのが少し楽になるかもしれないと思います。

注：私は通常このような潜在的な広範な質問はしませんが、私は実際には、または実際に問題を解決する私の（確かに弱い）Google-fuで何もここで見つけることができませんでした。どのようにこの質問をさらに破るか。

Answer 1

通常、あなただけの

...など、通常の直列化は、複数の差分物事全てが同じオブジェクトへの参照を持って処理しないため、循環参照を扱うことができないJavaScriptで複雑なデータ構造をシリアル化していません

私が代わりにお勧めするのは、アプリケーションの実際の状態が何であるかを把握することです。インスタンス化されたオブジェクト構造全体ではありませんが、データの状態を再構築するために実際に必要とされる情報の最小量は何ですか。次に、データ（実際のオブジェクトではない）のみを作成したら、データ構造からデータを取得するための関数やメソッドを作成したり、データから新しいデータ構造を作成したりすることができます。

コードを見ると、Fooオブジェクトの実際の状態は、Barオブジェクトの二次元アレイとGooオブジェクトとnameとsizeの一次元アレイです。 Barは、x,yおよびidをちょうど有する。グーは、stateとxとyをちょうど持っています。それは生成するFooメソッドと保存されたストレージからその状態を受け入れるFooメソッドを書くのは非常に簡単な状態です。

Answer 2

JSONとfromJSON関数をタッキングするのはおそらく正しい方法です。特定のオブジェクトの実際の一意のデータをJSONとして保存する必要があるだけですが、いくつかの大きな理由でインスタンス化されたオブジェクト全体をシリアル化することはお勧めできません。また、近い将来にオブジェクトのいずれかの関数を追加または変更する場合を考えてみましょう。つまり、独自のシリアル化されたオブジェクトを保存していたクライアントは更新を取得しません。一意のインスタンスデータを格納するだけで、そのデータを実際のオブジェクトに変換する機能（最新の定義を使用して）を持つことは、方法です。あなたは、文字列に関数をパックすることができます

Answer 3

：

var a = function() {return "a"}; 
a.toString() 

// And also: 

function b() {return "b"}; 
b.toString(); 

だから、そこからあなたには、（ダグラス・クロックフォードで）JSONソースをハックし、機能のサポートを含めることができます。か何か。

Answer 4

私はここで遅すぎることはないと思うが、私は同じ問題に直面した。

私は、（JQuery AJAX呼び出しから返された）約束オブジェクトをローカルストレージに永続化したかったのです。

幸運にも私はStash（http://rezitech.github.io/stash/）という小さなJavascriptライブラリを見つけました。複雑なJavascriptオブジェクトのStringへのシリアライズとJavascriptオブジェクトへのStringの解析を可能にします。

ローカルストレージとの間でオブジェクトを永続化/取得するときにデータ型が自動的に認識され変換されるため、シリアル化/解析を明示的に実行する必要はありません。ここで

は

// the api endpoint 

var url = "www.api-host.com/api/bla/blub"; 

// create json call returning promise object 

var promise = $.getJSON(url); 

// persist promise object in local storage using dash.js 

var key = url; 

stash.set(key, promise); 

// retrieve promise object from local storage 

var stashGet = stash.get(key); 

// display in console 

console.log(stashGet); 

よろしく、マティアス