javascript - 在 Angular 服务中扩展基类

Question

我有一个基类，我想在服务中扩展它以帮助将数据获取到 Angular 范围内。我在网上搜索了一种解决方案，但没有找到我喜欢的解决方案。我有一个用于访问设备文件系统的基类

类结构:

var cOfflineStorageBase = Class.extend({
   init: function(){
   },
   CreateFolderDir: function(){
   },
   DeleteAll: function(){
   },
   DeleteDirectories: function(){
   },
   DeleteItem: function(){
   },
   GetFiles: function(){
   },
   FileExists: function(){
   }, 
   GetPath: function(){
   },
   GetObject: function(){
   },
   SaveObject: function(){
   },   
});

我希望能够在几个不同的 Angular 服务(即 offlineCart、offlineCustomLists 等)中扩展此类，其中每个服务都能够使用存储库来存储各种不同的数据类型。我正在寻找最好、最合适的方式来做到这一点。在 vanilla JavaScript 中，人们会做这样的事情:

var newClass = cOfflineStorageBase.extend({
   //add new stuff here
});

但我想以 Angular 方式做同样的事情。

我一直在考虑的方法是使用 angular.extend 功能，但我不确定这是否合适，或者像这样的方法是否更合适:

app.factory('someChild', ['$http' , 'cOfflineStorageBase', 
            function($http, cOfflineStorageBase){
  var SomeClass = cOfflineStorageBase.extend({
     init: function(){
        this._super.init()
     },
     //Add more stuff here
  });
  return SomeClass;
}]);

如果这些方法是正确的，或者是否有其他方法更适合我想要完成的目标，我想要一些建议。我还希望或更愿意在大部分代码中使用 promises，因为它是异步的。

Answer 1

我最近完成了这个技巧。

我将从定义普通 JavaScript 构造函数开始。这不需要是 Angular 服务。我所做的是，稍后，扩展构造函数可以通过参数传递任何必要的注入(inject)。所以，这将是我的 Angular 服务的基“类”。这是我要公开任何我希望所有 Angular 服务继承的地方。

function ParentService($http) {
   this.$http = $http;
}

ParentService.prototype.foo = function () {
    alert("Hello World");
};

然后我将继续使用原型(prototype)继承定义子构造函数。这个构造函数确实是一个 Angular 服务(你可以通过我在最后使用 $inject 来判断)。

function ChildService($http) {
    Parent.call(this, $http);
}

ChildService.prototype = new ParentService();
ChildService.prototype.baz = function() {
   return this.$http.get('/sample/rest/call');
}
ChildService.$inject = ['$http'];

然后我将继续在相应的 Angular 模块中注册单点服务:

var app = angular.module('SampleApp', []);
app.service('child', ChildService);

最后，在我的 Controller 中，我将简单地注入(inject)我的服务，这将是我的 ChildService 构造函数的一个实例，它又扩展了我的 ParentService 构造函数:

app.controller('MainCtrl', ['$scope', 'child', function ($scope, child) {
    child.foo(); //alert("Hello World")
    var promise = child.bar();
}]);

你可以看到一个JSFiddle here

Youtube 上还有一个来自 ngConf 的有趣视频，名为 Writing A Massive Angular App其中涵盖了其中一些主题以及一些关于 angular 代码可重用性的其他想法。