JSANCategory: Programming, Web Design | Leave a Comment |
4 09 2005 |
JSAN is another javascript library that I’ve just started using. It has several features, but the one I like the most so far is the ability to setup, essentially, classpaths and import other javascript objects without having to use script includes in the the actual html document. I’ll try to explain with an example. Let’s say that you have 4 javascript files that you are using on a specific page. You have some AjaxUtils.js file, a XMLUtils.js file, a MyObject.js file that uses both the previous javascript files, and a page scoped page.js file. Without using JSAN you would have to have something like this in your html file:
<html>
<head>
<title>Page</title>
<script type=”text/javascript” src=”js/AjaxUtils.js”></script>
<script type=”text/javascript” src=”js/XMLUtils.js”></script>
<script type=”text/javascript” src=”js/MyObject.js”></script>
<script type=”text/javascript” src=”js/page.js”<>/script>
</head>
<body>…</body>
</html>
You will have to take care in making sure that the order is correct so that any js object or file that uses a previous is further down in the list. Well with JSAN you would essentially have this:
<html>
<head>
<title>Page</title>
<script type=”text/javascript” src=”js/JSAN.js”></script>
<script type=”text/javascript” src=”js/page.js”></script>
</head>
<body>…</body>
</html>
Then in your page.js file you would have this at the top:
JSAN.addRepository(‘js’);
JSAN.use(‘MyObject’);
And in MyObject.js you would have this at the top:
JSAN.use(‘AjaxUtils.js’);
JSAN.use(‘XMLUtils.js’);
Basically if you are thinking in terms of Java, think of the addRepository method as adding a classpath entry. In this case we are adding the root javascript directory in relation to the html page. Then think of the use methods as imports. You can see from the js that the page.js file uses the MyObject.js file and MyObject.js uses the AjaxUtils.js and XMLUtils.js files. Note: JSAN doesn’t work with non-modular javascript files. In other words in AjaxUtils.js there should be a root AjaxUtils js class and in XMLUtils.js there should be a root XMLUtils js class, but that is all that is required. Also lets say you want to package common js files together, therefore you could create a directory under js named xml and put the AjaxUtils.js and XMLUtils.js files under it and then maybe create a domain directory and put MyObject.js under it. Then all you would need to do to reference the newly positioned files would be to prepend it’s package with a ‘.’, for example:
JSAN.use(‘xml.AjaxUtils.js’);
JSAN.use(‘xml.XMLUtils.js’);
JSAN.use(‘domain.MyObject’);
Just think of the possiblities. Basically you have come much closer to a true programming language by adding a structure and way to easily organize your javascript objects without having to worry about order or referencing everything in the html file. Pretty nice, eh?
