dimanche 7 août 2016

I KISS (Keep it simple, Stupid) but can this JavaScript structure be improved?

I have done the following:

  • Put all event handlers inside jQuery DOM ready to ensure all events will only run
  • Define var selector on top of events for caching

Please see comments below for what I consider to be the problem

$(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){}

I've posted a small amount of code, but please help me imagine what if I have too many searches, fields and links having the same functionality but diff parameter?

I'm thinking about OOP or a design pattern for this. But no way, (I think for now). Please encourage me or suggest other ways on how to improve this code structure.

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

Aucun commentaire:

Enregistrer un commentaire