基于特征检测的AngularJS服务注入

发布时间：2020-12-17 17:25:02 所属栏目：安全来源：网络整理

导读：在我的Angular应用程序中,我需要创建一个持久性服务接口,该接口根据浏览器中可用的持久性机制调用具体实现.我正在考虑使用通用storageService来实现它,该服务调用了解存储机制的特定storageService. 例如,通用storageService将提供以下接口： angular .modul

在我的Angular应用程序中,我需要创建一个持久性服务接口,该接口根据浏览器中可用的持久性机制调用具体实现.我正在考虑使用通用storageService来实现它,该服务调用了解存储机制的特定storageService.

例如,通用storageService将提供以下接口：

angular
    .module('app.storage')
    .factory('storageService',storageService);

function storageService() {
    return {
        saveItem: saveItem,getItem: getItem
    }

    ...
}

存储服务将有多个实现,例如： localStorageService,indexedDbStorageService,webSqlStorageService.

基于浏览器功能动态注入具体存储服务的最佳方法是什么.例如,

if (isWebSqlAvailable()) {
    // inject webSqlStorageService 
}
else if (isIndexedDbAvailable() {
    // inject indexedDbStorageService 
}
else if (isLocalStorageAvailable() {
    // inject localStorageService 
}

解决方法

angular
  .module('app.storage')
  .factory('storageService',['$injector',storageService]);

  function storageService($injector) {

  var svc;
  if (isWebSqlAvailable()) {
    svc = $injector.get('webSqlService');
  }
  else if (isIndexedDbAvailable() {
    svc = $injector.get('indexedDbService');
  }
  else if (isLocalStorageAvailable() {
    svc = $injector.get('localStorageService');
  }

  return svc;
}


angular
  .module('app.storage').factory('webSqlService',webSqlService);

function webSqlService(){
   return {
      saveItem: saveItem,getItem: getItem
   }

   function getItem(){

   }

   function saveItem(){

   }

}

angular
  .module('app.storage').factory('indexedDbService',indexedDbService);

function indexedDbService(){
   return {
      saveItem: saveItem,getItem: getItem
   }

   function getItem(){

   }

   function saveItem(){

   }

}

然后,您只需要在任何地方注入storageService.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!