Question

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

这就是它的样子： enter image description here

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

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。我还不知道它们，所以这是我必须学习的东西。然而，我的目标是拥有其中一个盒子，而不是两个盒子。从那里有一个控制器（菜单项），向用户显示与用户或组一起工作的选项。此时，视图更新以反映与上下文（用户或组）相关的项目，并具有一个函数来返回组或用户，具体取决于我所处的上下文。

有没有改进我下面的功能来做这个或者每个上下文有两个功能？

Answer 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）。但是，将代码组合起来仍然是一个好主意，因为它可以减少未来的错误。在一个地方更新代码，然后忘记在类似的代码中更新它是软件开发中最常见的人为错误之一，你可以通过不编写冗余代码来防止。

Answer 2

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

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

等。

Answer 3

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

function populate(entity)
{
  // common code
  if (entity === "User") {
    // put specific code for User here..
  }
  if (entity === "Group") {
    // put specific code for Group here..
  }
}

结合功能

3 个答案: