angular自定义服务factory和service源码解析

最新推荐文章于 2019-04-03 14:48:37 发布

转载最新推荐文章于 2019-04-03 14:48:37 发布 · 823 阅读

angular.js 专栏收录该内容

37 篇文章

订阅专栏

本文探讨了AngularJS中控制器、服务和服务工厂的设计模式。强调了控制器应保持轻量化，并介绍了服务与服务工厂的区别及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制器膨胀

控制器是AngularJS的肉和土豆，一不小心就会将过多的逻辑加入其中，尤其是刚开始的时候。控制器永远都不应该去操作DOM，或是持有DOM选择器，那是我们需要使用指令和ng-model的地方。同样的，业务逻辑应该存在于服务中，而非控制器。

数据也应该存储在服务中，除非它们已经被绑定在$scope上了。服务本身是单例的，在应用程序的整个生命周期都存在，然而控制器在应用程序的各状态间是瞬态的。如果数据被保存在控制器中，当它被再次实例化时就需要重新从某处获取数据。即使将数据存储于localStorage中，检索的速度也要比Javascript变量慢一个数量级。

AngularJS在遵循单一职责原则（SRP）时运行良好，如果控制器是视图和模型间的协调者，那么它所包含的逻辑就应该尽量少，这同样会给测试带来便利。

5. Service vs Factory

几乎每一个AngularJS开发人员在初学时都会被这些名词所困扰，这真的不太应该，因为它们就是针对几乎相同事物的语法糖而已！

以下是它们在AngularJS源代码中的定义：

JavaScript
1
2
3
4
5
6
7
8
9
function factory(name, factoryFn) { 
    return provider(name, { $get: factoryFn }); 
}
 
function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
      return $injector.instantiate(constructor);
    }]);
}

从源代码中你可以看到，service仅仅是调用了factory函数，而后者又调用了provider函数。事实上，AngularJS也为一些值、常量和装饰提供额外的provider封装，而这些并没有导致类似的困惑，它们的文档都非常清晰。

由于service仅仅是调用了factory函数，这有什么区别呢？线索在$injector.instantiate：在这个函数中，$injector在service的构造函数中创建了一个新的实例。

以下是一个例子，展示了一个service和一个factory如何完成相同的事情：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
varapp=angular.module('app',[]);
 
app.service('helloWorldService',function(){
    this.hello=function(){
        return"Hello World";
    };
});
 
app.factory('helloWorldFactory',function(){
    return{
        hello:function(){
            return"Hello World";
        }
    }
});

当helloWorldService或helloWorldFactory被注入到控制器中，它们都有一个hello方法，返回”hello world”。service的构造函数在声明时被实例化了一次，同时factory对象在每一次被注入时传递，但是仍然只有一个factory实例。所有的providers都是单例。

既然能做相同的事，为什么需要两种不同的风格呢？相对于service，factory提供了更多的灵活性，因为它可以返回函数，这些函数之后可以被新建出来。这迎合了面向对象编程中工厂模式的概念，工厂可以是一个能够创建其他对象的对象。

JavaScript
1
2
3
4
5
6
7
8
9
app.factory('helloFactory', function() {
    return function(name) {
        this.name = name;
 
        this.hello = function() {
            return "Hello " + this.name;
        };
    };
});

这里是一个控制器示例，使用了service和两个factory，helloFactory返回了一个函数，当新建对象时会设置name的值。

JavaScript
1
2
3
4
5
6
7
8
9
app.controller('helloCtrl',function($scope,helloWorldService,helloWorldFactory,helloFactory){
    init=function(){
      helloWorldService.hello();//'Hello World'
      helloWorldFactory.hello();//'Hello World'
      newhelloFactory('Readers').hello()//'Hello Readers'
    }
 
    init();
});

在初学时，最好只使用service。

Factory在设计一个包含很多私有方法的类时也很有用：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
app.factory('privateFactory',function(){
    varprivateFunc=function(name){
        returnname.split("").reverse().join("");//reverses the name
    };
 
    return{
        hello:function(name){
          return"Hello "+privateFunc(name);
        }
    };
});