In organizing my rather large application, I have structured it as follows:
css
-- contains all css files
images
-- contains all image files
js
controller.js -- handles page events and element actions, also includes PhoneGap specific methods
core
forms.js -- manages form functionality and info saving
mobile.js -- defines basic elements, handles AJAX communications
encrypt.js -- deals with encryption
global.js -- provides helper functions
storage.js -- acts as a database storage wrapper
cw
client.js -- a complex client object with over 400 lines of JavaScript code
Objects.js -- includes other necessary objects with less than 50 lines of code each
question.js -- a detailed question object with over 500 lines of code
service.js -- a comprehensive service object with over 700 lines of code
jq
jquery-ui.min.js
jquery.min.js
jquery.mobile.min.js
phonegap-1.1.0.js
add_client.html
clients.html
client_list.html
index.html -- the only complete HTML file
manager.html
schedule.html
service.html
Except for index.html, all other .html files serve as placeholders. They include
<div data-role='page'></div>
and essential html elements defining the page's intended functionality.
I develop the app using VS2010 and debug on Chrome. Once satisfied with progress, I transfer everything to a folder in an Eclipse project on my Mac (for Android devices), which is linked to my xCode project (for iOS devices).
After 3-4 months of work and overcoming learning curves with jQM and PhoneGap, I have found great success with this structured approach.