AngularJS学习： service & factory

最新推荐文章于 2024-07-14 15:54:59 发布

chizhi6641

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量116

点赞数

文章标签： javascript 设计模式 ViewUI

原文链接：https://my.oschina.net/jbryan/blog/140647

版权

前言

这段时间对ＡｎｇｕｌａｒＪＳ十分感兴趣，留意到Ａｎｇｕｌａｒ中有两个特性：service and factory ,用法看起来都差不多一样的，不知道有什么异同。

示例代码

<html ng-app="myApp">
	<script id="others_angular_103" type="text/javascript" class="library" src="/js/sandbox/other/angular.min.js"></script>
  <head></head>
  <body ng-app="myApp">
      <div ng-controller="HelloCtrl">
          <p>{{fromService}}</p>
          <p>{{fromFactory}}</p>
      </div>
      <br />
      <div ng-controller="GoodbyeCtrl">
          <p>{{fromService}}</p>
          <p>{{fromFactory}}</p>
      </div>

  </body>
</html>

var app = angular.module('myApp',[]);

app.service('reverseService',function(){
	this.reverse = function(text){
	    return text.split(" ").reverse().join(" ");
	}
});

app.factory('testFactory', function(){
    return {
        sayHello: function(text){
            return "Factory says \"Hello " + text + "\"";
        },
        sayGoodbye: function(text){
            return "Factory says \"Goodbye " + text + "\"";
        }  
    }               
});

app.service('testService', function(){
    this.sayHello= function(text){
        return "Service says \"Hello " + text + "\"";
    };        
    this.sayGoodbye = function(text){
        return "Service says \"Goodbye " + text + "\"";
    };   
});

function HelloCtrl($scope, testService, testFactory)
{
    $scope.fromService = testService.sayHello("World");
    $scope.fromFactory = testFactory.sayHello("World");
}

function GoodbyeCtrl($scope, testService, testFactory)
{
    $scope.fromService = testService.sayGoodbye("World");
    $scope.fromFactory = testFactory.sayGoodbye("World");
}

用法几乎完全一样。但是 service 写起来更简单点，看起来更简洁一点。

异同

但是这并不能说明两者的不同，再看看下面的代码：

app.service('reverseService',function（){
	this.reverse = function(text){
	    return text.split(" ").reverse().join(" ");
	}
});

app.factory('testFactory',['$window', function(win){
    return {
        sayHello: function(text){
            win.alert('hello,I am factory!!')
            return "Factory says \"Hello " + text + "\"";
        },
        sayGoodbye: function(text){
            return "Factory says \"Goodbye " + text + "\"";
        }  
    }               
}]);

factory 可以有自己的依赖，像上面的代码，factory 可以注入 $window 服务来调用 win.alert("")。而且service 就不行了。

或者：

app.factory('helloWorld', ['$rootScope','$http',function($rootScope, $http) {

}]);

--源码

为了理解根本上的不同，可以扒一下源码来看看两个func的实现：

  function provider(name, provider_) {
    if (isFunction(provider_) || isArray(provider_)) { //判断是函数还是数组
      provider_ = providerInjector.instantiate(provider_);
    }
    if (!provider_.$get) {
      throw Error('Provider ' + name + ' must define $get factory method.');
    }
    return providerCache[name + providerSuffix] = provider_;
  }

function factory(name, factoryFn) { 
    return provider(name, { $get: factoryFn }); 
}


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

--factory研究

可以看到 factory 是对 provider的封装，举个例子：

var app = angular.module('myApp',[],function($provide) {
    $provide.provider('age',{
	    start  : 10 ,
	    $get : function() {
		    return this.start + 10  ;
	    }
    });
});
or : 添加注入器案例：
var app = angular.module('myApp',[],function($provide) {
    $provide.provider('age',{
    start  : 10 ,
    $get : ['$window',function(win) {
            win.alert('hi');
            return this.start + 10  ;
           }]
    });
});

function HelloCtrl($scope,age){
    $scope.myage = age; 
}

provider 是通过 $get 来在应用中注入单例，使用时取到的age就是 $get 返回的结果。

结论就是：factory 是封装且简化了provide的一个功能,返回对象。

--service研究

从源码看，service 就是小三，是对 factory 进行更上一层的封装。

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

总结： service 就是调用了 $injector 注入器的 factory ，简化数据共享的实现!

最后

service 和 factory 都是单例模式（单例模式是一种设计模式）

看案例代码：

app.service('Service', function(){
    this.name = 'yeelone';
    this.set = function(name){
        this.name = name ; 
    };
    
    this.get = function(){
        return this.name; 
    };
});


function HelloCtrl($scope,Service){
    $scope.name = Service.get();
    Service.set('newName'); 
}

function ByeCtrl($scope,Service){
    $scope.name = Service.get();
}
输出结果 ：
yeelone
newName

var app = angular.module('myApp',[]);

app.factory('NameFactory',function(){
    var name = 'init';
    return {       
        set : function(name){
            this.name = name ; 
        },
        get : function(){
            return this.name ; 
        }
    };
}
);

function HelloCtrl($scope,NameFactory){
    
    NameFactory.set('yeelone');
    $scope.name = NameFactory.get();
}

function ByeCtrl($scope,NameFactory){
    $scope.name2 = NameFactory.get();
}

service和factory可以实现 controller 之间的数据共享！

转载于:https://my.oschina.net/jbryan/blog/140647

chizhi6641

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习： service & factory

前言这段时间对ＡｎｇｕｌａｒＪＳ十分感兴趣，留意到Ａｎｇｕｌａｒ中有两个特性：service and factory ,用法看起来都差不多一样的，不知道有什么异同。示例代码 <html ng-app="myApp"> <script id="o...
复制链接

扫一扫