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的角度风格指南，但是你真的应该看看它可能会帮助你解决很多设计问题。 https://github.com/johnpapa/angular-styleguide

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

angular.module（＆＃39; app.datastore＆＃39;，[]）

.factory（＆＃39; DataStore＆＃39;，function（）{

  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

我的方法是在工厂返回一个功能，它将返回一个类型的商店（场地，奖品......）

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工厂中重用函数？

2 个答案: