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

這是sotware工程的基本功能之一。如果任務必須進行兩次，則必須自動化。你有一個可以放入函數或類方法的模式，具體取決於使用的上下文。我可以給你一個這樣的函數的例子，但是這並不是一個好例子，如果沒有在執行環境中徹底的想到這個。

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 3

「是它是這樣一個雙克交易「？

• 只要一切正常，這並不重要。
• 這是一個大問題，如果東西壞了或者你必須改變/添加一些功能。
• 如果它是你自己處理所有代碼的一小段代碼，那麼這不是什麼大問題
• 如果別人需要使用你的代碼並且將來會擴展它，這是一件大事。

Personaly我認爲，如果你是在截止日期之後的幾個小時以及需要儘快發佈的東西，你可以保持凌亂和冗餘的代碼 - 但僅限於後來重構。問題是，可能一旦代碼發佈，沒有人會查找並重構它，除非它被破壞或產生錯誤。

看看你的代碼 - 如果有人決定使用循環和內容來生成動態對象並使用這些函數來處理它們會發生什麼？ 隨着你的代碼這是不可能的，畢竟你需要使它自動。那麼爲什麼不把它放在第一位呢？我認爲，如果發生不好的事情，使代碼自動化會花費更少的時間。

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

你可以寫這樣的事情，完全可擴展的：

（僅定義的活動，殘疾人變量所以實際上在的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); 
    }  
} 

Answer 6

你表現不錯。但是，您可以改進您的代碼，提高生產力和可重用性。這不是一個好的解決方案，但它會幫助你一些想法。

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