programing

각진서비스 대 공장

instargram 2023. 7. 1. 08:02
반응형

각진서비스 대 공장

angular.factory() angular를 모두 보았습니다.서비스를 선언하는 데 사용되는 service(). 그러나 찾을없습니다. angular.service공식 문서의 어느 곳이든.

두 가지 방법의 차이점은 무엇입니까?
무엇을 위해 사용해야 합니까(각자가 다른 작업을 수행한다고 가정할 때)?

  angular.service('myService', myServiceFunction);
  angular.factory('myFactory', myFactoryFunction);

이런 식으로 설명하기 전까지는 이 개념을 이해하는 데 어려움을 겪었습니다.

서비스: 작성하는 기능이 다음과 같이 새로 수정됩니다.

  myInjectedService  <----  new myServiceFunction()

Factory: 작성한 함수(생성자)가 호출됩니다.

  myInjectedFactory  <---  myFactoryFunction()

그걸로 뭘 할지는 당신에게 달렸어요 하지만 몇 가지 유용한 패턴들이 있어요

공개 API를 노출하는 서비스 함수 작성과 같은 경우:

function myServiceFunction() {
  this.awesomeApi = function(optional) {
    // calculate some stuff
    return awesomeListOfValues;
  }
}
---------------------------------------------------------------------------------
// Injected in your controller
$scope.awesome = myInjectedService.awesomeApi();

또는 공장 기능을 사용하여 공개 API 노출:

function myFactoryFunction() {
  var aPrivateVariable = "yay";

  function hello() {
    return "hello mars " + aPrivateVariable;
  }
  
  // expose a public API
  return {
    hello: hello
  };
}
---------------------------------------------------------------------------------
// Injected in your controller
$scope.hello = myInjectedFactory.hello();

또는 공장 기능을 사용하여 생성자 반환:

function myFactoryFunction() {
    return function() {
        var a = 2;
        this.a2 = function() {
            return a*2;
        };
    };
}
---------------------------------------------------------------------------------
// Injected in your controller
var myShinyNewObject = new myInjectedFactory();
$scope.four = myShinyNewObject.a2();

어떤 걸 쓸까요?

두 가지 모두에서 동일한 작업을 수행할 수 있습니다.그러나 경우에 따라 공장에서 더 간단한 구문으로 주입식 파일을 만들 수 있는 약간의 유연성을 제공합니다.이는 myInjectedService가 항상 개체여야 하지만 myInjectedFactory는 개체, 함수 참조 또는 모든 값이 될 수 있기 때문입니다.예를 들어, 생성자를 생성하기 위해 서비스를 작성한 경우(위의 마지막 예제에서처럼), 생성자는 다음과 같이 인스턴스화되어야 합니다.

var myShinyNewObject = new myInjectedService.myFunction()

이것보다 덜 바람직한 것은 분명합니다.

var myShinyNewObject = new myInjectedFactory();

그러나 컨트롤러의 새로운 개체는 테스트를 위해 모의 실행하기 어려운 종속성을 만들기 때문에 이러한 유형의 패턴을 사용하는 것은 우선 신중해야 합니다.사용하는 것보다 서비스에서 개체 모음을 관리하도록 하는 것이 더 좋습니다.new()교활한.)


한 가지 더, 그들은 모두 싱글턴입니다.

또한 두 경우 모두 각도가 1톤을 관리하는 데 도움이 된다는 것을 명심하십시오.서비스 또는 기능을 어디에 또는 몇 번 주입하든 동일한 개체 또는 기능에 대한 동일한 참조를 얻을 수 있습니다.(공장에서 숫자 또는 문자열과 같은 값을 단순히 반환하는 경우는 제외).이 경우 항상 동일한 값을 얻을 수 있지만 참조는 얻을 수 없습니다.)

간단히 말해서..

const user = {
  firstName: 'john'
};

// Factory
const addLastNameFactory = (user, lastName) => ({
  ...user,
  lastName,
});

console.log(addLastNameFactory(user, 'doe'));

// Service
const addLastNameService = (user, lastName) => {
  user.lastName = lastName; // BAD! Mutation
  return user;
};

console.log(addLastNameService(user, 'doe'));

주요 차이점은 다음과 같습니다.

서비스

구문:module.service( 'serviceName', function );

결과: serviceName을 주입 가능 인수로 선언하면 전달된 함수의 인스턴스가 제공됩니다.module.service.

용도: 간단히 추가하여 호출하는 데 유용한 유틸리티 기능을 공유하는 데 유용할 수 있습니다.( )삽입된 함수 참조에 대해 설명합니다.를 사용하여 실행할 수도 있습니다.injectedArg.call( this )또는 그와 유사합니다.

공장

구문:module.factory( 'factoryName', function );

결과: factoryName을 주입 가능 인수로 선언하면 전달된 함수 참조를 호출하여 반환되는 값이 제공됩니다.module.factory.

용도: 인스턴스를 만들기 위해 새로 작성할 수 있는 '클래스' 함수를 반환하는 데 유용할 수 있습니다.

다음은 서비스와 공장을 사용하는 예입니다.Angular에 대해 자세히 알아보기JS 서비스공장.

Angular(각도)도 확인할 수도 있습니다.JS 문서 및 스택 오버플로에 대한 유사한 질문이 서비스공장에 대해 혼동되었습니다.

TL;DR

팩토리를 사용하는 경우 개체를 만들고 속성을 추가한 다음 동일한 개체를 반환합니다.이 공장을 컨트롤러로 전달하면 이제 공장을 통해 해당 컨트롤러에서 개체의 속성을 사용할 수 있습니다.

app.controller('myFactoryCtrl', function($scope, myFactory){
  $scope.artist = myFactory.getArtist();
});

app.factory('myFactory', function(){
  var _artist = 'Shakira';
  var service = {};

  service.getArtist = function(){
    return _artist;
  }

  return service;
});


서비스를 사용할 때 Angular는 'new' 키워드를 사용하여 백그라운드에서 인스턴스화합니다.따라서 'this'에 속성을 추가하면 서비스에서 'this'를 반환합니다.서비스를 컨트롤러에 전달하면 이제 서비스를 통해 컨트롤러에서 '이것'의 속성을 사용할 수 있습니다.

app.controller('myServiceCtrl', function($scope, myService){
  $scope.artist = myService.getArtist();
});

app.service('myService', function(){
  var _artist = 'Nelly';
  this.getArtist = function(){
    return _artist;
  }
});



비 TL;DR


서비스를 만들고 구성하는 가장 일반적인 방법은 공장입니다.TL;DR이 말한 것 이상은 아닙니다.개체를 만들고 속성을 추가한 다음 동일한 개체를 반환합니다.그런 다음 공장을 컨트롤러에 전달하면 이제 공장을 통해 해당 컨트롤러에서 개체의 속성을 사용할 수 있습니다.더 광범위한 예는 아래와 같습니다.

app.factory('myFactory', function(){
  var service = {};
  return service;
});

이제 'myFactory'를 컨트롤러에 전달하면 'service'에 연결된 속성을 사용할 수 있습니다.

이제 콜백 기능에 몇 가지 '개인' 변수를 추가해 보겠습니다.컨트롤러에서 직접 액세스할 수는 없지만, 나중에 필요할 때 이러한 '개인' 변수를 변경할 수 있도록 '서비스'에 대한 몇 가지 getter/setter 방법을 설정할 것입니다.

app.factory('myFactory', function($http, $q){
  var service = {};
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
   _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK';
    return _finalUrl
  }

  return service;
});

여기에서는 이러한 변수/함수를 '서비스'에 추가하지 않습니다.단순히 나중에 사용하거나 수정하기 위해 작성하는 것입니다.

  • baseUrl은 iTunes API에 필요한 기본 URL입니다.
  • 우리가 찾고자 하는 아티스트는 바로 _facebook입니다.
  • _finalUrl은 우리가 iTunes에 전화를 걸 최종적이고 완전히 구축된 URL입니다. makeUrl은 우리의 iTunes 친화적인 URL을 만들고 반환하는 함수입니다.

도우미/개인 변수 및 기능이 준비되었으니 '서비스' 개체에 몇 가지 속성을 추가해 보겠습니다.'서비스'에 무엇을 추가하든 'myFactory'를 전달하는 컨트롤러에서 직접 사용할 수 있습니다.

우리는 setArtist를 만들고 단순히 아티스트를 반환하거나 설정하는 Artist 메소드를 얻을 것입니다.우리가 만든 URL로 아이튠즈 API를 호출하는 방법도 만들 예정입니다.이 방법은 아이튠즈 API에서 데이터가 돌아오면 이행할 약속을 반환합니다.Angular에서 약속을 사용해 본 경험이 많지 않다면, 저는 그것들에 대해 깊이 있는 다이빙을 하는 것을 강력히 추천합니다.

아래 세트에서 아티스트는 아티스트를 수락하고 아티스트를 설정할 수 있습니다.getArtist는 아티스트 callItunes가 $http 요청으로 사용할 URL을 구축하기 위해 makeUrl()을 먼저 호출합니다.그런 다음 약속 객체를 설정하고, 최종 URL로 $http 요청을 작성하며, $http가 약속을 반환하기 때문에 요청 후 .success 또는 .error를 호출할 수 있습니다.그런 다음 iTunes 데이터와의 약속을 해결하거나 '오류가 발생했습니다'라는 메시지와 함께 약속을 거부합니다.

app.factory('myFactory', function($http, $q){
  var service = {};
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  service.setArtist = function(artist){
    _artist = artist;
  }

  service.getArtist = function(){
    return _artist;
  }

  service.callItunes = function(){
    makeUrl();
    var deferred = $q.defer();
    $http({
      method: 'JSONP',
      url: _finalUrl
    }).success(function(data){
      deferred.resolve(data);
    }).error(function(){
      deferred.reject('There was an error')
    })
    return deferred.promise;
  }

  return service;
});

이제 우리 공장은 완성되었습니다.이제 모든 컨트롤러에 'myFactory'를 삽입할 수 있으며 서비스 개체에 연결된 메서드를 호출할 수 있습니다(예: 아티스트, 가져오기, Itunes).

app.controller('myFactoryCtrl', function($scope, myFactory){
  $scope.data = {};
  $scope.updateArtist = function(){
    myFactory.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myFactory.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }
});

위의 컨트롤러에서 'myFactory' 서비스를 주입하고 있습니다.그런 다음 'myFactory'의 데이터에서 오는 $scope 개체에 속성을 설정합니다.위의 유일한 까다로운 코드는 약속을 한 번도 다뤄본 적이 없는 경우입니다.callItunes와 하고 $할 수 .컨트롤러가 매우 '얇음'임을 알게 될 것입니다.모든 논리 및 영구 데이터는 컨트롤러가 아닌 서비스에 있습니다.


서비스를 만들 때 가장 중요한 것은 서비스가 'new' 키워드로 인스턴스화된다는 것입니다.자바스크립트 전문가들에게 이것은 코드의 본질에 대한 큰 힌트를 줄 것입니다.JavaScript에 제한적인 배경이 있거나 'new' 키워드가 실제로 어떤 기능을 하는지 잘 모르는 분들을 위해 서비스의 특성을 이해하는 데 도움이 될 몇 가지 JavaScript 기본 사항을 검토해 보겠습니다.

'new' 키워드를 사용하여 함수를 호출할 때 발생하는 변화를 실제로 보려면 함수를 만들고 'new' 키워드를 사용하여 호출한 다음, 'new' 키워드를 사용하여 인터프리터가 수행하는 작업을 보여줍니다.최종 결과는 둘 다 동일합니다.

먼저 생성자를 생성합니다.

var Person = function(name, age){
  this.name = name;
  this.age = age;
}

이것은 일반적인 JavaScript 생성자 함수입니다.이제 'new' 키워드를 사용하여 사용자 기능을 호출할 때마다 'this'는 새로 생성된 개체에 바인딩됩니다.

이제 사용자 프로토타입에 메서드를 추가하여 사용자 '클래스'의 모든 인스턴스에서 사용할 수 있도록 하겠습니다.

Person.prototype.sayName = function(){
  alert('My name is ' + this.name);
}

이제 sayName 함수를 프로토타입에 추가했기 때문에 모든 사용자 인스턴스가 sayName 함수를 호출하여 해당 인스턴스의 이름을 경고할 수 있습니다.

이제 사용자 생성자 기능과 sayName 기능을 프로토타입에 추가했으므로 실제로 사용자 인스턴스를 만든 다음 sayName 기능을 호출합니다.

var tyler = new Person('Tyler', 23);
tyler.sayName(); //alerts 'My name is Tyler'

그래서 사람 생성자를 만들고, 프로토타입에 함수를 추가하고, 사용자 인스턴스를 만들고, 프로토타입에서 함수를 호출하는 코드는 모두 다음과 같습니다.

var Person = function(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function(){
  alert('My name is ' + this.name);
}
var tyler = new Person('Tyler', 23);
tyler.sayName(); //alerts 'My name is Tyler'

이제 JavaScript에서 'new' 키워드를 사용할 때 실제로 어떤 일이 발생하는지 살펴보겠습니다.먼저 이 예에서 'new'를 사용한 후 'tyler'의 메서드(sayName)를 객체인 것처럼 호출할 수 있습니다. 이는 객체이기 때문입니다.먼저, 우리는 코드에서 볼 수 있든 없든 우리의 사용자 생성자가 객체를 반환한다는 것을 알고 있습니다.둘째, sayName 함수는 사용자 인스턴스에 직접 위치하지 않고 프로토타입에 위치하기 때문에 사용자 함수가 반환하는 개체는 실패한 조회에서 프로토타입에 위임해야 합니다.좀 더 간단하게 말하면, 우리가 tyler.sayName()을 호출할 때, 통역사는 "좋아요, 방금 만든 'tyler' 개체를 보고 sayName 함수를 찾은 다음 호출하겠습니다.잠시만요, 여기는 안 보이는데요. 이름과 나이만 보이네요. 시제품을 확인해 보겠습니다.네, 시제품에 나온 것 같네요, 불러보겠습니다."

아래는 'new' 키워드가 자바스크립트에서 실제로 무엇을 하고 있는지 생각해 볼 수 있는 코드입니다.이것은 기본적으로 위 단락의 코드 예시입니다.저는 '통역 뷰' 또는 통역사가 코드를 보는 방식을 노트 안에 넣었습니다.

var Person = function(name, age){
  //The line below this creates an obj object that will delegate to the person's prototype on failed lookups.
  //var obj = Object.create(Person.prototype);

  //The line directly below this sets 'this' to the newly created object
  //this = obj;

  this.name = name;
  this.age = age;

  //return this;
}

이제 'new' 키워드가 JavaScript에서 실제로 무엇을 하는지에 대한 지식을 얻으면 Angular에서 서비스를 만드는 것이 더 이해하기 쉬울 것입니다.

서비스를 만들 때 가장 중요하게 이해해야 할 것은 서비스가 'new' 키워드로 인스턴스화된다는 것입니다.이러한 지식을 위의 예와 결합하면 이제 귀하의 속성과 방법을 '이'에 직접 첨부하여 서비스 자체에서 반환한다는 사실을 알게 될 것입니다.이것을 실제로 살펴보도록 하겠습니다.

Factory 예제에서 처음 수행한 작업과 달리 개체를 생성한 다음 해당 개체를 반환할 필요가 없습니다. 이전에 여러 번 언급했듯이 'new' 키워드를 사용했기 때문입니다. 그러면 인터프리터가 해당 개체를 생성하고 프로토타입에 위임한 다음 작업을 수행하지 않고 개체를 반환할 수 있습니다.

우선 '개인'과 도우미 기능을 만들어 보겠습니다.우리는 공장에서 똑같은 일을 했기 때문에 이것은 매우 친숙해 보일 것입니다.여기서는 각 라인이 수행하는 작업을 설명하지 않겠습니다. 공장 예제에서 수행했기 때문입니다. 혼란스럽다면 공장 예제를 다시 읽어보십시오.

app.service('myService', function($http, $q){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }
});

이제 컨트롤러에서 사용할 수 있는 모든 방법을 '이것'에 연결하겠습니다.

app.service('myService', function($http, $q){
  var baseUrl = 'https://itunes.apple.com/search?term=';
  var _artist = '';
  var _finalUrl = '';

  var makeUrl = function(){
    _artist = _artist.split(' ').join('+');
    _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
    return _finalUrl;
  }

  this.setArtist = function(artist){
    _artist = artist;
  }

  this.getArtist = function(){
    return _artist;
  }

  this.callItunes = function(){
    makeUrl();
    var deferred = $q.defer();
    $http({
      method: 'JSONP',
      url: _finalUrl
    }).success(function(data){
      deferred.resolve(data);
    }).error(function(){
      deferred.reject('There was an error')
    })
    return deferred.promise;
  }

});

이제 공장에서와 마찬가지로, 아티스트 설정, 아티스트 가져오기 및 콜Itunes는 서비스를 전달하는 컨트롤러에서 사용할 수 있습니다.다음은 myService 컨트롤러(공장 컨트롤러와 거의 동일)입니다.

app.controller('myServiceCtrl', function($scope, myService){
  $scope.data = {};
  $scope.updateArtist = function(){
    myService.setArtist($scope.data.artist);
  };

  $scope.submitArtist = function(){
    myService.callItunes()
      .then(function(data){
        $scope.data.artistData = data;
      }, function(data){
        alert(data);
      })
  }
});

앞서 언급했듯이, '새로운'이 하는 일을 제대로 이해하면 서비스는 Angular의 공장과 거의 동일합니다.

단서는 이름에 있습니다.

서비스와 공장은 서로 비슷합니다.둘 다 다른 물체에 주입할 수 있는 싱글톤 물체를 생성하기 때문에 종종 상호 교환적으로 사용됩니다.

다른 설계 패턴을 구현하기 위해 의미론적으로 사용됩니다.

서비스는 서비스 패턴을 구현하기 위한 것입니다.

서비스 패턴은 응용프로그램이 논리적으로 일관된 기능 단위로 분할되는 패턴입니다.예를 들어 API 액세스나 비즈니스 로직 집합이 있을 수 있습니다.

Angular에서는 Angular 모델이 일반적으로 서버에서 가져온 JSON 객체이기 때문에 비즈니스 로직을 저장할 수 있는 위치가 필요합니다.

예를 들어 Github 서비스가 있습니다.Github과 대화하는 방법을 알고 있습니다.그것은 URL과 방법에 대해 알고 있습니다.우리는 그것을 컨트롤러에 주입할 수 있습니다. 그러면 그것은 약속을 생성하고 반환할 것입니다.

(function() {
  var base = "https://api.github.com";

  angular.module('github', [])
    .service('githubService', function( $http ) {
      this.getEvents: function() {
        var url = [
          base,
          '/events',
          '?callback=JSON_CALLBACK'
        ].join('');
        return $http.jsonp(url);
      }
    });
  )();

공장은 공장 패턴을 구현합니다.

반면에 공장은 공장 패턴을 구현하기 위한 것입니다.공장 기능을 사용하여 객체를 생성하는 공장 패턴입니다.일반적으로 모델을 구축하는 데 사용할 수 있습니다.작성자 생성자를 반환하는 공장은 다음과 같습니다.

angular.module('user', [])
  .factory('User', function($resource) {
    var url = 'http://simple-api.herokuapp.com/api/v1/authors/:id'
    return $resource(url);
  })

다음과 같이 활용할 수 있습니다.

angular.module('app', ['user'])
  .controller('authorController', function($scope, User) {
    $scope.user = new User();
  })

공장에서도 싱글톤이 반환됩니다.

공장에서 생성자를 반환할 수 있습니다.

팩토리는 단순히 객체를 반환하기 때문에 위에서 보는 것처럼 생성자 기능을 포함하여 원하는 모든 유형의 객체를 반환할 수 있습니다.

공장에서 객체를 반환하고, 서비스를 새로 구입할 수 있습니다.

또 다른 기술적 차이는 서비스와 공장 구성 방식에 있습니다.개체를 생성하기 위해 서비스 기능이 새로 추가됩니다.공장 함수가 호출되고 개체가 반환됩니다.

  • 서비스는 새로운 생성자입니다.
  • 공장은 단순히 호출되고 물체를 반환합니다.

이것은 서비스에서 우리가 "이것"에 추가한다는 것을 의미합니다. 이것은 생성자의 맥락에서, 구성 중인 객체를 가리킬 것입니다.

이를 설명하기 위해 서비스와 공장을 사용하여 생성된 동일한 단순 객체가 있습니다.

angular.module('app', [])
  .service('helloService', function() {
    this.sayHello = function() {
      return "Hello!";
    }
  })
  .factory('helloFactory', function() {
    return {
      sayHello: function() {
        return "Hello!";
      }
    }
  });

여기에 있는 모든 대답은 서비스와 공장에 관한 것으로 보이며, 그것은 질문을 받고 있었기 때문에 유효합니다.하지만 다음과 같은 몇 가지 다른 사항이 있다는 것을 명심해야 합니다.provider(),value(),그리고.constant().

기억해야 할 핵심은 각각이 다른 하나의 특별한 경우라는 것입니다.각각의 특수 케이스를 통해 더 적은 코드로 동일한 작업을 수행할 수 있습니다.각각은 또한 약간의 추가적인 제한을 가지고 있습니다.

어떤 것을 사용할지 결정하기 위해 어떤 것을 사용하면 더 적은 코드로 원하는 작업을 수행할 수 있는지 확인합니다.다음은 이들이 얼마나 유사한지를 보여주는 이미지입니다.

enter image description here

단계별 전체 내역 및 각 사용 시기에 대한 빠른 참조는 다음에서 이 이미지를 가져온 블로그 게시물을 방문하면 됩니다.

http://www.simplygoodcode.com/2015/11/the-difference-between-service-provider-and-factory-in-angularjs/

app.factory ('fn', fn) vs. app.service ('fn', fn)

시공

공장에서 Angular는 함수를 호출하여 결과를 얻습니다.캐시되고 주입된 결과입니다.

 //factory
 var obj = fn();
 return obj;

서비스에서 Angular는 new를 호출하여 생성자 함수를 호출합니다.생성된 함수가 캐시되고 주입됩니다.

  //service
  var obj = new fn();
  return obj;

실행

반환 이 컨트롤러, 실행 블록, 지시 등에 주입되는 값이기 때문에 공장은 일반적으로 객체 리터럴을 반환합니다.

  app.factory('fn', function(){
         var foo = 0;
         var bar = 0;
         function setFoo(val) {
               foo = val;
         }
         function setBar (val){
               bar = val;
         }
         return {
                setFoo: setFoo,
                serBar: setBar
         }
  });

서비스 기능은 일반적으로 아무것도 반환하지 않습니다.대신 초기화 및 노출 기능을 수행합니다.기능은 'new'를 사용하여 구성되었기 때문에 'this'를 참조할 수도 있습니다.

app.service('fn', function () {
         var foo = 0;
         var bar = 0;
         this.setFoo = function (val) {
               foo = val;
         }
         this.setBar = function (val){
               bar = val;
         }
});

결론

공장이나 서비스를 사용할 때는 둘 다 매우 유사합니다.이들은 컨트롤러, 지시어, 실행 블록 등에 주입되고 클라이언트 코드에서 거의 동일한 방식으로 사용됩니다.또한 둘 다 싱글톤입니다. 즉, 서비스/팩토리가 주입되는 모든 위치에서 동일한 인스턴스가 공유됩니다.

그래서 당신은 어떤 것을 선호해야 합니까?둘 중 하나 - 너무 비슷해서 차이가 작습니다.다른 하나를 선택하는 경우에는 올바르게 구현할 수 있도록 구성 방법을 숙지해야 합니다.

저는 그 차이를 알아내기 위해 시간을 보냈습니다.

그리고 공장 기능은 모듈 패턴을 사용하고 서비스 기능은 표준 자바 스크립트 생성자 패턴을 사용한다고 생각합니다.

팩토리 패턴은 객체뿐만 아니라 기능과 값도 반환할 수 있어 유연합니다.

IMHO가 하는 모든 일이 공장에서 쉽게 할 수 있기 때문에 서비스 패턴에는 많은 의미가 없습니다.예외는 다음과 같습니다.

  • 어떤 이유에서 인스턴스화된 서비스의 선언된 유형에 관심이 있는 경우 - 서비스 패턴을 사용하는 경우 생성자가 새 서비스 유형이 됩니다.
  • 다른 곳에서도 서비스로 사용하려는 생성자 기능이 이미 있는 경우(아무것도 주입하려는 경우에는 별로 사용하지 않을 수도 있음!).

서비스 패턴은 구문 관점에서 새 개체를 생성하는 데 약간 더 좋은 방법이지만 인스턴스화하는 데도 비용이 더 많이 듭니다.다른 사람들은 Angular가 서비스를 생성하기 위해 "새로운"을 사용한다고 지적했지만, 이것은 완전히 사실이 아닙니다. 각 서비스 생성자마다 매개 변수의 수가 다르기 때문에 그렇게 할 수 없습니다.각이 실제로 수행하는 작업은 공장 패턴을 내부적으로 사용하여 생성자 기능을 래핑하는 것입니다.그런 다음 javascript의 "새로운" 연산자를 시뮬레이션하여 다양한 수의 주입 가능한 인수로 생성자를 호출하는 영리한 jiggaly poker를 수행합니다. 그러나 공장 패턴을 직접 사용하면 이 단계를 생략할 수 있으므로 코드의 효율성을 매우 약간 높일 수 있습니다.

언급URL : https://stackoverflow.com/questions/14324451/angular-service-vs-angular-factory

반응형