The only answer I can give is to ask another big picture question -- how much data does your JavaScript really need to do its job? Some internal data should probably be stored in session variables, since your users will not need to / should not be able to view or alter that data. Such data as is needed on the client side can be passed in three ways:
- Built into the template on the server side (your
var width = $width example)
- Pulled from query-string parameters or URL fragments (redirect to
your-domain.com/products?id=27 for example and have your script look for that variable and do what it needs to.)
- Have your script make ajax calls to the server and have the server pass back the data it needs.
All three methods are perfectly legitimate -- the only question is, how much work does your JavaScript have to do, and how much do you want to be doing duplicate work on the client and server side?
1 is easiest, but can encourage sloppy JavaScript coding habits (since you can use your server-side templating language to generate reams of code, rather than refactoring the code to fix the problem.
2 is probably quickest, but its complexity grows astronomically as you need to add more features -- and it becomes the most difficult to maintain in the long run unless you have a very good vision of what you want beforehand.
3 is the best, but it is the hardest to implement without creating security holes or doing double work -- once it's done, however, you are more than halfway to a working API.
