My web application uses allot of javascript, and in the javascript I have messages that I report back to the user.
What is the best way to extract the text from my javascript and store it externally in another .js language file, and how would I reference it in my js code going forward?
Any best practices for this?
Create an object literal:
var messages = {
welcome: "Welcome",
goodbye: "Goodbye",
error: "Something bad happend. Sowwy!"
};
Which you can then reference, like so:
if (error) alert(messages.error);
This works great if you want to implement multiple languages. What I usually do is include a server-side file which renders out a "messages" object according to whatever language is selected in the configuration of the app or according to the UI-culture (in the case of ASP.NET).
Here's how you would use it, in-line:
<head>
<!-- messages.aspx renders out the object literal -->
<script type="text/javascript" src="messages.aspx"></script>
<script type="text/javascript">
/* when messages.aspx is included it provides you with an object literal
as a global variable. The example below would alert "Something bad
happend. Sowwy!" */
if (error) alert(messages.error);
</script>
</head>
The neat thing about using an object literal, is that the code is more verbose. Instead of using an array, like this: alert(messages[0]) you do this: alert(messages.error) which is a bit more explanatory.
On a side-note: all your messages are defined in one object, instead of being defined by a bunch of variables, thereby avoiding polluting the global namespace.
In JavaScript you can modify objects at run-time. So if you wanted to add more messages to the object, later on in your code, you'd just do this:
messages.newMessageAddedLaterOnInTheCode = "This is a new message";
One way to do it is have a separate js include in your page that actually points to a server-side script. This script can then echo out the strings you need like this:
var STRINGS = {'greeting': "Hello", 'error': "Something went wrong"};
And in your webpage have this:
We do this for http://addons.mozilla.org here: http://addons.mozilla.org/en-US/firefox/pages/js_constants.js
I see the others have told you how to store it in a JS file (as you asked). But might I suggest that you store it in an XML file, instead? It's somewhat easier to manage (IMO).
Create an XML file, with entries like this:
<text id="welcome_to_site">Welcome to our site!</text>
<text id="come_back_soon">Come back soon!</text>
Then you can easily grab all of the text you need in your regular JS/jQuery:
var text = new Object();
$.ajax({
async: false,
type: 'GET',
url: 'text.xml',
dataType: "xml",
success: function(xml){
$(xml).find('text').each(function(){
text[$(this).attr('id')] = $(this).text();
});
}
});
And to invoke some text, it's as simple as this:
alert(text['welcome_to_site']);
And you can always easily change it in the XML file: add text, remove text, edit text. It's very simple. It also helps to separate your design and opens doors for you to allow others to edit text, who might otherwise not be able to if they had to sort through a bunch of JavaScript.