Question

Does anyone have a suggestion regarding tidying up the following code:

/* Example code only to demonstrate the type of code my app contains and 
will contain more of */

$("#filter").click(function()
{
    if($(this).attr("value") != "" && $(this).attr("value").length > charLimit)
        filterable($(this).attr("value"))
});

$("#filter").keyup(function()
{
    if($(this).attr("value") == "" || $(this).attr("value").length <= charLimit)
    {
        $('.alphablock').show(300);
        $('.filterable a').removeClass("selected");
    }
});

$('.slidingForm fieldset').hide();

$('.slidingForm fieldset:first').find(':input:first').focus();

/* Snip More Code */

Basically I end up with lots of code for each of my elements, this is just a sea of stuff, this works, but it’s only going to get larger and harder to maintain and develop for.

I know PHP well and I would usually resort to classes to keep code in maintainable blocks. But I am unsure of the best approach for jQuery and general javascript functionality which is used completely differently as it’s less procedural and functions can be called at any moment depending on user interaction.

Thanks
Jake

Answer 1

Try using one of the Javascript frameworks, like Backbone.js, AngularJS to organize code in Model-View-Controller way.