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

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

Answer 3

这是软件工程的基础之一。如果任务必须进行两次，则必须自动化。在那里你有一个模式可以放在一个函数或类方法中，具体取决于使用的上下文。我可以举一个这样一个函数的例子，但如果没有在执行上下文中仔细考虑过这个函数，那就不是一个好例子。

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

有很多不同的方法可以做到这一点（你可以在这里看到不同的答案），我很确定它们都不适合你的用法。您可能更喜欢创建一个具有一个或多个方法的类，因此您可以采用不同的方式来执行您的函数，或创建一个新的事件或其他我现在不想到的事情...

休息一下，仔细查看您的代码，以及未来潜在改进所需的内容，以便您今天撰写的内容明天不会受到影响。

Answer 4

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

Answer 5

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

<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>

Answer 6

您可以编写类似这样的内容，完全可扩展：

（仅定义了活动的，禁用的变量，因此这实际上在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);
    }    
}

Javascript / Jquery - 不要重复自己

6 个答案: