0

我正在开发一个 Web 应用程序，我发现自己有大约 1000 行代码，并注意到我的很多功能都是完全相同的，只是根据上下文进行了一些更改。例如，我构建的应用程序管理 SharePoint，因此我要么与组合作，要么与用户合作。我正在尝试找到减少代码中冗余/重复的最佳方法。

这是它的样子：在此处输入图像描述

现在我有两个功能，一个填充我的所有用户，另一个填充我的所有组。我还有其他功能也非常相似，但根据我正在使用的内容进行了一些更改。

JS：

  function populateGroups(){ 
    //Populate the group list  
    strHTMLSiteGroups = "";
    userAssigned.empty();
    userAvailable.empty();
    $("#my_SiteGroups option:gt(0)").remove();
    $().SPServices({
        operation: "GetGroupCollectionFromSite",
        completefunc: function(xData, Status) {
          groupCollection = $(xData.responseXML);
          groupCollection.find("Group").each(function() {
          strHTMLSiteGroups += "<option value='" + $(this).attr("Name")+ "' data-groupid='" + $(this).attr("ID") + "'>" + $(this).attr("Name") + "</option>";
        });
          group.append(strHTMLSiteGroups);
          $('#groupOwner').append('<optgroup label="---Groups---"></optgroup>');
          $('#groupOwner').append(strHTMLSiteGroups);
        }
    });
  }
  function populateUsers() {
    //Populate the user list
    strHTMLSiteUsers = "";
    $("#my_SiteUsers option:gt(0)").remove(); //remove all except first
    $().SPServices({
        operation: "GetUserCollectionFromSite",
        completefunc: function(xData, Status) {
          userCollection = $(xData.responseXML);
          userCollection.find("User").each(function() {
            strHTMLSiteUsers += "<option value='" + $(this).attr("LoginName") + "' data-userid='"+ $(this).attr("ID")+ "'>" + $(this).attr("Name") + "</option>";
          });
          user.append(strHTMLSiteUsers);
          $('#groupOwner').append(strHTMLSiteUsers);
        }
    });
  }

我计划在这个应用程序中使用 Angular、Backbone 或 Knockoutjs。我还不认识他们，所以这是我必须学习的东西。然而，我的目标是拥有其中一个，而不是两个。从那里有一个控制器（菜单项）向用户显示与用户或组一起工作的选项。那时，视图会更新以反映与上下文（用户或组）相关的项目，并有一个函数可以根据我所处的上下文返回组或用户。

无论如何要改进我在下面执行此操作的功能，还是为每个上下文提供 2 个功能？

4

3 回答 3

1

这应该将您的 2 个函数的代码合并为 1 个：

function populateGroups() {
    populate('Groups', 'Name', group);
}

function populateUsers() {
    populate('Users', 'LoginName', user);
}

function populate(entity, nameKey, entityVar) {
    //Populate the list  
    strHTMLSite = "";
    if (entity == 'user') {
        userAssigned.empty();
        userAvailable.empty();
    }
    $("#my_Site" + entity + " option:gt(0)").remove();

    $("#my_SiteGroups option:gt(0)").remove();
    $().SPServices({
        operation: "Get" + entity + "GroupCollectionFromSite",
        completefunc: function (xData, Status) {
            collection = $(xData.responseXML);
            collection.find(entity).each(function () {
                strHTMLSite += "<option value='" + $(this).attr(nameKey) + "' data-" + entity.toLowerCase() + "id='" + $(this).attr("ID") + "'>" + $(this).attr("Name") + "</option>";
            });
            entityVar.append(strHTMLSiteGroups);
            if (entity == 'group') {
                $('#groupOwner').append('<optgroup label="---Groups---"></optgroup>');
            }
            $('#groupOwner').append(strHTMLSiteGroups);
        }
    });
}

如您所见，两种解决方案之间的差异只有 2 行（35 对 33）。但是，组合您的代码仍然是一个好主意，因为这样可以减少将来的错误。在一个地方更新代码，然后忘记在类似的代码中更新它是软件开发中最常见的人为错误之一，您可以通过不编写冗余代码来预防。

于 2013-11-11T14:16:54.780 回答
0

DRY原则绝对是你所需要的。我建议使用一个功能，但添加一些参数，例如：

function populate(entity)
{
  // common code
  if (entity === "User") {
    // put specific code for User here..
  }
  if (entity === "Group") {
    // put specific code for Group here..
  }
}
于 2013-11-11T14:09:46.387 回答
0

如果你有两个类似的功能，你可以通过添加一个参数来减少数量。像这样 ：

function populateThings(whatThings)
{
 //Populate the list
    strHTMLSiteUsers = "";
    $("#my_Site" + whatThings + "s option:gt(0)").remove(); //remove all except first
    $().SPServices({
        operation: "GetUserCollectionFromSite",
        completefunc: function(xData, Status) {
          userCollection = $(xData.responseXML);
          userCollection.find(whatThings).each(function() { 
            strHTMLSiteUsers += "<option value='" + $(this).attr("LoginName") + "' data-userid='"+ $(this).attr("ID")+ "'>" + $(this).attr("Name") + "</option>";
          });
          user.append(strHTMLSiteUsers);
          $('#groupOwner').append(strHTMLSiteUsers);
        }
    });
}

ETC..

于 2013-11-11T14:08:16.907 回答