Ich KISS (Keep it simple, Stupid) aber kann diese JavaScript-Struktur verbessert werden?

Question

Ich habe folgendes getan:

• Legen Sie alle Event-Handler innerhalb jQuery DOM bereit alle Ereignisse um sicherzustellen, dass nur für das Caching

Bitte sehen

definieren var Wähler oben auf Ereignisse laufen Kommentare unten für das, was ich als das Problem betrachte

$(document).ready(){ 
    var searchCountry1 = $("#searchCountry1"); 
    var linkCountry1 = $("#linkCountry1"); 
    var codeCountry1 = $("[name='codeCountry1']"); 

    //worst part here is if I have 10 searches,links, and codes. is it worst? 
    // and for every event I have this : 
    searchCountry1.click(function(){ 
    //get json or open another search window 
    }); 

    codeCountry1.keypress(function() { 
      codeCountry1.val(""); 
     //or clear all other related fields(city or state) to reset 
    }); 

    $linkCountry1.click(function(){}); 
      //call redirect 
    }); 

    function redirect(codeval,url){} 

Ich habe eine kleine Menge veröffentlicht Code, aber bitte helfen Sie mir vorstellen, was ist, wenn ich zu viele Suchen, Felder und Links mit der gleichen Funktionalität aber diff Parameter habe?

Ich denke über OOP oder ein Design-Muster dafür nach. Aber auf keinen Fall (ich denke für jetzt). Bitte ermutigen Sie mich oder schlagen Sie andere Wege vor, wie Sie diese Code-Struktur verbessern können.

<input name="codeCountry1" /><br /> 
<input type="button" id="searchCountry1" /><br /> 
<a id="linkCountry1" href="#"><a/><br /> 
<input name="codeState1" /><br /> 
<input type="button" id="searchState1" /><br /> 
<a id="linkState1" href="#"><a/><br /> 
<input name="codeCity1" /><br /> 
<input type="button" id="searchCity1" /><br /> 
<a id="linkCity1" href="#"><a/><br /> 
<input name="codeOther1" /><br /> 
<input type="button" id="searchOther1" /><br /> 
<a id="linkOther1" href="#"><a/><br /> 
<input name="codeOther2" /><br /> 
<input type="button" id="searchOther2" /><br /> 
<a id="linkOther2" href="#"><a/><br /> 

Answer 1

Es ist offensichtlich, dass Sie dieselben Handler auf alle Ihre Kinder verwenden müssen, die diese Ereignisse generieren.

Einer der nützlichste Feature im Browser ist Event Bubbling

Ich ziehe sie etwas nicht Klassen verwenden, die nicht mit Styling verbunden ist. Ich benutze Datenattribute.

So müssen Sie Ihre Kinder wickeln (wenn es noch nicht gewickelt wird), und geben Sie jedem Kinder einige Daten Attribut, das zeigt, was Handler zu verwenden:

<div data-role="wrapper"> 
    <input name="codeCountry1" data-action="clear" data-role="country"/><br /> 
    <input type="button" id="searchCountry1" data-action="search" data-role="country" /><br /> 
    <a id="linkCountry1" href="#" data-action="redirect" data-role="country"><a/><br /> 
    <input name="codeState1" /><br /> 
    <input type="button" id="searchState1" /><br /> 
    <a id="linkState1" href="#"><a/><br /> 
    <input name="codeCity1" /><br /> 
    <input type="button" id="searchCity1" /><br /> 
    <a id="linkCity1" href="#"><a/><br /> 
    <input name="codeOther1" /><br /> 
    <input type="button" id="searchOther1" /><br /> 
    <a id="linkOther1" href="#"><a/><br /> 
    <input name="codeOther2" /><br /> 
    <input type="button" id="searchOther2" /><br /> 
    <a id="linkOther2" href="#"><a/><br /> 
</div> 

Und auf der Verpackung an die Kinder Ereignisse hören :

var $wrapper = $('[data-role="wrapper"]'); 
$wrapper.on('click', '[data-action="search"][data-role="country"]', function(e) { 
    console.log(e.target) // child element 
    //get json or open another search window 
}); 
$wrapper.on('click', '[data-action="redirect"][data-role="country"]', function(e) { 
    console.log(e.target) // child element 
    //call redirect 
}); 
$wrapper.on('click', '[data-action="clear"][data-role="country"]', function(e) { 
    console.log(e.target) // child element 
    // from current element got to the wrapper and find all children inside it with something that you need 
    var $other = $(e.target).closest('[data-role="wrapper"]').find('[data-action="clear"]').val(""); 
    //or clear all other related fields(city or state) to reset 
}); 

Dieser Ansatz nicht nur drei Handler für alle Kinder gibt, können Sie auch Kinder entfernen, ohne sich Gedanken über Handler dynamisch hinzufügen oder. Sie können IDs auch von allen Elementen entfernen (wenn Sie die Formularserialisierung nicht benötigen).

Als Nachteil sehen Sie, dass Sie Logik-Schicht in HTML hinzufügen müssen, jedoch wird es immer deutlicher in HTML, was sonst noch auf Klick- oder etwas sein ...

Answer 2

Wenn Sie die logische Strukturen behalten möchten Sie Ihren Markup oder kann oder will nicht ändern, Sie können immer noch Arrays verwenden, um die Lesbarkeit zu verbessern. sammeln Sie einfach alle Ihre Wähler in einem Array und arbeiten auf diesem Array:

jQuery(function($) { 

    var triplets = [ 
     [ "#searchCountry1", "linkCountry1", "[name='codeCountry1']" ], 
     [ "#searchCountry2", "linkCountry2", "[name='codeCountry2']" ], 
     [ "#searchCountry3", "linkCountry3", "[name='codeCountry3']" ] 
    ]; 

    triplets.forEach(function(triplet) { 
     var search = $(triplet[0]); 
     var link = $(triplet[1]); 
     var code = $(triplet[2]); 

     search.on("click", function(e) { 
      // get json or open another search window 
      // use link and/or code in here 
     } 
     code.on("click", function(e) { 
      code.val(""); 
      // or clear all other related fields(city or state) to reset 
     } 
     link.on("click", function(e) { 
      // call redirect 
     }); 
    }); 

    function redirect(codeval, url) { 
     // … 
    } 
}); 

Wenn Sie nichts dagegen haben Ihr Markup Kopf zu berühren für Antwort alexey vorbei und gewinnen Wartbarkeit und Performance.