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
        } 

    }

}]);

问题：

您如何在Javascript中实现这一目标？我不确定在Javascript中实现多态性的最佳实践。我习惯于使用接口并通过使用依赖注入和传入符合相同接口的对象来处理上述情况，并从控制器调用常用方法。通常是其他一些＆＃34; class＆＃34;将负责选择要实例化和传入的对象，从而使控制器不再了解具体细节，以及如何完成＆＃34;。
如何在AngularJS中执行此操作？ 模式通常看起来如何？你能给一本教科书＆＃34;实现多态的角度方式？

Answer 1

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

如果我们谈论ES5，那么多态性＆amp;继承可以通过原型实现。

例如：

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;
    });
  }


});

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

1 个答案: