Have Geek Brain

What is the use of storing Javascript in external files and in <head>?

I have a CRUD application with Ajax support. If I show a record from my database, it shows the record values ​​for each column, including its primary key.

For Ajax actions bound to buttons on the page, I can customize my calls by printing the id directly in my onclick functions when rendering on the server side HTML. For example, to save changes to a record, I might have a button like this: "123" is the primary key of the record.

<button type="button" onclick="saveRecord('123')">Save</button>

Sometimes I have Javascript pages generating HTML and Javascript. In some of these cases, the primary key is not naturally available at this point in the code. In these cases, I took a shortcut and created buttons like this, taking the primary key from where it is displayed on the screen for visual consumption:

...
<td>Primary Key: </td>
<td><span id="PRIM_KEY">123</span></td>
...
<button type="button" onclick="saveRecord(jQuery('#PRIM_KEY').text())">DoSomething</button>

This definitely works, but it seems wrong to manage database queries based on a text value, which was intended to consume the user rather than consume the method. I could solve this problem by adding a number of additional parameters to various methods to migrate the primary key until eventually needed, but that also seems clunky.

The most natural way to solve this problem is to simply place all the Javascript currently in external files into <head>

pages. This way I could generate custom Javascript methods without having to pass as many parameters.

Aside from readability, I am struggling to understand what is the use of storing Javascript externally. It looks like it makes the already weak marriage between HTML / DOM and Javascript even more distant.

I've seen some people assume that I'm leaving Javascript external, but setting various "custom" variables on the page itself, for example in PHP:

<script type="text/javascript">
var primaryKey = <?php print $primaryKey; ?>;
</script>
<script type="text/javascript" src="my-external-js-file-depending-on-primaryKey-being-set.js"></script>

How is this better than just putting all the Javascript on the page in the first place? There HTML and Javascript are still highly dependent on each other.

+2


source share


4 answers


  • Performance (due to browser caching)
  • Separation of concerns - HTML / CSS / JavaScript should be separate. This makes it easier to work with them. You know exactly where to find certain areas, and other developers can work independently of HTML, CSS and JavaScript independently.
  • Reusability - You can include a source file in multiple locations / projects without duplicate code.


+5


source


one point: the external file can be cached by the browser, the js block in the head is loaded every time the file is loaded.



+7


source


You can YUIC compress your javascript (at build / integration time) if it is in separate files. I have split all my Javascript together (many separate jQuery plugins, etc.) at build time so that there is only one file to fetch / cache.

+2


source


It depends on how much Javascript you generate dynamically on the server side, and how static it is. If these are all dynamically generated, then it doesn't matter where you put them, as each request will pull a new file without caching. Putting it in the head has the advantage of one smaller HTTP request, which is unlikely to benefit unless you are the main concern - performance and bandwidth are not an issue.

But if most of the Javascript is static, keeping it in separate files during development keeps it organized.

Dynamically generated Javascript can be used as separate files rather than being part of the page itself. It will add an extra HTTP call.

<script src="myServerSideScript.php" type="text/javascript"></script>
+1


source






More articles:


All Articles