AngularJS如何实现多态/依赖注入（最佳实践）

Question

这是一个与设计模式相关的问题。我不是在寻找如何实现以下目标的答案，而是寻找最广泛接受的在服务中实现多态性的方法。

假设我有一个名为 getData 的服务。它需要获取一些数据，无论是来自数据库、文本文件还是硬编码的东西，并根据控制器中 $scope 上的设置进行输出。在下面的示例中，假设 getData 依赖于 dataSource。

angular.module('testApp').controller('testController'), [$scope, myAwesomeService, function ($scope, myAwesomeService){
    $scope.dataSource = 'database'; //defines the source of the data

    $scope.getData = function() {
        //use myAwesomeService, get the data and output

        if($scope.dataSource ==='database') {
             return //do it the first way
        }            

        else if($scope.dataSource ==='text') {
             return //do it the second way
        } 

        else if($scope.dataSource ==='csvfile') {
             return //do it the third way
        } 
        else if($scope.dataSource ==='form') {
             return //do it the fourth way
        } 

    }

}]);

问题：

1. 您通常如何在 Javascript 中实现这一点？我不确定在 Javascript 中实现多态性的最佳实践。我习惯于使用接口并通过使用依赖注入并传入遵循相同接口的对象并从控制器调用通用方法来处理上述情况。通常，其他一些“类”会负责选择要实例化和传入的对象，因此控制器对“如何完成”的具体细节是不可知的。

2. 如何在 AngularJS 中做到这一点？ 该模式通常看起来如何？你能给出一个实现多态的“教科书”Angular 方法吗？

Answer 1

我想发表评论，但我意识到它可能太长了，所以我将发布一个答案。

如果我们谈论ES5，多态性和继承可以通过原型设计来实现。

例如：

function Auto(name,year){
   this.year=year;
   this.name=name;
}
Auto.prototype.showYear = function(){
   console.log(this.year);
}

function Car(name,year, model){
   Auto.call(this,name,year);
   this.model=model;
}
Car.prototype = Object.create(Auto.prototype);

//usage
var car = new Car('BMW',2015,'320d');
car.showYear(); // will output 2015

在ES6 中，这可以使用class 函数来完成。您可以阅读更多关于此的信息，HERE（这会非常好：D）

您会在下面找到一些可以回答您的问题的代码。希望这是您正在寻找的：

function BaseService(){
    this.dataSource='database';
}
BaseService.prototype.getData = function(){
    console.log('base: get data');
}


function TextService(){
    this.dataSource='text';
}
TextService.prototype  = new BaseService();
TextService.prototype.getData = function(){
    console.log('child text: get data');
}



function CsvService(){
    this.dataSource='csv';
}
CsvService.prototype  = new BaseService();
CsvService.prototype.getData = function(){
    console.log('child csv: get data');
}


function FormService(){
    this.dataSource='form';
}
FormService.prototype  = new BaseService();
FormService.prototype.getData = function(){
    console.log('child form: get data');
}



angular.module('myApp').factory('awesomeService', function(){

    var service={};

    service.getData = function(dataSource){

        var sourceService;

        if(dataSource='database'){
             sourceService= new BaseService();
        }

        if(dataSource=='text'){
            sourceService=new TextService();
        }

        if(dataSource=='csv'){
           sourceService = new CsvService();
        }

        if(dataSource=='form'){
          sourceService= new FormService();
        }

        return sourceService.getData(); // i'm going to assume getData returns a promise
   }

   return service;

});

angular.module('myApp').controller('myController', function($scope,awesomeService){
  var myDataSource='database';

  $scope.getData = function(){
    awesomeService.getData(myDataSource).then(function(data){
         $scope.result=data;
    });
  }


});