這兩年做前端開發(fā)，對JS的學(xué)習(xí)還在不斷，JS的發(fā)展還是很快的。下面來看看一個AngularJS庫。

服務(wù)是AngularJS中非常重要的一個概念，雖然我們有了控制器，但考慮到其生命實(shí)在脆弱，我們需要用到服務(wù)。

起初用service時，我便把service和factory()理所當(dāng)然地關(guān)聯(lián)起來了。
確實(shí)，factory()是創(chuàng)建一個服務(wù)的最簡單的方式，但服務(wù)并非僅此而已。

這里記錄一下我對服務(wù)的一些簡單認(rèn)識。

Service

非常重要的一點(diǎn) —— 服務(wù)是單例。
一個服務(wù)在一個AngularJS應(yīng)用中只會被$injector實(shí)例化一次，并貫穿應(yīng)用的整個生命周期，與脆弱的控制器們進(jìn)行通信。

先從注冊一個服務(wù)開始，注冊服務(wù)的最常見方式便是factory()。
比如：

var myApp = angular.module('myApp',[]) .factory('myService',function() {return {}; });

factory()以對象或者函數(shù)形式返回一個服務(wù)。
我們試試給myService注入$http服務(wù)，寫一個像那么回事的東西。

(ps:找了一些URL都不是很理想，我也只好學(xué)別人的demo，從github獲取用戶的活動日志信息)

注入? 把服務(wù)注入給控制器也是這樣，把服務(wù)的名字放到參數(shù)列表里就算是注入了，但這只是簡單的方式。

好了，先把myService修改一下:

.factory('myService',function($http) {return {getUserActivities: function(username){return $http({method: 'JSONP',url:'https://api.github.com/users/'+username+'/events?callback=JSON_CALLBACK'});}}; })

?

根據(jù)輸入的用戶名進(jìn)行請求，輸出活動信息，視圖如下:

<div ng-controller="myController"><input type="text" ng-model="username" /><table border="1"><tr><th></th><th>user</th><th>to</th><th>at</th></tr><tr ng-repeat="activity in activities"><td><img src="{{activity.actor.avatar_url}}" width="25px" height="25px"/></td><td>{{ activity.actor.login }} </td><td>{{ activity.repo.name }}</td><td>{{activity.created_at}}</td></tr></table> </div>

我們需要$watch這個變量，但需要注意的是，如果請求頻率超過限制，github會給個403。
因此還需要用$timeout控制一下請求頻率，一段時間之內(nèi)重復(fù)請求就把之前的干掉。
控制器調(diào)用服務(wù)代碼如下:

.controller('myController',function($scope,myService,$timeout,$log){var timeout;$scope.$watch('username',function(){if(timeout){$timeout.cancel(timeout)$log.info('timeout:::'+timeout);} timeout= $timeout(function(){myService.getUserActivities($scope.username).success(function(response, status, headers, config){$scope.activities = response.data;}).error(function(response, status, headers, config){$log.info(status)})},1000);}); })

javascript教程 http://www.17javascript.com/?

用factory()注冊一個服務(wù)似乎不那么復(fù)雜。
事實(shí)上，我們有5種方式來創(chuàng)建服務(wù):

• factory
• service
• constant
• value
• provider

factory

最簡單的方式，該函數(shù)接收2個參數(shù)

• name (string):服務(wù)名
• getFn (function/array):AngularJS實(shí)例化服務(wù)時調(diào)用該函數(shù)

service

可能是因?yàn)楦诱Z義化的緣故，比起factory()，我更喜歡service()。
service也同樣接收2個參數(shù)，分別是:

• name (string):服務(wù)名
• constructor (function):服務(wù)對象的構(gòu)造函數(shù)

試著改用service():

.service('myService',function($http) {this.getUserActivities = function(username){return $http({method: 'JSONP',url:'https://api.github.com/users/'+username+'/events?callback=JSON_CALLBACK'});} })

constant與value

這兩個名字感覺比較另類，它們的參數(shù)都是一樣的:

• name
• value

僅從語義上來講，如果服務(wù)的$get方法只是返回個常量，這兩個方法確實(shí)適合。
可能會嘗試寫個函數(shù)進(jìn)去，如果只是定義的話則不會報錯。
但不會有相應(yīng)的provider，調(diào)用時也會提示該服務(wù)不是一個函數(shù)之類的問題。

所以還是老老實(shí)實(shí)地這樣使用:

.constant('serviceId','00001')

那兩者的區(qū)別又是什么?
區(qū)別在于注入到config()時，以上面的serviceId為例。
如果serviceId是個constant，我們可以將serviceId注入到config()中，但是無法將serviceIdProvider注入到config()中，而value則剛好相反。

provider

provider()是最原始的方法。
我們試著用factory()和provider()創(chuàng)建相同的服務(wù)進(jìn)行對比。

.factory('aService',{'name':'a' }) .provider('bService',{$get: {'name':'b'} })

也就是說factory()的第二個參數(shù)相當(dāng)于是$get?
provider()接收兩個參數(shù):

• name (string) :仍然是服務(wù)實(shí)例的名字，如果name+'Provider'便是provider的名字。
• provider (object/array/function) : 不是服務(wù)，是帶$get()的provider

$provide服務(wù)在運(yùn)行時初始化provider，$injector調(diào)用$get創(chuàng)建服務(wù)實(shí)例。
那為什么要用provider()而不是其他方式? 關(guān)鍵在于config()，如果我們給多個應(yīng)用共享某個服務(wù)，但在注入服務(wù)之前給注入到不同應(yīng)用的服務(wù)進(jìn)行相應(yīng)的設(shè)置，則需要在config()中通過服務(wù)的provider進(jìn)行設(shè)置，比如加個decorator什么的。

decorator

就是裝飾服務(wù)，添加功能或者完全改變服務(wù)。
decorator()接收兩個參數(shù)

• name (string):要裝飾的服務(wù)的名稱
• decoratorFn (function):服務(wù)實(shí)例化時由$injector調(diào)用該函數(shù)。

下面是一個例子，在獲得用戶活動信息后輸出耗時:

.config(function(myServiceProvider,$provide){$provide.decorator('myService',function($delegate,$log) {var activities = function(username) {var startedAt = new Date();var activities = $delegate.getUserActivities(username);activities.finally(function() {$log.info("Fetching activities" +" took " +(new Date() - startedAt) + "ms");});return activities;};return {getUserActivities:activities};}); }) 

總結(jié)

以上是生活随笔為你收集整理的前端开发JS的学习之AngularJS库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。