Binding javascript: inline or external (or script)

Question

I have a web application where a lot of inline javascript is used. For example:

<input type="button" id="btn1" onclick="return test();">

I want to separate javascript code from the UI by placing it in a separate file or inside the script tag. Including javascript event attachment. For example instead of the above I'd have:

<input type="button" id="btn1">

and in the script section I'd us:

<script type="text/javascript>
    btn1.onclick = function() {         
                 test();
    }
</script>

or

<script type="text/javascript>      
    if (btn1.addEventListener){ 
        btn1.addEventListener('click', test, false);
    }else if (btn1.attachEvent){       
        btn1.attachEvent('onclick', test );
    }
</script>

Why do I want to do that? I like separating my UI from the business logic and database, that's my general approach. Also it is better from performance standpoint, as external javascript can be easier cached by browsers. Another reason - it is more secure. My question is whether this is worth the hassle of changing the application, removing all the inline javascript?

I'd appreciate if someone gave me some pointers, some links to articles - I have been searching the web and found some conflicting information. Would appreciate to hear some opinions

I think you've answered your own question. But, I would say: yes, it's worth the hassle. It's easier to maintain/cleaner, too. — Hatchet, Jan 28 '16 at 19:56
As far as ease of maintenance, if my function is inside a script tag on the page, wouldn't it make a very little difference in terms of maintenance if it is bound in code vs inline? — Coding Duchess, Jan 28 '16 at 19:59
If you're doing all the development alone, and only small projects, it doesn't matter. But just think about 1M - 2M of JS code scattered all over the HTML markup, what a mess ... — Teemu, Jan 28 '16 at 20:10
That's how I feel! But we are limited in time, that's the issue — Coding Duchess, Jan 28 '16 at 20:29

score -1 · Answer 1 · edited May 23 '17 at 12:23

-1

From the maintenance point of view is much easier to have at least two separate files: html and js. After that you can have a separation between UI, business logic and data. You can check this question for more information on design patterns.

edited May 23 '17 at 12:23

Community

1
1

answered Jan 28 '16 at 20:05

Ionut

1,729
4
23
50

could you please expand on that? if my function is inside a script tag on the page, wouldn't it make a very little difference in terms of maintenance if it is bound in code vs inline? – Coding Duchess Jan 28 '16 at 20:47
It all depends on the app size and complexity. If the code is just a few hundred lines of code you can put you js inside a script tag, it won't make much difference. But if you have much more code is much easier to make future modification if the code is well structured and even using a architectural pattern. You have to consider that you or someone else has to read and easily understand the whole code in order to be able to modify it. – Ionut Jan 29 '16 at 02:39

score -1 · Answer 2 · answered Jan 28 '16 at 20:21

I'm fully in favor of separating JS code from markup, mostly for maintenance reasons and clarity of intent. As you pointed out, it's also better from a caching perspective.

I would go one step further and suggest that you would also benefit from a framework (pick your poison, there are plenty of good options, but jQuery is a good place to start as it's very well documented and handles a lot of the boilerplate stuff like your example has (browser differences, etc).

All that said, one part of your question made me curious. In what way do you think having javascript in a separate file will make your pages more secure?

Binding javascript: inline or external (or script)

2 Answers2