2

我在网上看到过很多次了。人们说不要在编程语言中重复自己。我为我的网页编写了这个脚本，但我重复了很多次。

真的有那么大的事吗？

我应该做一个功能吗？

我该怎么做？

var active = '.teachers';
var disabled = '.teacher-link';
var width = $('.teachers .staff-outer-container').children().size() * 180;
$('.staff-outer-container').css('width', width + 'px');

$('.teacher-link').click(function() {
    if (active != '.teachers') {
        $(active).hide();
        active = '.teachers';
        $(active).show();
        width = $('.teachers .staff-outer-container').children().size() * 180;
        $('.teachers .staff-outer-container').css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text('Teachers');
    }
});
$('.admin-link').click(function() {
    if (active != '.administrators') {
        $(active).hide();
        active = '.administrators';
        $(active).show();
        width = $('.administrators .staff-outer-container').children().size() * 180;
        $('.administrators .staff-outer-container').css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text('Administrators');
    }
});
$('.support-link').click(function() {
    if (active != '.support') {
        $(active).hide();
        active = '.support';
        $(active).show();
        width = $('.support .staff-outer-container').children().size() * 180;
        $('.support .staff-outer-container').css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text('Support Staff');
    }
});

编辑 感谢大家的投入！我对如何实现这些功能感到困惑。这就是我得到的：$('.teacher-link').click(handle_click('.teachers', 'Teachers'));我试过了，但没有用。另外我在哪里放置功能？我把它放在里面还是外面$(document).ready？最好将函数放在脚本的开头还是结尾？

4

6 回答 6

9

您可以像这样构建一个函数，并将其称为：

  • handle_click('.teachers', 'Teachers');
  • handle_click('.adminstrators', 'Administrators');
  • 等等

功能：

function handle_click(target, target_text) {
    if (active != target) {
        $(active).hide();
        active = target;
        $(active).show();
        width = $(target + ' .staff-outer-container').children().size() * 180;
        $(target + ' .staff-outer-container').css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text(target_text);
    }
}
于 2013-05-31T13:04:01.650 回答
5

“有那么大吗”？

  • 只要一切正常，这没什么大不了的。
  • 如果出现故障或您必须更改/添加一些功能，这将是一件大事。
  • 如果它是您自己处理的一小段代码，这没什么大不了的
  • 如果其他人需要使用您的代码，这将是一件大事，并且将来会对其进行扩展。

就我个人而言，我认为如果您在截止日期之后几个小时并且需要尽快发布内容，那么您可以保留混乱和冗余的代码 - 但前提是之后对其进行重构。问题是，一旦代码发布，可能没有人会查看并重构它，除非它被破坏或产生错误。

看看你的代码——如果有人决定一个新特性将生成动态对象并使用这些函数处理它们，使用循环和其他东西怎么办？使用您的代码这是不可能的，毕竟您需要使其自动化。那么为什么不首先让它正确呢？我认为如果发生不好的事情，使代码自动化将比修复它花费更少的时间。

于 2013-05-31T13:05:02.103 回答
2

这是软件工程的基础之一。如果一项任务必须执行两次，则必须将其自动化。根据使用的上下文，您可以得到一个可以放入函数或类方法中的模式。我可以给你一个这样的函数的例子，但这不是一个很好的例子，如果没有在执行上下文中彻底考虑这一点。

function link_click(linkClass, targetClass, text) {
    $(linkClass).click(function() {
        if (active != targetClass) {
            $(active).hide();
            active = targetClass;
            $(active).show();
            width = $(linkClass + ' .staff-outer-container').children().size() * 180;
            $(linkClass + ' .staff-outer-container').css('width', width + 'px');
            $(disabled).removeClass('active').addClass('clickable');
            disabled = this;
            $(disabled).removeClass('clickable').addClass('active');
            $('#type').text(text);
        }
});

有很多不同的方法可以做到这一点（正如您在此处的不同答案中看到的那样），我很确定它们都不完全适合您的使用。您可能更喜欢为此目的创建一个具有一个或多个方法的类，因此您可以采用不同的方式来执行您的函数，或者创建一个新事件或其他我现在没有想到的东西......

休息一下，看看你的代码，看看你需要什么来进行潜在的改进，这样你今天写的东西就不会妨碍明天。

于 2013-05-31T13:03:59.280 回答
2 
function switchActive(tag,name)
{
    if (active != tag) {
        $(active).hide();
        active = tag;
        $(active).show();
        width = $(tag+' .staff-outer-container').children().size() * 180;
        $(tag+' .staff-outer-container').css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text(name);
    }
}
$('.teacher-link').click(function(){switchActive('.teacher','Teachers');});
$('.admin-link').click(function(){switchActive('.administrators','Administrators');});
$('.suppport-link').click(function(){switchActive('.support','Support Staff');});
于 2013-05-31T13:05:25.727 回答
1

你做得很好。但是，您可以提高您的代码的生产力和可重用性。这不是一个好的解决方案，但它会帮助你一些想法。

<script>

    $(function(){

        $('.tab-link').click(function() {
            if($(this).hasClass("active") == false) {

                var target = $( $(this).attr("href") );

                $(".tab-section").hide();
                target.show();

                $(".tab-link").removeClass("active").addClass("clickable");
                $(this).removeClass("clickable").addClass("active");

                var container = target.find("staff-outer-container");
                var width = container.children().size() * 180;
                container.css("width", width + "px");

                $("#type").text($(this).html());
            }
        });
    });
</script>

<a class="tab-link" href="#staff-teacher">Teachers</a>
<a class="tab-link" href="#staff-admin">Administrators</a>
<a class="tab-link" href="#staff-support">Support Staff</a>

<h1 id="type">Teachers</h1>

<div id="staff-teacher" class="tab-section">
    <div class="staff-outer-container">
        #Teacher List
    </div>
</div>
<div id="staff-admin" class="tab-section">
    <div class="staff-outer-container">
        #Admin List
    </div>
</div>
<div id="staff-support" class="tab-section">
    <div class="staff-outer-container">
        #Staff List
    </div>
</div>
于 2013-05-31T13:30:01.190 回答
0

你可以写这样的东西，完全可扩展：

（只定义了活动的，禁用的变量，所以这实际上在 jsfiddle 中有效）

jsfiddle：http: //jsfiddle.net/8RaXv/2/

var active=document.getElementById('active'),
    disabled=document.getElementById('disabled'),
    teacher = {
        $link: $('.teacher-link'),
        selector: '.teachers',
        text: 'Teachers'
    },admin = {
        $link: $('.admin-link'),
        selector: '.administrators',
        text: 'Administrators'
    },support = {
        $link: $('.support-link'),
        selector: '.support',
        text: 'Support Staff'
    };

bindHandler([teacher, admin, support]);

//bind handlers
function bindHandler(items) {
    for (var i in items) {
        items[i].$link.on('click', items[i], clickHandler);
    }
}

//generic handler
function clickHandler(event) {
    var context = event.data;
    if (active !== context.selector) {
        $(active).hide();
        active = context.selector;
        $(active).show();
        var $container = $(context.selector + ' .staff-outer-container');
        width = $container.children().size() * 180;
        $container.css('width', width + 'px');
        $(disabled).removeClass('active').addClass('clickable');
        disabled = this;
        $(disabled).removeClass('clickable').addClass('active');
        $('#type').text(context.text);
    }    
}
于 2013-05-31T13:15:32.470 回答