如何重用 AngularJS 工厂中的函数？

Question

我有一个 AngularJS 工厂用于一些常见的本地存储操作。它是针对不同变量的一组通用函数。我正在构造它，以便根据需要操作的变量重复函数。可能不是解决此问题的优雅方式，因此可以选择。

工厂外观如下。有没有一种方法可以根据变量重用函数而不会造成太多代码膨胀？

angular.module('app.datastore', [])

  .factory('DataStore', function() {

    var venue = angular.fromJson(window.localStorage['venue'] || '[]');
    var prize = angular.fromJson(window.localStorage['prize'] || '[]');

    function persist_venue() {
        window.localStorage['venue'] = angular.toJson(venue);
    }

    return {

      list_venue: function () {
        return venue;
      },

      get_venue: function(venueId) {
        for (var i=0; i<venue.length; i++) {
          if (venue[i].id === venueId) {
            return venue[i];
          }
        }
        return undefined;
      },

      create_venue: function(venueItem) {
        venue.push(venueItem);
        persist_venue();
      },

      list_prize: function () {
        return prize;
      },

      get_prize: function(prizeId) {
        for (var i=0; i<prize.length; i++) {
          if (prize[i].id === prizeId) {
            return prize[i];
          }
        }
        return undefined;
      },

      create_prize: function(prizeItem) {
        venue.push(prizeIem);
        persist_prize();
      }
    };

  });

Answer 1

我不知道您是否熟悉 John Papa 的 angular 风格指南，但您真的应该看看它可能会帮助您解决很多设计问题。 https://github.com/johnpapa/angular-styleguide

无论如何 - 我建议你使用这种方法 -

angular.module('app.datastore', [])

.factory('DataStore',函数(){

  var venue = angular.fromJson(window.localStorage['venue'] || '[]');
  var prize = angular.fromJson(window.localStorage['prize'] || '[]');

  return {
      list_venue: list_venue,
      persist_venue: persist_venue,
      get_venue: get_venue,
      create_venue: create_venue,
      list_prize: list_prize,
      get_prize: get_prize,
      create_prize: create_prize
  };

  function persist_venue() {
      window.localStorage['venue'] = angular.toJson(venue);
  }

  function list_venue() {
      return venue;
  }

  function get_venue(venueId) {
      for (var i = 0; i < venue.length; i++) {
          if (venue[i].id === venueId) {
              return venue[i];
          }
      }
      return undefined;
  }

  function create_venue(venueItem) {
      venue.push(venueItem);
      persist_venue();
  }

  function list_prize() {
      return prize;
  }

  function get_prize(prizeId) {
      for (var i = 0; i < prize.length; i++) {
          if (prize[i].id === prizeId) {
              return prize[i];
          }
      }
      return undefined;
  }

  function create_prize(prizeItem) {
      venue.push(prizeIem);
      persist_prize();
  } });

我喜欢这种方法，因为在顶部你可以看到这个工厂中所有可用的功能，非常简单，你也可以重用你暴露在外部和内部的每一个功能，所以它非常有效和有条理，希望有所帮助，祝你好运。

Answer 2

我的方法是在工厂中return一个函数，它将return一个类型的商店（场地、奖品、...）

angular.module('app.datastore', [])
    .factory('DataStore', function () {

    var getStoreFunction = function (storeName) {
        var store = angular.fromJson(window.localStorage[storeName] || '[]');

        function persist() {
            window.localStorage[storeName] = angular.toJson(store);
        };

        return {
            list: function () {
                return store;
            },

            getItem: function (id) {
                return store.find(function (elem) {
                    return elem.id === id;
                });
            },

            createItem: function (item) {
                store.push(item);
                persist(store);
            }
        }
    };

    return  { getStore : getStoreFunction };
});

您可以使用

创建无限商店

var venueStore = DataStore.getStore('venue');
//use of your store
venueStore.createItem({
    id : venueStore.list().length + 1,
    name : 'myVenue' + venueStore.list().length + 1
});
$scope.venues = venueStore.list();

您可以根据需要为每种类型创建一个工厂，或者直接在您的控制器中使用它，如本例所示：https://jsfiddle.net/royto/cgxfmv4q/

如何重用 AngularJS 工厂中的函数？

How to reuse functions in an AngularJS factory?

angularjs

ionic-framework

angularjs-factory