How should I integrate some javascript into a php application?

Question

I have a medium size legacy php application with almost no javascript integration. I've recently been learning javascript (yes actually learning it) using Douglas Crockfords excellent book and taken YUI as my library of choice. I've tried out a few things and got a few things working but now I want to integrate the various components etc into my application properly, my question is how to go about doing this for ease of maintenance and code reuse.

Currently the application consists of

• php pages
• smarty templates (html templates with some special template markup) for each section of a page so multiple templates may be used for a single page.
• single css file.

I have the following ideas about how to integrate my javascript into the pages.

1. Write inline javascript in each smarty template with the code required for that section.
2. Write a seperate .js file to go with each smarty template that is linked in and then a single inline script to run it.
3. a seperate .js file for each php page which would have all the functionality required for the entire .php page. A small inline function would call whatever functions were required.
4. Something I havent though of?

Does this make any sense? Does anyone have a good suggestion for this?

Update:

One extra bit of info is that its an internal application, so its not so important to restrict everything to a single file.

Answer 1

Two other options:

1. A single JS file that contains all the JS for your entire site. Depending on your caching settings, you should be able to get the user to download just one file for the entire site and use a cached version for every other page.
2. Divide your JS up according to function, rather than page, and include whatever functionality each page requires. E.g. one page may require tabs, form validation and animation, while another may only require tabs.

Or you can have a hybrid of these: one JS file that contains the vast majority of your code and an extra file if needed for particular pages or templates.

None of the approaches mentioned are wrong (though I'd skip the inline JS one as much as possible); which one is best will depend on your precise situation and your personal preferences.

Answer 2

Firstly, most setups allow a master layout template in which you can place a common page opening or, alternatively, each template includes some global header.

That being said, you should do a combination of 1, 2 and 3:

Have a .js that is included in all templates that contains global functionality. Each template may also optionally have it's own .js specific to that page or section of pages. Finally, if there's tiny amounts of code specific to a page (or must be dynamically generated each time), it won't make sense to initiate another http connection for it so have that source be right in the template.

Answer 3

if you don't have a ton of javascript then create an external js file and include it in the header of the webpages and be done with it.