1

我想收集所有被选中和未被选中的元素。

dom 元素由几个multiple select.
他们每个人都有相同的用户。
我的目标是创建所有用户的集合，并为选定的用户添加具有特定值的属性。

这是我的代码 js 代码 (1)，这里是链接http://jsfiddle.net/vxRtb/9/。

我的代码可以工作，但我想干掉代码，因为可能不需要在第一次选择时跳过所有用户。
任何提示如何干燥以下 js 代码？
请阅读关于 js 代码的评论以获取更多信息；谢谢

PS：
1）我正在使用jQuery和underscore
2）我从服务器获取 html 代码，与 jsfiddle.net/vxRtb/9 中的相同

$(function () {
    var $selectElements = $('form .controls select');
    var userCollection = []; 

    // Subroutine_1
    // TODO Subroutine_1 and Subroutine_2 seems too close; any idea how to dry this code?
    $.each($($selectElements[0]), function (i, teamElement) {
        var $users = $(teamElement).find('option')

        $.each($users, function (i, user) {
            userCollection.push({
                id: $(user).val(),
                name: $(user).text(),
            });            
        });
    });

    // Subroutine_2
    $.each($selectElements, function (i, teamElement) {
        var $teamElement = $(teamElement);
        //var teamId = $teamElement.attr('id');
        var teamName = $teamElement
            .parent().parent().closest('.controls')
            .find('input').val();
        var $users = $teamElement.find('option:selected');

        $.each($users, function (i, user) {
            _.where(userCollection, {id: $(user).val()})[0].team = teamName;           
        });
    });

    console.log(userCollection);
});
​
4

1 回答 1

0

这是一个相当古老的问题，您可能已经离开了它，但是，我尝试了一下，这就是我想出的。

分析

这些循环非常相似，主要区别在于一个循环建立团队成员，另一个循环确定他们的团队。我认为 DRY 选项是只使用一个循环并测试成员是否有团队。由于用户 ID 不唯一，因此会有重复，因此需要应用一些逻辑。

伪代码

  1. 根据<option>标签创建用户对象集合。
    1. 使用 getMyTeam 生成团队名称
  2. 按 ID 对用户对象进行分组。
  3. 过滤用户对象，仅采用具有团队名称的对象
  4. 过滤没有团队名称的用户对象以仅显示 uniq 记录

代码

我不确定这是否更好。在性能方面，由于所有的嵌套，这应该是相当糟糕的。但是，我想优点是代码变得更加模块化，并且您可以在需要时轻松更改规则。jsFiddle

$(function () {

    // Helper to find a team based on an options element
    function getMyTeam() {
        if (this.is(':selected')) {
            var select = this.parent();
            var teamId = select.attr('id').replace(/_participations$/, '_name');
            return $('#' + teamId).val();
        }
        return undefined;
    };

    // Helper to return an object's id
    function getId(obj) {
        return obj.id;
    };

    // Helper to filter the team members by team name.
    function filterMembersByTeam(members) {
        var result = _.filter(members, function(record) {
            return !_.isUndefined(record['team']);
        });
        if (result.length === 0) { 
            result = _.uniq(members, true, function(member) {
                return JSON.stringify(member);
            })
        };
        return result;
    };

    // 1. Select the users
    var options = $('form .controls select option');

    // 2. Build up the user data
    var userCollection = _.map(options, 
                          function(option) {
                            return { 
                                    id: $(option).val(),
                                    name: $(option).text(),
                                    team: getMyTeam.apply($(option)) 
                                };
                          }); 

    // 3. Clean & filter the user data
    userCollection = 
        _.flatten( 
            _.map( _.groupBy(userCollection, getId), filterMembersByTeam) 
        );

    console.log(userCollection);
});
于 2014-04-07T20:49:34.733 回答