OOクラスのように動作する角度サービスを作成します

Question

"ウィジェット"に答えるネットワークサービスがあり、それぞれに別々にフェッチする必要があるより単純なオブジェクト「部品」が多数あります。私はこれをウィジェットとその一部の部品を取り出し、localStorageで結果をキャッシュする角度サービスとして公開したいと思いますが、私は問題に遭遇しています（コードに記されています、以下に記載します）...

angular.module('myApp').service('myWidgetService', function ($q, requestService, localStorageService, _) { 

    // start everything off by fetching the Widgets, saving locally 
    this.refresh = function() { 
     var self = this; 
     return requestService.request('GET', '/api/widget/', true).then(function(result) { 
      self.setCloudArray(result); 
      // I want callers to use "Widget instances" defined below 
      return _.map(result, function(cloudItem) { return new Widget(cloudItem); }); 
     }); 
    }; 

    // get and set persistent widget array 
    this.cloudArray = function() { 
     return localStorageService.get('cloudArray'); 
    }; 

    this.setCloudArray = function(cloudArray) { 
     localStorageService.set('cloudArray', cloudArray); 
    }; 

    // I want this "Widget instance" to provide methods related to a single widget 
    var Widget = function(cloudItem) { 
     this.cloudItem = cloudItem; // PROBLEM A: (this indirection hurts me later) 
    }; 

    // get the parts, but only if they haven't been fetched already 
    // if they've been fetched, return the cached copy 
    Widget.prototype.parts = function() { 
     var self = this.cloudItem; // weirdness due to PROBLEM A 
     if (self.parts) { return $q.when(self.parts); } 
     var route = '/api/widget/' + self._id + '/parts'; 
     return requestService.request('GET', route, true).then(function(result) { 
      self.parts = result; // PROBLEM B: how to persist? 
      return result; 
     }); 
    }; 

    Widget.prototype.partWithId = function(id) { 
     return _.find(this.cloudItem.parts, function(part) { return part._id === id; }); 
    }; 

}); 

私が持っている2つの問題は、コードにフラグが立てられています。

問題A：私は本当に私のウィジェットにcloudItemプロパティを追加したくありません。ウィジェットメソッドでは、オブジェクトのfooプロパティのためにthis.fooのようなものを言いたいと思いますが、私はthis.cloudItem.fooと言っています。

問題B：大きな問題は、ウィジェットの部品の呼び出しが高価で、結果をキャッシュしたいということです。しかし、ローカルストレージが知っていることは、私のインスタンス "cloudItem"がメンバーであるオブジェクトの配列です。私は私のウィジェットオブジェクトからその保存を行うエレガントな方法を知らない。私は部品を取り出した後、呼び出し

this.saveWidget = function(updatedWidget) { 
    var cloudArray = this.cloudArray(); 
    var currentItem = _.find(cloudArray, function(i) { return i._id === updatedWidget._id; }); 
    var index = cloudArray.indexOf(currentItem); 
    cloudArray[index] = updatedWidget; 
    this.setCloudArray(cloudArray); 
}; 

：

私はこのようなクラスレベルで洗練メソッドは、ローカルストレージを更新するために書かれました。これはうまくいきますが、私はJSやWeb開発にあまり経験はありませんが、私は自分自身を穴に掘り下げていることを知っています。私はサービスとJSオブジェクトについてたくさんのことを読んだことがありますが、私は何か重要なものを見逃しています。

私のWidgetオブジェクトで余分な間接を避け、ローカルストレージに自分自身を保存するために、より直接的、より多くの方法を与えるにはどうすればよいですか？

ご協力いただきありがとうございます。

Answer 1

私は私がこの問題を解決する助けた二つのことを学んだ：angular.extend()修正私の最初の問題....

var Widget = function(cloudItem) { 
    angular.extend(this, cloudItem); 
    // replaces 
    // this.cloudItem = cloudItem; // PROBLEM A: (this indirection hurts me later) 
}; 

拡張するためのおかげで（）（と「この」を返し隠された魔法を）、私はしません'cloudItem'属性が必要です。

私の2番目の問題は、オブジェクトレベルで状態を保存しようとして失われたことです。私は、節約がクラスレベルで行われるという事実を生きなければならないと思う。私は（@charlietflによって提案に感謝し、索引付きオブジェクトではなく配列を永続化）のものをメソッド保存オブジェクトレベルのビットを向上

// replaces the awkward: this.saveWidget = function(updatedWidget) I had before 
Widget.prototype.save = function() { 
    var cloudArray = localStorageService.get('cloudArray'); 
    // really a cloud object, thanks to suggestion by @charlietfl 
    cloudArray[this._id] = this; 
    localStorageService.set('cloudArray', cloudArray); 
}; 

少なくとも私は（保存ふりをすることができる）を行います私に感覚。インスタンス上のこのメソッドは、節約が実際にクラスレベルでうんざりしているという事実を隠す（醜い、イモ）。

Javascript is weird。