CODEWITHSUNDEEP
javascriptevent-handlinginline
ArthurGuy
ArthurGuy

Reputation: 1577

Is it ok to use inline javascript for small self contained event handling functions?

I am using events to manage the ui after users log in and out of a website, when a login occurs a login event is published and when a user logs out a logout event is published.

With this system in place I am trying the idea of small inline bits of javascript to deal with the ui elements which subscribe to the events.

At the top of the page is a login/logout link so I am using the following code for changing the login status

<div id="account_panel" class="signed_out">
    <div class="in">
        <a href="/account" class="name"></a> | <a href="/account/signout">Sign-out</a>
    </div>
    <div class="out">
        <a href="/account/signin" class="signin">Sign-in</a> | <a href="/account/register" class="register">Register</a>
    </div>
</div>
<script>
    if (window.jQuery) {
        $('body').on('login.account.website', function(event, data){
            $('#account_panel').removeClass('signed_out').addClass('signed_in');
            if (data)
                jQuery('#account_panel .name').text(data.first_name+' '+data.last_name);
        });
    }
</script>

I have several pieces of code like this, the idea is they are all self contained and do not affect or directly depend on other things, the javascript only relates to the code next to it so it seems sensible to put them together.

The initial state of the html is generated server side to allow the site to function without javascript, a code snipit like this is also contained in its own template file.

I want to carry on using this method for various elements on the site but I am interested to find out if there is a better maintainable method I should be using.

Thanks

Upvotes: 2

Views: 497

Answers (4)

Manse
Manse

Reputation: 38147

In my opinion its fine to use these inline subsections of code for specific tasks just related to the code its with - larger libraries / js files are for more generic code. I use these kinds of sub sections all of the time.

If you are using HTML4 doctype then the type attribute is required on the script tag- see W3C

<script type="text/javascript">
// code here
</script>

Upvotes: 0

japrescott
japrescott

Reputation: 5025

you can do that, but you must keep in mind, that as soon as the html-interpreter sees that javascript, it will immediately stop all rendering of the page, execute the javascript and then continue with the rendering. Thus, its ok for small javascript, that wont' block the rendering in such a way, that the user would notice it (but it is blocking!).

Upvotes: 1

osahyoun
osahyoun

Reputation: 5231

I'd argue this method is difficult to maintain, having to track snippets of code scattered over multiple html documents. Why not keep the code in one place and bind to your events only when certain DOM elements are present:

if (window.jQuery) {
  function whenSignedOut(){
    $('body').on('login.account.website', function(event, data){
       $('#account_panel').removeClass('signed_out').addClass('signed_in');
       if (data)
           jQuery('#account_panel .name').text(data.first_name+' '+data.last_name);
    });
  }

  function whenSignedIn(){  
  }
}

if (window.jQuery) {
  $(document).ready(function(){
    if($('div#account_panel.signed_out').length > 0)) {
      whenSignedOut();
    }

    if($('div#account_panel.signed_in').length > 0)) {
      whenSignedIn();
    }
  });
}

Upvotes: 2

Rick Hoving
Rick Hoving

Reputation: 3575

I think that if you put all these little bits into one js file and comment this in a good way it wil be a lot more clear to see. Because you only have to look in one place for the JavaScript. If you are planning to work together with another person or have another person look at it in the future, definitely put everything into js file(s) that is where the other person will look.

If you're not planning to do this then the point is, what do you want, what do you find the most useful.

Upvotes: 0

Related Questions