Javascript/Jquery - 不要重复自己

Question

我在互联网上看过这么多次.人们说不要在编程语言中重复自己.我为我的网页编写了这个脚本,但我重复了一遍.

这真的很重要吗？

我应该做一个功能吗？

我该怎么做？

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？是否最好将函数放在脚本的开头或结尾？

Answer 1

您可以构建这样的函数,并将其称为:

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

Answer 2

"这是一件大事吗？"

• 只要一切正常,这不是什么大问题.
• 如果出现故障或者您必须更改/添加某些功能,这是一个大问题.
• 如果它是你自己处理的一小段代码,这不是什么大问题
• 如果其他人需要使用您的代码并且将来会扩展它,这是一个大问题.

Personaly我认为,如果你在截止日期之后几个小时,并且需要尽快发布内容,你可以保持凌乱和冗余的代码 - 但前提是它会被重构.问题是,一旦代码发布,没有人会查看并重构它,除非它被破坏或产生错误.

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