Javascript / Jquery – 不要重复自己

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

这真的很重要吗？

我应该做一个function吗？

我该怎么做？

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

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

Answer 1

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

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

function：

 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

“这是一件大事吗？”

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

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

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

Answer 3

 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 4

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

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

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

rest一下，整体看看你的代码，你将来需要做些什么来改进，所以你今天写的东西明天就不会受到影响。

Answer 5

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

  Teachers Administrators Support Staff 
Teachers
 
 
 #Teacher List 
 
 
 
 #Admin List 
 
 
 
 #Staff List 
  

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