CODEWITHSUNDEEP
javascript
user339108
user339108

Reputation: 13131

How do you re-use javascript functions

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;">

Upvotes: 4

Views: 1088

Answers (5)

Arseni Mourzenko
Arseni Mourzenko

Reputation: 52371

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.

Upvotes: 2

chriscauley
chriscauley

Reputation: 21091

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.

Upvotes: 0

Eric Mickelsen
Eric Mickelsen

Reputation: 10377

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.

Upvotes: 4

mattbasta
mattbasta

Reputation: 13709

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.

Upvotes: 2

Rebecca Chernoff
Rebecca Chernoff

Reputation: 22635

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.

Upvotes: 5

Related Questions