9

Ok So I know it always depends on the situation but I have, thus far, combined my jquery files/plugins into a single compressed file.

Now I am wondering what I should do with my page specific js/jQuery code. Should I have a single file with one Document.Ready function and my entires sites js code inside of it? Or split it up into seperate js files per page with a document ready call in each?

These files will inclide things such as .Click handlers and other jquery code specific to certain pages.

Whats the best practice here to optimize load times and maintainabilty?

Improve this question

4 Answers 4

Reset to default
8

One way to do it would be to use require.js and then have an array with files and page types. Give each body tag an ID and use it to reference what files should be loaded in.

<body id="pageName">

Keep your global files everything you need for the core functionality to work and then lazy load in the features that aren't required for your site to run faster. I've seen huge speed improvements from this technique.

http://requirejs.org/

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

5 Comments

very interesting. I will look into this for sure
I havent taken the time to check this out yet, but is this technique easily applied if I am using ASP.NET MVC3
Hi stephen , if you are using asp.net mvc3 its very easy , you can aggregate and group them very easily.
hi stehen , see....this link asp.net/ajaxlibrary/…
keep in mind that you can accomplish the same with head.js headjs.com though head.jshas much more options integrated.
2

We can do this in multiple ways , i did in the following way.

Aggregate your files broadylyas following

1) Aggregate all the files required for all the pages 2) aggregate the pages specific to the page.

Include all the common aggregated file for all the pages , and include other aggregated files conditionally on the page

1) jquery and other plugins common to all pages so // it will go to all files 2) homepage-aggregation /// for homepage 3) gallerypage-aggregation // for gallery page.

If you include the same file for all the pages ,it may not necessary for all the files.

I did it recently , let me know if you need anything else

Improve this answer

Comments

2

Because you're almost certain to want to have different things executed in the Document.Ready function depending on what page you're on I don't think that having one function that is executed on every page is helpful.

Personally I mix my $.ready calls in with my HTML. These are simple calls to functions stored in a single, minimizing javascript file so don't take up too many bytes, and prevent the need for a separate Javascript file per page. It also allows me to initiate the Javascript where I create the markup, so it's all in one place.

If you're minimizing your javascript and serving it with the correct headers you've got most of the benefits already, don't compromise readability more than you have to.

Improve this answer

4 Comments

I was under the assumtption that inline js was not preferred due to being unable to compress it. If i'm wrong then that makes my life much easier
My current web application does in fact use a single, universal, identical file for all pages. The code uses simple jQuery selectors (carefully written) to find "features" in the pages, and it all works fine. It's easier to maintain pages because they don't need to "know" what they need script-wise, because everything's always there.
@stephen776 inline JS is generally deprecated as it's "obtrusive", and because it inherently isn't cached unless the pages are cached (not always possible with most server-side application frameworks, which construct pages dynamically).
Well, you certainly shouldn't be putting functions definitions inline, but I think avoiding even tiny bits of inline javascript is a bit silly. If you've determined that the downloading of your HTML is the slowest part of your page then you can look at avoiding them, if not then focus on the slow bits first!
1

It also depends on the server side technology you are using. You may find tools to assist you on this task. If you are coding a Java server side, you may try JAWR. It allows the creation of separated JS/CSS files, merging and compressing them server-side, turning all the separate files into a single file.

About Document.Ready, I prefer to keep specific code page in separate files, avoiding incorrect code execution and behavior. It is also cleaner and easier to maintain.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.