Avoid unnecessary javascript fn and css
February 12th, 2008 Filed Under CSS, Javascript, Thinking Out Loud, Tips & Tricks
One day I got this idea of holding back the javascript functions and css selectors and pushing the only required ones.
Comments are always invited .
We always have a problem of unnecessary things for a page… we then separate the js files for the specific pages. We also have a global js which is common for all the pages. Same thing goes with the css files.
But after doing this somewhere down the line we always miss the whole purpose some or the other way and eventually our global file piles up like anything as we start sharing some functionality from one page to another. So the js and css both becomes the culprit to pile up the page size.
I was just thinking if we can do the following:
Have a config file which lists down each of the pages… I ll take for example the main page and one internal page:
Write all your Js and Css in only a single file… maybe its a config file or a jsp … doesn’t matter:
The config file… lets say(jsLib) contains all the functions in the following format:
<!–JSGroupStart:Global–>
<!–START:loggedIn–>
function loggedIn(args)
{
function body goes here
}
<!–END:loggedIn–>
<!–START:loggedOut–>
function loggedOut(args)
{
function body goes here
}
<!–END:loggedOut–>
<!–START:signIn–>
function signIn(args)
{
function body goes here
}
<!–END:signIn–>
<!–START:signOut–>
function signOut(args)
{
function body goes here
}
<!–END:signOut–>
<!–JSGroupEnd:Global–>
/*—————— INDIVIDUAL PAGES ——————-*/
<!–JSGroupStart:individual–>
<!–START:pagination, USEDBY:pageID[1,13,14,16,80] –>
function pagination(args)
{
function body goes here
}
<!–END:pagination–>
<!–START:countWishlist, USEDBY:pageID[1,10,12,16,80] –>
function pagination(args)
{
function body goes here
}
<!–END:pagination–>
<!–JSGroupEnd:individual–>
/*****************************************************
MAIN PAGE
*****************************************************/
<!doctype html public “-//w3c//dtd html 4.0 transitional//en”>
<html>
<head>
<title> new document </title>
<meta name=”description” content=”">
<script src=”../js/scripts.do?pageId=1″ type=”text/javascript”></script>
</head>
<body>
</body>
</html>
/*****************************************************
SOME INTERNAL PAGE
*****************************************************/
<!doctype html public “-//w3c//dtd html 4.0 transitional//en”>
<html>
<head>
<title> new document </title>
<meta name=”description” content=”">
<script src=”../js/scripts.do?pageId=16″ type=”text/javascript”></script>
</head>
<body>
</body>
</html>
Here scripts.do will be a servlet which will read the functions based upon the metadata written around the functions in the aforesaid config file and spit according to the pageId. A single pageId is not a unique id for a page. Similar pages can share the same pageId.
This way a page only has one script file which is internal… the other external js calls can be combined as a part of the script inclusion tag separately.
This will be a clean call and no confusion about having unnecessary code being pushed to a page.
The same way CSS calls can be configured and be used.
THE RESULT: LIGHTER PAGES AND HAVE EXACTLY WHAT IS NEEDED …
This is just a rough thought of doing something for taking away the unnecessary burdens from the pages. So if anyone wants to add something to this, please feel free. Its an open forum.
Post Linx
Permalink | Trackback |
|
Print This Article |
Comments
Leave a Reply