AngularJS:一些帮助理解服务/工厂

时间:2014-11-03 16:33:16

标签: javascript angularjs angularjs-service angularjs-factory

我花了几个小时阅读有关服务和工厂之间的差异,在这里,角度文档和其他地方,但我仍然不太了解它。

我知道这里有关于这个主题的帖子已经无数但是我只是想确保我理解正确,因为我要么缺少某些东西,要么没有理由从我所理解的服务和工厂做同样的事情,它们在功能上是相同的,唯一的区别在于架构。

如果我们暂时忽略角度并在香草JS中重新创建它,我认为这是每个工作的方式:

//factory design
var factoryDesign = function(){

    var privateFoobar = 'foobar',
        reverse = function(){ 
            return privateFoobar
                .split('')
                .reverse()
                .join('');
        }

    return {
        foobar: privateFoobar,
        raboof: reverse()
    }

};

//Service design
var serviceDesign = function(){
    this.foobar = 'foobar';
    this.raboof = this.foobar    
        .split('')
        .reverse()
        .join('');
}

var myGlobalServiceInstance = new serviceDesign(),
    myGlobalFactoryInstance = new factoryDesign();

console.log('service', myGlobalServiceInstance.foobar, myGlobalServiceInstance.raboof);

console.log('factory',myGlobalFactoryInstance.foobar,myGlobalFactoryInstance.raboof);

JSFIDDLE

这两个实例都将返回相同的内容,但是工厂主要依赖于简单返回的私有对象,并且服务将方法和对象范围扩展到实例。

如果是这种情况......究竟是什么意思呢?是否有任何理由区分工厂...我理解它可以让您更改以下值:

myGlobalServiceInstance.foobar = 'newFoobar';

但使用工厂有什么好处?如果可能,请提供vanilla JS中的任何示例

1 个答案:

答案 0 :(得分:1)

简而言之:使用服务,angular会为您提供传入函数的实例化。所以: service('myService', function myService(){});new myService();相同,

在使用工厂时,angular会传递您传入的函数返回的内容: factory('myFactory', function myFactory(){});myFactory();

相同

因此,对于工厂,您可以通过自己的类/构造函数 - 函数定义并在代码中的其他位置实例化它,例如:

factory('myFactory', function(){
    var MyClass = function(){};

    return MyClass ;
});