JavaScript / JQuery DTO / Объекты для хранения State

Question

Я обычно являюсь разработчиком на C #, но пишу в основном клиентское приложение, используя jQuery.

Это довольно просто: у меня есть список "групп", которые имеют некоторые параметры (например, имя группы) и список "пользователей", которые также имеют некоторые параметры.

В данный момент я пытаюсь справиться с этим, используя <li> с определенным идентификатором, поэтому требуется много совпадений строк, чтобы превратить <li id="group-2">Name - ExtraInfo</li> в то, с чем я могу работать.

Я чувствую, что такой подход глуп, потому что а) я использую пользовательский интерфейс в качестве фонового для состояния и б) полагаюсь на разбор строк, а не на работу с реальными объектами.

В C # я бы просто создал DTO (по сути List<Group>), но у меня недостаточно опыта в JavaScript / jQuery, чтобы сделать это там.

Может кто-нибудь дать мне несколько быстрых советов, как создать пользовательский объект и управлять их списком?

Answer 1

Я бы просто использовал массивы и объекты (скажем, JSON):

var groups = [
    {
        name: "Name",
        info: "Extra"
    },
    {
        name: "Name",
        info: "Extra"
    }
];

Что касается манипулирования массивом. В jQuery есть несколько утилит для работы с массивами . Для вопроса в своем комментарии вы должны использовать grep:

var filteredGroups = groups.grep(function (group, i) {
    return group.name == "What I'm interested in";
});

Это эквивалент Select (). Where () в Linq (я не эксперт по .NET, поэтому могут быть некоторые вещи, которые не совпадают).

В любом случае, это будет просто модельная часть структуры MVC. Вам по-прежнему нужны некоторые функции для сопоставления коллекции групп с элементом <ul>. Тогда у тебя тоже будет вид.

Answer 2

Расширяя ответ Ионута Г. Стэна, я предлагаю вложенные объекты:

var groups = {
  group1: {
    name: "Group 1",
    users: {
      uid1: { name: "User 1" },
      uid2: { name: "User 2" },
      uid3: { name: "User 3" }
    }
  },
  group2: {
    name: "Group 2",
    users: {
      uid1: { name: "User 1" },
      uid4: { name: "User 4" }
    }
  }
};

• Проверка:
  if ("group1" in groups && "uid1" in groups["group1"].users) /* ... */;
• Fetch:
  var username = groups["group1"].users["uid1"].name
• Удалить:
  delete groups["group1"].users["uid1"];
• Добавить:
  groups["group1"].users["uid4"] = { name: "User 4" };

Чтобы избежать ненужного дублирования и вставить парадоксы:

// all relevant users, for look-up purposes
var allUsers = {
  uid1: { name: "User 1" },
  uid2: { name: "User 2" },
  uid3: { name: "User 3" },
  uid4: { name: "User 4" }
}

// groups reference the ID only, details are in allUsers["uid1"] etc
var groups = {
  group1: {
    name: "Group 1",
    users: {uid1: 1, uid2: 1, uid3: 1}
  },
  group2: {
    name: "Group 2",
    users: {uid1: 1, uid4: 1 }
  }
};

• Проверка:
  if ("group1" in groups && "uid1" in groups["group1"].users) /* ... */;
• Fetch:
  var username = allUsers["uid1"].name
• Удалить
  delete groups["group1"].users["uid1"];
• Добавить:
  groups["group1"].users["uid4"] = 1;

Answer 3

Вы можете использовать структуру, подобную следующей. Вы хотели бы уточнить это более подробно, и группа, вероятно, имеет аналогичную структуру для внутреннего массива пользователей. Также некоторая обработка ошибок для невозможных значений (таких как id = -201) не помешает.

function Group(id, name, info)
{
    var _id = id;
    var _name = name;
    var _info = info

    this.getID = function()
    {
        return _id;
    }

    this.getName = function()
    {
        return _name;
    }

    this.getInfo = function()
    {
        return _info;
    }
}

function GroupList()
{
    var _groups = [];

    this.addGroup = function(group)
    {
        _groups.push(group);
    }

    this.getGroup = function(id)
    {
        var group;
        for(var index = 0, length = _groups.length; index < length; ++index)
        {
            group = _groups[index];
            if (id === group.getID())
            {
                return group;
            }
        }
    }
}

Если вы собираетесь использовать стиль ООП, как описано выше, я бы порекомендовал Прототип , поскольку он упрощает наследование классов. Тогда это всего лишь вопрос написания универсального List и его расширения (см. http://api.prototypejs.org/language/class.html). Prototype, кроме всего прочего, предоставляет довольно широкий набор функций для работы с массивами и перечислимыми (см. http://api.prototypejs.org/language/enumerable.html).

Answer 4

Вы также можете использовать функцию данных jQuery для хранения групп для удобного поиска.

var group1 = {
 name: "Group 1",
 users: {
  uid1: { name: "User 1" },
  uid2: { name: "User 2" },
  uid3: { name: "User 3" }
 }
}

$('#ArbitraryElementID').data('Group 1', group1);

тогда вы можете использовать:

var group1 = $('#ArbitraryElementID').data('Group 1');

для извлечения объекта.

Answer 5

Вам не нужно заботиться о строке, совпадающей с этим, и JQuery оборачивается по уважительным причинам!

Самый быстрый способ без jQuery будет

document.getElementById('idOfLiElement');