軌道3幹侵入式JavaScript

我改變一切不顯眼的JavaScript，因爲我覺得它使事情更容易調試等軌道3幹侵入式JavaScript

我有一樣的東西：


$(document).ready(function(){ 

    $('#photos_link').click(function() 
    { 
    select_tab('main', 'photos', $(this)); 
    }); 

    $('#dealership_link').click(function() 
    { 
    select_tab('main', 'dealership', $(this)); 
    }); 

    $('#dealership').hide(); 
});

，你可以看到我有兩個非常相似的結構，我想幹掉它們，有什麼想法？

來源

2011-01-19 daniel

創建ApplicationHelper一個輔助方法（或適當的輔助）：

def select_tab_click_event(tab) 
    js =<<JS 
    $('##{tab}_link').click(function() 
    { 
     select_tab('main', '#{tab}', $(this)); 
    }); 
JS 
    js.html_safe 
end

然後，從您的視圖調用它：

$(document).ready(function(){ 
    <%= select_tab_click_event('photos') %> 
    <%= select_tab_click_event('dealership') %> 
}

來源

2011-01-19 23:41:33 Shaun

這是如何不顯眼？ – daniel 2011-01-20 05:43:11

在非突兀性方面，這與保持表示層與頁面結構分離以及在沒有JavaScript的情況下允許您的功能正常降級有關。既然你的問題問如何幹掉你的代碼，我就把注意力集中在消除重複的同時保持表示層與其他任何東西分開。助手的目的是協助生成視圖，並且我使用助手來做到這一點，同時也消除了代碼中的重複。幫手並不意味着包含商業邏輯。這屬於模型。 – Shaun 2011-01-20 19:13:59

這裏有兩個純JS refactors：

$(document).ready(function(){ 
    $('#photos_link, #dealership_link').click(function(){ 
    select_tab('main', $(this).attr('id').match(/(.*)_link/)[1], $(this)); 
    }); 

    $('#dealership').hide(); 
});

and

$(document).ready(function(){ 
    $.each(['photos', 'dealership'], function(key, value) { 
    $('#' + value + '_link').click(function(){ 
     select_tab('main', value, $(this)); 
    }); 
    }); 

    $('#dealership').hide(); 
});

我個人比較喜歡前者。

來源

2011-01-20 00:16:41 vonconrad

軌道3幹侵入式JavaScript

回答

相關問題