Smashing Mobile Web Development

Organizing Your Javascript Files

Until now, you have been keeping all your JavaScript files in the bottom of the index.html. This is good for a development build, but you also want to organize these files better based on their purpose. A good practice is to create a new JavaScript file defined by the type of actions the script will perform. For this scenario, you can order the structure as defined here:

assets

js

global.js

database.js

util.js

social.js

geo.js

helper.js

This structure enables you to quickly find the action you want to edit and organize your JavaScript files. You also will be able to separate the files so they download faster upon first load. Table 11-1 breaks down the files and their usage:

Table 11-1 Explanation of JavaScript Files

File Name	File Explanation
Global.js	This contains global variables, the document.ready() function, and any setup functions.
Database.js	As the name implies, this holds database connections, queries, and any other function interacting with the database.
Util.js	This file contains utility functions such as those that determine the time between two entries and other basic functions that get reused throughout the application, such as myStorage.
Social.js	This contains any social interaction between Corks and external sources, such as foursquare and Twitter.
Geo.js	This file contains all elements relating to maps or geolocation.
Helper.js	This file contains the HandlebarsJS helpers for your ...