How do you re-use javascript functions

Question

We have lots of javascript functions, which are usually handled via the onclick function. Currently they are present in every file where-ever it is needed. Would it make sense to consolidate all javascript functions into a single file and use this where-ever it is needed? What is the general practice here

            <s:link view="/User.xhtml"
                onclick="if (confirm('#{messages['label.user.warning']}')) {
                    var f = $('user');
                    f.method = 'POST';
                    f.action = f.submit();
                    } return false;">

Rebecca Chernoff · Accepted Answer · 2010-09-12 15:47:20Z

5

Yes! Absolutely factor this out into an external javascript. Imagine if you needed to change something in this code. How many places do you have to change now? Don't duplicate code. It must makes your page bigger, which obviously affects how much is getting downloaded.

answered Sep 12, 2010 at 15:47

Rebecca Chernoff

22.7k5 gold badges47 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eric Mickelsen · Accepted Answer · 2010-09-12 15:55:02Z

It's up to you to determine where the reusability lies in your own code. But it's easy enough (and a good idea) to create a library of often-used functions. Create a file like mylib.js, for instance, with things like...

function saveUser(f)
{
    //...
    f.method = 'POST';
    f.action = f.submit();
}

add this to your pages:

<script type="text/javascript" src="mylib.js"></script>

add code your events like this:

<s:link view="/User.xhtml" onclick="return saveUser($('user'));">

Notice that the library code avoids any dependencies on the layout or naming of elements on the pages that use it. You may also want to leave little comments that will remind your future self what the purpose and assumptions of these library functions are.

mattbasta · Accepted Answer · 2010-09-12 15:47:52Z

2

Would it make sense to consolidate all javascript functions into a single file and use this where-ever it is needed?

Ummm...yeah

It would be better to do something like this:

function saveUser() {
   // logic goes here
}

and use the markup

<s:link view="..." onclick="saveUser();">

Using code inline like that is very bad. Don't do it. Or the prorgamming gods will grow restless.

answered Sep 12, 2010 at 15:47

mattbasta

13.8k10 gold badges50 silver badges70 bronze badges

2 Comments

user339108 Over a year ago

just curious to know what the best practices are here, I don't have much knowledge on javascript.

Rich Bradshaw Over a year ago

Even using onClick is bad practice in my opinion - bind the events using listeners.

Arseni Mourzenko · Accepted Answer · 2010-09-12 16:05:37Z

It is always a good idea to put JavaScript code in JavaScript files. Like you don't mix content and presentation (XHTML and CSS), you don't have to mix content and interactivity (XHTML and JavaScript).

Putting JavaScript code in a separate file has several advantages:

No need to duplicate code (so better reuse),
Possibility to minify the source code, thing which is quite impossible to do if you put together XHTML and JavaScript,
Ability to use non-intrusive JavaScript, helping to create more accessible websites (there is probably nothing wrong from the accessibility point to use onclick and other events, but it becomes very easy to forget that the website must work without JavaScript, thus developing a non-accessible website).
Better client-side performance: larger pages make things slower; when you put JavaScript outside, the pages are smaller, and the .js file is cached by the browser instead of being loaded on every request.

chriscauley · Accepted Answer · 2010-09-12 16:01:13Z

Javascript can be accessed via a script tag, which can point to an external script or define it for use in this document only.

<script type="text/javascript" src="mycustom.js"></script>

<!-- OR -->
<script type="text/javascript">
function saveUser(username) {
    //code
}
</script>

No offense, but if you didn't know that you are either very new at this or you skipped a lot of steps in learning javascript. I recommend going through the w3schools.com tutorial on javascript and anything else you'll be using.

Collectives™ on Stack Overflow

How do you re-use javascript functions

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Related