[译]AngularJS Service vs Factory - Once and for all

原文: http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

Service和Factory有什么不同，我应该使用哪个? 

这篇文章将讲解service和factory的不同之处，为什么我们喜欢service多过于factory.

Service和Factory的不同之处

在AngularJS中service和factory有什么不同? 我们可以这样定义一个service:

app.service('MyService', function () {
  this.sayHello = function () {
    console.log('hello');
  };
});

.service() 是我们module的一个方法。 有两个参数，第一个参数是服务名，第二个参数是一个function. 可以把Service注入到其他的component中，如controller, directive, filters. 注入方法如下:

app.controller('AppController', function (MyService) {
  MyService.sayHello(); // logs 'hello'
});

好了，看看factory是如何做同样的事情的:

app.factory('MyService', function () {
  return {
    sayHello: function () {
      console.log('hello');
    };
  }
});

 .factory() 同样是我们module的一个方法，有两个参数，第一个是factory名，第二个是一个function. 同样factory也可以注入到其他components中. 那么他的不同之处在哪呢?

可以看到在factory中我们没有使用 this , 而是返回一个对象字面量. 为什么这样?因为,service是一个构造函数factory不是. 所以我们在factory的funtion中要显示的返回一个对象.

来看看AngularJS的源代码中的factory函数是怎样的:

function factory(name, factoryFn, enforce) {
  return provider(name, {
    $get: enforce !== false ? enforceReturnValue(name, factoryFn) : factoryFn
  });
}

factory接收一个name, 和factory函数，返回一个同名的provider, $get 是我们的factory函数. 当你获取一个注入,会调用$get()方法向相应的provider请求一个service的实例. 这就是为什么创建provider的时候需要有$get()方法.

换而言之, 当注入MyService时, 后面究竟发生了什么呢:

MyServiceProvider.$get(); // 返回service的实例

现在看看service函数在AngularJS的源代码中是怎么样的:

function service(name, constructor) {
  return factory(name, ['$injector', function($injector) {
    return $injector.instantiate(constructor);
  }]);
}

从代码中看得出来，当调用service()的时候实际上最后调用了factory(). 但是没有直接把service的构造函数传给factory. 而是传递了一个依赖injector的函数，通过这个injector去实例化. 简单的说: service调用了预定义的factory, 最后调用相应的provider的$get()方法. $injector.instantiate() 方法最终调用Object.create()，参数为构造函数. 这就是为什么我们要在service里面使用this.

不论我么使用 service() 还是 factory(), 最终都是一个factory，然后这个factory去调用provider. 

使用哪一个?

“serivce和factory的不同如下:”

app.service('myService', function() {

  // service是一个构造函数

  this.sayHello = function(name) {
     return "Hi " + name + "!";
  };
});

app.factory('myFactory', function() {

  // factory返回一个对象

  return {
    sayHello : function(name) {
      return "Hi " + name + "!";
    }
  }
});

 

是的service是一个构造函数， 然后我们一样可以在这个构造函数中返回对象字面量. 事实上, 在javascript中构造函数可以返回任何你想返回的东西. 所以我们把service写得和factory一样:

app.service('MyService', function () {

  // 我们可以在这加入其它的代码
  return {
    sayHello: function () {
      console.log('hello');
    };
  }
});

现在factory和service的写法已经一样了. 问题是: 我们该使用哪一个呢?

Service能让我们使用ES6的class

在ES6中我们可以这样定义service:

class MyService {
  sayHello() {
    console.log('hello');
  }
}

app.service('MyService', MyService);

ES6 class和ES5中的构造函数是一回事.