How to structure Javascript with Browserify and page specific documentReady functions

0
votes

I'm working on a NodeJS web project and I'm using browserify as my dependency loader. For now I have one single file app.js where I'm defining all my browser functions, and a grunt process for "browserifing" it into app-bundle.js

I'm looking for suggestions for structuring js into different files (not strictly related to browserify).

My idea is to keep using one main js (app.js > app-bundle.js ) file included in all my pages and inside it I require all the other secondary files (eg ui.js,common.js, page1.js, page2.js etc.)

My biggest doubt is about page specific functions, let's say I have a function to initiate an image gallery initGallery() that has to be called on documentReady only on one of my pages.

How should I structure my js to call this function just on the page who requires it?

1
javascriptbrowserify
Why not create page-specific bundles then? - elad.chen
Because on that case I should have a different <scrip src=".."> on every page. I think it would be great to include just one js bundle for all the site pages. - MQ87
It's not very efficient to load unnecessary code into all pages.. - elad.chen

1 Answers

0
votes

You can put the common dependencies in a bundle that exposes them (see b.require(..., {expose: ...})) and load that and a script specific to each page. See also factor-bundle.