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";
});

它相当于一个Select（）。Linq中的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" };

为避免不必要的重复并插入paradoxons：

// 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，因为它使类继承更容易。然后，只需编写一个通用List并从中扩展（参见http://api.prototypejs.org/language/class.html）。除了其他方面，Prototype还提供了一组用于处理数组和枚举的相当广泛的函数（参见http://api.prototypejs.org/language/enumerable.html）。

Answer 4

你不应该关心字符串匹配这个由jQuery包装的原因很充分！

没有jQuery的最快方法是

document.getElementById('idOfLiElement');

Answer 5

您还可以使用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');

检索对象。

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

5 个答案: