具有类似功能时简化 Javascript [关闭]答案

【问题标题】：Simplifying Javascript when having similar functions [closed]具有类似功能时简化 Javascript [关闭]
【发布时间】：2012-06-14 09:18:07
【问题描述】：

我终于拼凑了一些适用于我的问题here 的代码。但是，它看起来很长，因为我已经为刷新具有特定哈希的页面以及通过单击选项卡访问同一页面时创建了单独的函数。

$(document).ready(function () {
    $(function () {
        var loc = window.location.href; // For when Hazel is refreshed
        if (/Hazel/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
            $("#tab2").removeClass("tail");
            $("#tab3, #tab4").addClass("tail");
        }
    });
    $(function () {
        var loc = window.location.href; // For when Red is refreshed
        if (/Red/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
            $("#tab3, #tab2").removeClass("tail");
            $("#tab4").addClass("tail");
        }
    });
    $(function () {
        var loc = window.location.href; // For when Pink is refreshed
        if (/Pink/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
            $("#tab3, #tab4").removeClass("tail");
            $("#tab2").addClass("tail");
        }
    });
});
$(function () {
    var loc = window.location.href; // For when Cyan is refreshed
    if (/Cyan/.test(loc)) {
        $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
        $("#tab4").removeClass("tail");
        $("#tab3, #tab2").addClass("tail");
    }
});
$("#tab1").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Hazel tab is clicked
        if (/Hazel/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("r p c").addClass("h");
            $("#tab2").removeClass("tail");
            $("#tab3, #tab4").addClass("tail");
        }
    });
});
$("#tab2").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Red tab is clicked
        if (/Red/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h p c").addClass("r");
            $("#tab3, #tab2").removeClass("tail");
            $("#tab4").addClass("tail");
        }
    });
});
$("#tab3").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Pink tab is clicked
        if (/Pink/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r c").addClass("p");
            $("#tab3, #tab4").removeClass("tail");
            $("#tab2").addClass("tail");
        }
    });
});
$("#tab4").click(function () {
    $(window).bind("hashchange", function () {
        var loc = window.location.href; // For when Cyan tab is clicked
        if (/Cyan/.test(loc)) {
            $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p").addClass("c");
            $("#tab4").removeClass("tail");
            $("#tab3, #tab2").addClass("tail");
        }
    });
});
});

可以简化吗？我已经尝试过，但到目前为止，代码只是中断了。

【问题讨论】：

是的。你试过什么，请给我们看看那个代码？
为什么将前三个 addOnDOMready-statements 包装在另一个 $(document).ready 中？
这属于codereview.stackexchange.com而不是SO。
有没有可能四种颜色都没有刷新？还是在 URL 中总是有四个正则表达式之一？我正在考虑 if-elseif-elseif-else。
@Bergi：我会看看我是否可以复制它们，因为我已经将我的保存文件恢复为上面的代码，因为它到目前为止对我有用；但根据 Christoph 的建议，我想我不得不向 Code Review 提出这个问题。

标签： javascript jquery tabs simplify simplification

【解决方案1】：

我假设您正在使用某种 JS 路由库。

试试这个：

$(document).ready(function () {
    var tabInfo = {
            Hazel: {nonTail:'#tab2',tail:'#tab3, #tab4'},
            Red: {nonTail:'#tab3,#tab2',tail:'#tab4'},
            Pink: {nonTail:'#tab3,#tab4',tail:'#tab2'},
            Cyan: {nonTail:'#tab4',tail:'#tab2,#tab3'}
    };
    function makeChanges() {
       var loc = window.location.href; 
       for(var tab in tabInfo){
           if(loc.indexOf(tab) !== -1){
             $("#tab1,#tab2,#tab3,#tab4").removeClass("h r p c").addClass(tab.toLowerCase().charAt(0));
             $(tabInfo[tab].nonTail).removeClass("tail");
             $(tabInfo[tab].tail).addClass("tail");
             break;
           }
        }
    }
    makeChanges();
    $(window).bind("hashchange", function () {
         makeChanges();
    });
});

【讨论】：

我真的对您的方法如此简洁印象深刻，而且它部分有效。 h,r,p & c 类的添加和删除是完美的，但是 tail 类的添加和删除到目前为止还不起作用。虽然我已经浏览了代码，但似乎没有任何问题。
@Clarice 在控制台中报告了某种错误，您可以分享吗？也许您可以在 break 之前的 if 块中添加一些 console.log 调试语句，以查看属性是否设置正确。请让我知道，以便我可以进一步帮助您。抱歉，我的回复延迟了。
延迟没问题，所以不用担心。当我单击选项卡时，我被告知“tabInfo.tab 未定义”。
@Clarice 你可以为你的代码创建一个 jsfiddle 吗？调试起来会更容易。我觉得您要么没有通过添加'Hazel' 和'Red' 以外的颜色配置来完成tabInfo 的定义。所有选项卡也会发生这种情况吗？您能否提供您正在测试的浏览器和版本？
这是 jsfiddle：link。我为它简化了 css，但正如您所见，无论单击哪个选项卡，tail 类（在悬停时应该可见或不可见）基本上没有任何反应。我正在 Chrome 19、Firefox 6 和 IE 9 上对此进行测试。

【解决方案2】：

这是未经测试的伪代码，因为我不确定如何测试位置部分。我尝试采用面向对象的方法来解决您的问题，将所有选项卡配置移动到对象中。

var tabs = [{
    "id": "#tab1",
    "color": "hazel",
    "removeTabIds": "#tab1,#tab2,#tab3,#tab4",
    "removeClasses": "r p c",
    "addClasses": "h",
    "removeTailIds": "#tab2",
    "addTailIds": "#tab3 #tab4"
}, { //Other tab configs go here ...
}];

$(document).ready(function(){
    var loc = window.location.href;
    var tab = getTab(loc);
    changeClasses(tab);
});

function getTab(loc){
    for (var i = 0; i < tabs.length; i++) {
        if (/tabs[i].color/.test(loc)) {
            return tab[i];
        }
    }
};

function changeClasses(tab){
    $(tab.removeTabIds).removeClass(tab.removeClasses).addClass(tab.addClasses);
    $(tab.removeTailIds).removeClass("tail");
    $(tab.addTailIds).addClass("tail");
};

function bindTab(tab){
    $(tab.id).click(function(){
        $(window).bind("hashchange", function(){
            var loc = window.location.href;
            var tab = getTab(loc);
            changeClasses(tab);
        });
    });
}

【讨论】：