CODEWITHSUNDEEP
jqueryhtmlcssuser-interface
Shirow
Shirow

Reputation: 70

Good practices on jQuery GUI development

I'm developing many interfaces, and i'm using jquery to navegate, explore, show the content, load pages and a lot other things.

and i'm seeing my code in something like this:

example:

$(document).ready(function(){
  $("a").click(function(){});
  $(".class").hover(function(){}, function(){});
  //and more and more 
});

I've done a plugin to load my content

plugin:

(function( $ ){
$.fn.navCategoria = function( options ){
    var settings = {};
    if (options) $.extend(settings, options);
    $(settings.target).load(settings.url, {"categoria":settings.categoria, "limit":settings.limit, "offset":settings.offset});
};

})( jQuery );

I have lots of html and each page i have a function:

$(document).ready(function(){}); //my code in there

How can i put all those stuff ( $(document).ready() ) in one place?

I have used this way but i have to call this file in each html page i have and it's not good.

What is good practice for this case?

What do you guys use to do to get your jQuery organized?

Upvotes: 0

Views: 359

Answers (3)

Shirow
Shirow

Reputation: 70

Well, almost one year after this ask, i've been training my JS, playing with Ruby on Rails, and I learn new stuff, tips and tricks about my organization style.

I've developed a InterfaceApplication, follow the link on gist :)

https://gist.github.com/xdougx/5879172

I'm still developing this class, but is very nice for me to use, see how to use:

include in your project, for me in my application.js

//= require app/interface_application

For exemple in my home, I could have many events just like $(".button").click().

Before I used this way:

$(document).ready(function(){
  $(".button").click(function(){
    // do my cool stuff
  });

  // more 23 different events
});

But now I have so far "23 different events in my home". Wow this is so many events, and is so hard to maintain. Well now I can play with this in my IApp. I develop this class for my home events:

var HomeModule = (function(){
    var Home = function(){
      // event #1
      this.my_blue_button = function(){
        // do blue and fanny stuff
      }

      // event #2
      this.my_red_button = function(){
        // do red and nice things
      }

      // Wow more 22 events
    };

    return Home;
  })();

In my app/site/home.html.erb

<script type="text/javascript">
  $(function(){     
    var params = {
      estimate_id:"<%= @estimate.id%>", 
      company_id:"<%= @estimate.company.id%>"
    };

    var modules = { "HomeModule": new HomeModule }
    var app = new IApp;
    app.addModules(modules).run(null, params);
  });
</script>

See, I run my events and i can load many other modules and becoming all my events reusable (if i can), now i can build many features in separated files cleaning up my html!

What do you think? I'll appreciate comments and opinions!

Thank you for being able to share it with you.

Upvotes: 0

Stefano Ortisi
Stefano Ortisi

Reputation: 5326

The best solution is put all your scripts in a separate js, imported in the head section. You'll have a single $(document).ready() function, in which you can distinguish the actual page checking for example the id or a class of your body, maybe with a switch statement:

var idBody = $('body').attr( 'id' );
switch( idBody ){
    case 'home':
         initHome();
    break;
    case 'about':
         initAbout();
    break;
}

Upvotes: 0

manny
manny

Reputation: 1948

Best Practice to me which i am following all my work.

  1. Keep your jquery plugin code separately in .js file and call in header

  2. Keep one $(document).ready(){}); and keep all your events within that and keep this in header section

  3. if non dom ready, you can use onload or just keep bottom of the page to trigger lazily

Better organization will help you to maintain easily.

Upvotes: 1

Related Questions