Question

I’m building offline application with phonegap + jqm. All app pages are in separate files. Sample of my page file structure.

<div data-role="page" id="page2">
   <script type="text/javascript">
       ... Necessary javascript to create page content ...
   </script>

   <div data-role="header"><h3>Header</h3></div>
   <div data-role="content">Content</div>
   <div data-role="footer"><h3>Footer</h3></div>
</div>

Is it good way to write js code inline with page markup? To me, it is clear and convenient. I see and can write all necessary code for current page. I don’t want write all code responsible for creating page content in just one file than to include in header.
So, is it OK?

Answer 1

Functionally the end result is the same whether your JavaScript is inline on the page or whether you link to it, so you can if you want just place all your JavaScript inline.

That said It’s generally a good idea to separate your code from your markup, doing so helps to keep things more structured and makes it easier to reuse code. For example in your case you can have a page specific JavaScript file for each of your pages, as well as some JavaScript files each containing code that might apply to more then one page which you can now easily reuse in any one of your pages by linking to it.

The fact the your app is offline shouldn’t really make any difference as far as the benefits of separating your JavaScript goes.

I don’t want write all code responsible for creating page content in
just one file than to include in header.

Two things, first there is no reason to keep all the code in one file, use as many as necessary (in a regular web page you might want to combine them before publishing but since this is a offline phonegap application i don’t think it makes a difference. Second it’s generally considered good practice to place your JavaScript files on the bottom of your page so it doesn’t block the rest of the page from loading.