保存状态的 JavaScript/jQuery DTO/对象

Question

我通常是一名 C# 开发人员，但主要使用 jQuery 编写客户端应用程序。

这相当简单：我有一个“组”列表，其中包含一些参数（如组名）和一个“用户”列表，它们也有一些参数。

目前我尝试使用具有特定 ID 的 <li> 来管理它，因此需要进行大量字符串匹配才能将 <li id="group-2">Name - ExtraInfo</li> 重新转换为我可以使用的东西。

我觉得这种方法很愚蠢，因为 a) 我使用 UI 作为状态的后端 b) 我依赖字符串解析而不是使用真实对象。

在 C# 中，我只会创建一个 DTO（本质上是一个 List<Group>），但我在 JavaScript/jQuery 方面没有足够的经验来做到这一点。

谁能给我一些快速提示如何创建自定义对象和管理这些对象的列表？

Answer 1

我只使用数组和对象（比如说 JSON）：

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

关于数组的操作。 jQuery 有一些array utilities。对于您评论中的问题，您可以使用 grep：

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

它相当于 Linq 中的 Select().Where()（我不是 .NET 专家，所以可能有些东西不匹配）。

无论如何，这只是 MVC 结构的模型部分。您仍然需要一些函数来将一组组映射到 <ul> 元素。这样你也能看到风景。

Answer 2

扩展 Ionut G. Stan 的回答，我建议使用嵌套对象：

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) /* ... */;
• 获取：
  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) /* ... */;
• 获取：
  var username = allUsers["uid1"].name
• 删除：
  delete groups["group1"].users["uid1"];
• 地址：
  groups["group1"].users["uid4"] = 1;

Answer 3

您可以使用如下结构。您可能希望更详细地充实它，并且 group 可能对内部用户数组具有类似的结构。此外，对不可能的值（如 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;
            }
        }
    }
}

如果您要采用上述 OOP 样式，我建议您使用 Prototype，因为它使类继承更容易。然后只需编写一个通用列表并从中扩展（参见http://api.prototypejs.org/language/class.html）。除其他外，Prototype 还提供了一组非常广泛的函数，用于处理数组和枚举（请参阅http://api.prototypejs.org/language/enumerable.html）。

Answer 4

你不应该关心匹配 this 的字符串是由 jQuery 包装的！

没有 jQuery 的最快方法是

document.getElementById('idOfLiElement');