インスタンス内のマルチオブジェクトオブジェクトキャッシュを隠すクリーナーの方法

Question

私は現在JavaScriptを学習しています。私はここ数日、いくつかの本を読んできましたが、私は以下のことについて助けたいと思います。

たとえば、Labelという名前のクラスがあるとします。そのコンストラクタは、一部の翻訳を含むdataオブジェクトを受け入れます。私は、これらの翻訳をLabelインスタンスの中で「隠す」ようにして、textプロパティを残りのプログラムに公開します。

一つの解決策は、_activeで参照翻訳、および翻訳を切り替えるsetLang()方法を返すゲッターメソッドactive()、_translationsからの翻訳を参照_active特性を有することになります。しかしそれは、ラベルインスタンスのactiveを常にlabel.active.textのようなテキストにするよう強制します。

（私はそれはプライベートではありませんので、_translationsオブジェクトが実際に隠されていないことを承知している。Labelクラスはあまり意味がないかもしれないが、それは私が思いついた簡単な例ですが、_translationsオブジェクトは翻訳の私たちのためにキャッシュすることもAPI呼び出しを介して取得します）

確実に、ラベルのactiveメソッド呼び出しを避けるために、このようなものを実装するクリーナーの方法が必要です。何か案は？

私はget text(){ return this._active.text }を持つことができましたが、翻訳オブジェクトに多くのプロパティがあった場合はどうなりますか？

ありがとうございます！プロキシを使用するには、@ Bergiの提案後

const data = { 
 
    // these objects could possibly have more properties 
 
    en: {text: 'Text in english.'}, 
 
    zh: {text: "Let's imagine this one is in chinese."} 
 
}; 
 

 
class Label { 
 
    constructor(data) { 
 
     this._translations = {}; 
 
     for (let lang in data) 
 
      this._translations[lang] = data[lang]; 
 
     this._active = this._translations.en; 
 
    } 
 

 
    get active() { 
 
     return this._active; 
 
    } 
 

 
    // switch between translations 
 
    // may be used to get translations from an API endpoint 
 
    // if the translation exists, read from _translations cache 
 
    // if not, fetch from server (not implemented) 
 
    setLang(value) { 
 
     return (this._translations[value] && 
 
      (this._active = this._translations[value])) !== undefined; 
 
    } 
 
} 
 

 
let label = new Label(data); 
 
console.log(label.active.text); 
 

 
label.setLang('zh'); 
 
console.log(label.active.text); 
 

 
// I'd like to simply call label.text to return the text

Answer 1

、私は私の問題を解決し、次のを思い付きました。それは、プロキシを使用するパフォーマンスのコストが付属していますが、それは私が必要なもののために十分です。

const data = { 
 
    en: { 
 
    text: 'Text in english.', 
 
    color: 'red' 
 
    }, 
 
    zh: { 
 
    text: "Let's imagine this one is in chinese.", 
 
    color: 'red in chinese' 
 
    } 
 
}; 
 

 
class Label { 
 
    constructor(data) { 
 
    this._translations = {}; 
 
    for (let lang in data) 
 
     this._translations[lang] = data[lang]; 
 
    this._active = this._translations.en; 
 
    
 
    // the 'new' operator passes an emtpy {} to the constructor 
 
    // the constructor returns that object in the end 
 
    // the 'this' now is said object (a 'Label') 
 
    
 
    // then we wrap that object with a prox 
 
    // that proxy redirects all calls to the active label 
 
    return new Proxy(this, { 
 
     get: function(target, name) { 
 
     if (name in target['_active']) 
 
      return target['_active'][name]; 
 
     return target[name]; 
 
     } 
 
    }); 
 
    } 
 

 
    get active() { 
 
    return this._active; 
 
    } 
 

 
    hi() { 
 
    console.log(this); 
 
    } 
 

 
    setLang(value) { 
 
    return (this._translations[value] && 
 
     (this._active = this._translations[value])) !== undefined; 
 
    } 
 
} 
 

 
window.label = new Label(data); 
 
console.log(label); 
 
console.log(label.text); 
 
label.setLang('zh'); 
 
console.log(label.text);